Libraries are one of the most essential utilities in any programmer’s tool kit. Sure, you could build all of your code from scratch, but that could turn a week long project into something that takes months. Libraries allow you to automate the simple stuff and bypass the complications of more elaborate scripts with clean alternatives. Fortunately, Javascript’s rapid rise to prominence means that there’s a huge community developing a diverse collection of libraries. It’s the de facto client side scripting language and a practical necessity if you want a dynamic website or app that offers bells and whistles beyond what can simply be accomplished with pure HTML and CSS, but it’s powerful enough to serve as the base for far more complex applications. Unfortunately, this enthusiastic adoption means that it can sometimes be hard to find the right library to suit your needs. Importing too many libraries into your code base can make it hard to find the right functions for your scripts, and worse, it can create conflicts in your functions that could require tricky debugging. Whether you’re looking to figure out what Javascript can do through the creation of a hobbyist project or supercharge development on your professional projects, here are some of the best Javascript libraries available.
Algolia Places
What it Does: As the Internet of Things becomes such an important component of modern software, users demand more apps and sites that connect the information they search for directly to their daily lives. Algolia Places makes it easy to integrate map functionality into your programs. By drawing from OpenStreetMap’s expansive and free database of worldwide locations, it allows you to integrate map functionality and autocomplete directly into your HTML code.
The Coolest Features: Algolia makes it easy to incorporate the sort of quality of life functions you’d find on Google Maps into any application. Autocomplete is available for both address and country searches, meaning that users won’t have to sift through locations thousands of miles away to track down an address just a few blocks away. A ranking algorithm means that the most relevant results will show up first in the feeds of your users, and there’s even the ability to let users narrow down their results using a traditional map and pin structure drawing from that same algorithm. Algolia takes typos into account with its rankings for better results. Search results from the OSM database can even be linked to your internal indices to create smart and targeted results tailored to your mission statement.
Underscore
What it Does: While Javascript’s value as a language is well earned, that doesn’t mean that it’s not without its flaws. The one that sticks out the most is perhaps its very limited standard library. Chances are that this won’t be changing anytime soon; so if you want to increase the functionality of your programs without having to build out extensive lines of code, you’re likely going to want a utility library. Underscore is one of the best around, providing an extensive range of functions that expand your native Javascript without requiring you to extend any built-in Javascript objects.
The Coolest Features: While it may not be the sexiest thing around, Underscore is exceptionally good at sorting things and manipulating data. A lot of these functions are the sort of standards migrating users could expect from functional languages like Python that are built for data visualization and manipulation. The pluck function allows you to create an array of property values using a fraction of the code. There’s also the ability to map arrays, create a ranged list of integers, and invert the keys and values in any object. FindWhere is an essential for anyone working with large data sets, allowing you to quickly identify the first match in your listed key-value pairs.
React
What it Does: HTML and CSS are cool, but putting together a sleek and modern user interface can require some incredibly complex coding and tricky workarounds. Built in 2013 by Jordan Walke, React has quickly ascended to a position as one of the most popular libraries for putting together a UI. There’s a good reason for that too. React offers a whole wealth of tools you can use to create an interface that looks slick and adapts responsively to accommodate the demands of multiple devices. Its declarative structure means that you can make adaptations to your code easily without having to worry about the fundamentals breaking and you having to rebuild your structure from the ground up. A smartly designed component-based structure allows you to create exceedingly complex interfaces with far less fuss.
The Coolest Features: PropType is an especially cool function, as it allows you to more easily debug your program by setting data validation parameters for each of your components. Meanwhile, Object.assign allows quick comparison of components when testing functions so that you can avoid redundancies more easily.
Premonish
What it Does: Premonish is a short and sweet library that allows you to easily create sites that predict and respond to the cursor movements of your visitors. A simple API makes integrating it into your site a breeze. By calculating the location and velocity of your cursor, Premonish lets you highlight elements on your page through the use of a variety of CSS functions. While it may be lacking in its variety, it’s a useful library to keep around if you want your site to stand apart from the rest of the herd.
The Coolest Features: Premonish is a straightforward library that does exactly what it says on the packaging. The premonish function allows you to link together dynamic CSS effects that respond to user input.
Voca
What it Does: Importing Voca will bring a whole raft of string manipulation functions to your project. Working with strings can be a real pain in the vanilla version of Javascript, but Voca comes with a deep function set that can condense laborious tasks into a single line of code. Voca is also eminently modular. That means that you can import the entire library directly into your project or simply pick and choose the functions that are right for you, reducing the risk of redundancies and making for a cleaner code base. This plug and play functionality is further bolstered by the fact that it’s a library with no dependencies.
The Coolest Features: The functions available through Voca are incredibly dense. You’ll find a dozen case functions that allow you to manipulate your text into practical standards like upper and title case as well as more complex variations like camel and snake case. Digging deeper provides even more robust manipulation options. You can chop up strings at particular characters and code points or use more flexible truncation or slice functions. Additionally, Voca provides robust options for formatting, counting, and indexing strings for more complex string analysis.
Three.js
What it Does: Web design has come a long way since the crude dynamic sites of the early days of HTML and CSS, and Three.js is leading the charge in the creation of apps and sites that want to incorporate 3D design functionality. Three.js simplifies the process of creating 3D images and animations for your project and reduces the barrier to entry for designers with more limited coding experience and coders looking to create complex designs without having to learn the ins and outs of three dimensional design suites. If you’ve ever browsed codepen.io, you understand the impressively complex three dimensional structures that coders can design with CSS and a line or two of HTML alone, but Three.js makes these sort of designs infinitely easier and adds a number of cool functional assets on top.
The Coolest Features: The Three.js examples page provides a wealth of samples for what you can create with its rich library. Their geometric functions allow you to easily put together dynamic and responsive models, but just impressive are their texture functions which allow you to simulate everything from the effects of water to realistic cloth structures. Camera functions put you in control of the perspective, and a number of seamless animation functions allow you to recreate everything from the movement of human models to zooming maps.
Lazy
What it Does: While Underscore and LoDash are the leading utility libraries around for Javascript, lazy.js is quickly making its way to the front of the class. That’s because it makes use of a lazy engine to simplify the process of functional programming. It comes equipped with most of the functional tools that you’ll find in those other libraries to allow you to fulfill a flexible range of demands while doing less work in the process. Importing is a breeze, since lazy.js has no external dependencies, and it possesses much of the data manipulation options available through more proper functional languages.
The Coolest Features: For most of your practical needs, Lazy replicates the sort of functions you’ll find in Underscore. Pluck allows you to iterate through an array using a variable and create a new array according to your specifications, while filter allows you to further narrow down the criteria for your iteration. The take variable allows you to set a discreet limit on how much information you reiterate. That’s not to say that Lazy’s functions are interchangeable with other utility libraries. There’s the ability to create infinite sequences, event sequences that allow you to iterate over time, and functionality for asynchronous iteration.
Math.js
What it Does: Where Underscore and lazy.js offer two sensible options for the manipulation of arrays, they don’t do a lot to expand the mathematical functionality of Javascript. If you have the need to add deeper computational functionality to your projects, you’re going to want to add math.js to your list of preferred libraries. The flexible expression parser supports the use of symbolic computation, making it an ideal choice whether you want to run calculations for a merchant storefront or look outside the box and use Javascript for high-end computations or statistical analysis. The deep feature set goes well beyond standard numerical manipulation as well. Support is included for diverse data types like matrices, fractions, big numbers, and complex numbers.
The Coolest Features: Anyone who’s used a functional language more devoted to numerical manipulation will find themselves very comfortable with this library. While the majority of its functions are pretty standard for the category, its main use is its utility. You’ll find the ability to determine a square or square root, round off a fractional or decimal number, and determine a derivative. Adding to its utility is the ability to create complex expressions and then chain them together when you’re working with more complex computations.
ChartJS
What it Does: We’ve already talked about utility libraries that can help you manipulate arrays, numbers, and more advanced data types, but ChartJS adds another layer of utility in the form of data visualizations. Combined with a library like Underscore or lazy.js and math.js, users will have the ability to analyze copious amounts of big data and then format them into easier to digest visualizations using ChartJS’ functions. Eight different types of data visualizations are supported, and they can be effectively rendered into basic HTML without any fuss or hassle.
The Coolest Features: The simplicity with which you can wield ChartJS is a breath of fresh air. Charts can be converted into an HTML5 ready wrapper simply by assigning them to <canvas> tags, and the performance across browsers is particularly and refreshingly strong. Each of the varieties of charts is assigned to its own simple function, but there are additional options to manipulate the components more readily. You can adjust the axes and radials to create more personalized results as well as assign events to create more advanced interactions with your users. A number of styling options are also available for things like labels, coloring, and fonts.
Anime.js
What it Does: While #keyframes and animation tools add some level of animated functionality to the latest version of CSS, they’re limited, and it’s not a language particularly well suited for more complex variations. Anime.js lets you cut out the busywork and provides you with access to an extensive library of animation functions that you can use to turn a simple object into a dynamic work of art that responds to predetermined or user-initiated events. From forms with borders that respond to user clicks to animations with the basic look and feel of cartoon shorts, there’s a lot you can do with anime.js.
The Coolest Features: The breadth and reach of this library is especially impressive. Anime.js can interact with CSS, DOM attributes, SVG, and JavaScript objects, turning it into something of a swiss army knife for animations. While a lot of the functions included can be accomplished using other formats, anime.js does the same thing using more elegant language and less complicated or jury rigged blocks of code. Creating complicated timelines and paths for your animations are an easy thing to accomplish, and when you start linking them to standard functions like hover, the ability to create stunning, personalized, and complex animations is wide open.