The Best JavaScript Libraries and their Most Powerful Features
Tuesday 25 August 2015, by Lewis Swift
Jump to:
If you're new to JavaScript, you've likely been focusing on the core capabilities of the language. This is a vitally important part of the learning process, because plain JavaScript can be all you need sometimes to write a clean, quick solution to the programming problem you're tackling.
It's common for JavaScript beginners to start out using libraries like jQuery, for example, to help them interact with HTML elements via the DOM ('Document Object Model'). But modern plain JavaScript actually includes a variety of built-in methods for, say, changing the way a particular element behaves when it is clicked on.
So including a library like jQuery, with it's large filesize (since beginners rarely customise the jQuery code included in the file), just so that you can select elements and update their on-click behaviour is often unnecessary. As is including hefty image carousel plugins or complex parallax plugins with dozens of options, perhaps, if all you need is one simple bit of functionality.
However, once you've become familiar with what plain JavaScript offers, you'll find it useful to look at certain libraries for certain projects. Some libraries add a lot of additional functionality that enable you to create more elaborate website features (such as interactive charts, or drag-and-drop uploads) in much less time.
Chosen carefully, the right JavaScript libraries (included in the right projects) can make the development process more efficient and robust. So here are a few libraries that are popular and useful, along with usage examples and recommendations for when to use them.
The Underscore JavaScript library provides over 80 new functions that you can use in your code, along with some more specialised helpers like JavaScript templating.
Some of these functions are being built into plain JavaScript as the language develops, but the Underscore library will use the built-in functions if they exist (i.e. in modern browsers), which is very helpful.
Example:
In the example code below, you'll see that we've created an array of 'customer' objects to work with. Each customer object contains an array of their order numbers.
What if we want to quickly find out which customer made order #21? The code for this could involve some nested loops—or we could use Underscore's _.each() and _.contains() methods.
By using _.each() and _.contains(), our code is more semantic and concise. It's clearer that we're looking at each customer in the customers array, and checking their 'orders' properties for a particular value.
'D3' is short for 'data-driven documents', and it's a JavaScript library for building data visualisations.
However, it's also considered by some to be the best library for a variety of SVG animation and interaction tasks, and especially for binding data to graphics.
You can see that there are many sophisticated examples that you can browse from the D3.js homepage, but here we'll look at a simpler example, more suited to those trying out this library for the first time.
The result of this code may not seem terribly impressive, but once you understand how these lines of code utilise the D3.js library to create an SVG shape with certain characteristics and attached animations, you'll see how powerful this library can be.
Once you're comfortable creating SVG shapes and placing them in the location that you want them, you could import some data and use D3.js's methods to plot this data as points on a graph.
There are many far fancier ways to display data using D3.js, too. Start with simple animated shapes now, and soon you could end up creating a Radial Reingold–Tilford Tree
The example above was created thanks to Christophe Viau's excellent D3.js tutorial.
This library is a set of user interface interactions, effects and widgets built on top of the famous jQuery library.
jQuery UI's interaction features include making elements draggable, dropable, resizeable and sortable.
The widgets that are available include accordions, autocomplete fields and sliders (amongst several others). You'll find similar widgets available in many UI frameworks, like Bootstrap or Foundation, so you might not use the jQuery UI for those.
The interaction features are very useful, though. As you can see in the example below, it can be quite straightforward to create selectable elements, and even to allow users to select more than one.
This library has a fairly straight-forward purpose: to help you handle dates in a more complex manner than basic JavaScript allows.
It can be quite tricky to calculate the difference in time between one day and another due to leap years and differing month lengths. So if you need to calculate time differences in your app (for example, in an event-planning app you might want to show users how long until an event begins), this library could help.
It's simple but effective.
With this library, you can implement simple data-binding in your website, turning it into a more responsive application.
In the example below, you can see that Rivets.js makes it straightforward to bind an object in your JavaScript code to a specific section of your HTML document.
You can then use simple templating with curly braces (like { user.name }) to display data from the object, or you can do more sophisticated things like allow the user to update the data from the document.
In our example here, the user can select a new favourite colour from the dropdown menu. This automatically updates the user object's favColour property, which means that the { user.favColour } templating above is also automatically updated.
This is called two-way data-binding, because the model updates the DOM and the DOM updates the model.
Once you've started using a library like Rivets.js, you might find it useful to investigate more powerful/complex options like Angular or React.
These larger libraries will enable you to build increasingly complex 'single page' web applications, i.e. interactive web apps that show different data and views without any extra page loads. (Gmail.com is a famous example of this style of app.)
The Three.js library was created to simplify the process of using WebGL to create 3D graphics in the browser. If you're interested in developing browser games, you'll find Three.js useful.
In the example below, drawn from the Three.js 'Getting Started' documentation, we can see that we need to start by creating a scene, a camera and a renderer using the Three.js library.
Next, we create a shape (the green cube), using Three.js's BoxGeometry, MeshBasicMaterial and Mesh methods. We add the shape to the scene by using scene.add().
Finally, we create a function called render, which is what actually makes the shape visible to us in the HTML document. This creates a loop that causes the renderer to draw the scene 60 times per second.
Within this render function, we can include animation rules if we want our shape(s) to move while the render loop is running.
With Three.js, you can accomplishe a lot of complex WebGL work in just a few lines of code.
What are your favourite JavaScript libraries, and what makes them so useful? Let us know in the comments below.
