Thursday, 21 June, 2018 UTC
Summary
Updated June 2018.
Of all the languages you can use to create web applications, JavaScript has perhaps the most robust selection of truly useful libraries and frameworks. In fact, there are so many that it can be hard to figure out which ones to use, especially when you’re just getting started.
The key difference between JavaScript libraries and frameworks is that libraries consist of functions that an application can call to perform a task, while a framework defines how a developer designs an application. In other words, the framework calls on the application code, rather than the other way around. Of course, developers still need libraries to accomplish basic tasks on the web using JavaScript.
The nature of these tools has changed in the last few years. Back in 2015, for example, jQuery was the top JavaScript library. Today, according to JavaScript Scene, traditional JavaScript libraries remain important but face increased competition from JavaScript frameworks such as React, Angular, Node.js, and Ember.js.
When considering any JavaScript library or framework, you may want to ask a few key questions:
- Is the library or framework flexible enough to meet your needs?
- How often is the library or framework updated to meet new application requirements and to ensure compatibility with new standards?
- Is the library or framework secure? It can be very difficult to fix security problems later.
- Does the library or framework enjoy strong community support? You might be surprised how often you’ll need it.
- Are there simple example applications? You want to be sure that the library or framework is well written and provides usable documentation.
With that in mind, we’re updating our list, originally published in 2015, to cover well-known libraries and frameworks employed by just about every site on the web, as well as more specialized options designed to support specific site functionalities. To help you understand the choices, we’ve listed the libraries and frameworks separately (in alphabetical order):
JavaScript Libraries
1. D3.js
Many modern websites are data driven. News sites, for example, must constantly refresh their content, making it impossible to reconfigure the setup every few seconds to support these changes. The Data Driven Documents, or D3.js, library is unique in that it puts the data first. The screenshot below shows just a few of the many data presentations you’ll find in D3.js’ visual index:
Clicking an entry in the visual index takes you to a detail page where you can see a full view of the data presentation (shown below), as well as the underlying code and the data used to create the presentation:
The site provides full-fledged examples designed to help you understand the power of the library.
The main advantage of this library is its extremely flexible handling of content. The flip side, however, is that D3.js doesn’t deliver a lot of pizzazz. If you’re working on an e-commerce site, for example, rather than merely presenting information, this library may not be the best choice. In addition to extreme flexibility, D3.js’ relatively streamlined presentation helps improve speed by eschewing a lot of the baggage other libraries use to create bedazzling presentations. And if you find that D3.js is still a bit too much for your needs, consider Chart.js, a smaller library dedicated to providing charting.
2. jQuery
jQuery has earned its long-running status as the reigning ruler of the webpage. Many sites still use jQuery for basic Document Object Model (DOM) manipulation for three essential reasons:
- jQuery is incredibly easy to learn. It provides more examples than most libraries, so there is a really good chance you’ll find an example that demonstrates exactly how to accomplish your specific task.
- jQuery is incredibly fast. Because it focuses on performing specific tasks well, jQuery makes it possible to perform those tasks quickly.
- jQuery has a huge installed base. It also has significant amount of community support and project contributors.
You can expect this library to be around for the long haul. The additional development time also means the documentation is quite polished. As you can see below, the documentation breaks topics down into easily understood pieces and you can then delve into additional detail as needed:
Of course, nothing is perfect. For example, there are times when jQuery doesn’t work quite the same across multiple browsers. JQuery is up front about these concerns, and you can find information about browser support on the site.
Finally, unlike other libraries, jQuery isn’t a complete solution. You need another product, such as jQuery UI (see the next entry) to build a complete application. It’s important to realize that your site will be more modular and dependent on more libraries when working with jQuery (which isn’t necessarily a bad thing).
3. jQuery UI
jQuery UI is just one of many add-ons for jQuery, but it’s the one you see most often, which is why we’ve included it here. You use jQuery UI to add basic graphic elements to your application after you incorporate jQuery. The jQuery UI library comes with all sorts of interesting widgets, such as accordions, sliders, tooltips, and datepickers, that make it possible to configure your application to provide useful services.
You can drill down to particular widgets or other controls to see how they work. A page typically contains the control at the top, followed by directions for use and sample code. As with jQuery, you begin with a simple example but drill down as needed to see additions you can make.
This library stands out for several reasons. Most important, JQuery UI works with just about any browser, so users are less likely to complain that your application doesn’t work as expected. jQuery UI also offers a vast number of add-ons. For example, while jQuery UI lacks a time picker, you can get add-ons to perform that task from places such as trentrichardson.com/examples/timepicker.
The one issue with the jQuery group of libraries is that they have gotten big … really big. Sometimes a library simply gets to be too feature rich. The size of JQuery libraries can make them slow to load on smaller devices. Alternative third-party libraries such as Granim.js and Multiple.js have sprung up to provide a subset of jQuery features, sometimes with a focused set of additional features, with significantly faster load times.
4. Parsley
Form validation is an essential task. Because data is now so often analyzed by machines, clean data is more essential than ever. Cleaning the data after the fact is time consuming and never as accurate as getting the user to provide correct information in the first place.
Parsley provides more form-validation techniques than just about any other JavaScript library. You choose the level of validation you need, but they can become quite complex:
Even the supposedly simple validation shown below contains many different validation types, along with the code required to perform the task. It’s amazing how easy it is to accomplish most common validations. (You won’t need heavy coding unless you’re trying to validate complex data.)
5. QUnit
The testing functionality provided by many libraries leaves much to be desired. Even if you use a script, manual testing of complex applications is bound to be cumbersome and time consuming—if it can even find all the errors.
QUnit is one of several unit-testing libraries available for JavaScript. Though some might consider it a bit dated, it’s relatively comprehensive and stands out with great community support and a short learning curve. The QUnit site provides a wealth of get-started information, including a complete tutorial on unit testing.
You can even use QUnit to test QUnit (assuming you’d ever want to do so)!
6. React
Usually considered a library, React is sometimes referred to as a framework. In the context of the Model-View-Controller (MVC) approach to creating large-scale applications, React provides the view portion. It doesn’t assume anything about the underlying technology stack that you’re using to model or control the data. All React is interested in is displaying the data on screen. With this in mind, it doesn’t rely on the browser Document Object Model (DOM), but instead uses a light virtual DOM that displays the information quickly. One of the best things about React is that it’s declarative, which means you tell the framework what you want to do, not how to do it.
The price you pay for the speed and ability to use MVC is some degree of added complexity. Even a small component requires quite a bit of code (as demonstrated by the examples on the React site). What you gain is flexibility and speed when working with really large projects.
JavaScript Frameworks
1. Angular
The Angular framework makes it possible to extend HTML by acting as the controller portion of MVC. Controllers are the behavior behind DOM components. Angular makes it possible to create new behaviors in a manner that is both natural and straightforward. The extensions end up looking like additions to HTML, rather than something bolted in place. The Angular site makes clear the two essential reasons to use this product: “speed & performance” and “incredible tooling.”
However, the coding can become complex, and this framework may be more suited to enterprises than small startups. Even the simple examples on the Angular site rely on multiple files that quickly create complexity. It’s important to note that the latest version of Angular also relies on TypeScript instead of pure JavaScript, which increases the learning curve but provides scalability.
Fortunately, Angular comes with an extensive tutorial, shown here, that should make it easier for experienced developers to start producing results quickly.
One potential issue: the latest version of Angular does not support as wide a range of browsers as did previous releases. Make sure it’s compatible with the browsers your site supports.
2. Ember.js
There is something serious about a framework that refers to itself as a “framework for ambitious web developers.” Well-known companies like Microsoft, Netflix, and LinkedIn use Ember.js because it employs the Model-View-View-Model (MVVM) pattern and incorporates best practices as part of the framework. Best of all, it scales really well. Interestingly, while Ember.js focuses on web development, you can also use it to build mobile and desktop applications—it was used to build Apple Music.
Unlike many other frameworks, you can use the full suite of Ember-based tools to create a highly compatible development environment. The Ember CLI (command line interface) provides access to a wealth of tools that you can automate using scripts. Ember Data, for example, provides web-oriented data access using Object-Relational Mapping (ORM). Ember Inspector, meanwhile, is a plugin for Firefox and Chrome browsers designed to make debugging easier.
Even with all its power, though, Ember.js’ quick-start tutorial takes just five minutes to complete. Of course, the standard tutorial takes significantly longer, but produces more respectable results, as shown here:
The documentation for this framework includes all of the topics you need, including discussions of the object model, templates, components, controllers, and models. There is also a blog, and the Ember.js community can provide additional help.
3. Node.js
Node.js is an asynchronous, event-driven JavaScript runtime with some unique features. For one thing, if it has no work to do, it simply “goes to sleep.” This may not sound like a big deal, but if you’re hosting your site in the public cloud, “puting it to sleep” could save you money—possibly lots of money. In addition, because Node.js doesn’t require locks to do its work, it doesn’t tend to dead-lock as some other frameworks can. This product is more like jQuery rather than jQueryUI, in that you don’t use it to create a user interface. Instead, you create code that reacts to events—a client generates events, and the server responds to those events. The user interface is a separate element that displays any result.
Because Node.js is so simple and fast, with community support second to none, you can find it in the unlikeliest of places. Even if you don’t think you have the full package installed, you likely have at least part of it installed as part of Node.js Package Manager (NPM). According to the Node.js foundation, there are 9 million instances of it running on more than 50,000 thousand packages. In other words, Node.js forms the foundation of a great many of the packages you use. With Node.js, developers can build:
- Backend applications
- Blogs
- Customer management systems
- Real-time services, such as chat apps and games
- REST APIs
- Social network applications
- Utilities and tools
4. Vue.js
A versatile open-source JavaScript framework, Vue is “progressive,” which means that unlike “monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable.” Scaling between a library and full-featured framework, Vue uses a “component-based development model” that lets you mix and match Vue components into your projects.
Key Vue features include components, templates, transitions, and two-way data binding, but perhaps its most distinctive feature is its “reactivity” system. Basically, reactivity means that updating a JavaScript object in Vue automatically and unobtrusively updates the Vue templates.
Vue was built to be usable by anyone with a working knowledge of HTML, CSS, and JavaScript. To get an idea of how it works, watch the video below:
For more information, you can see how Vue compares with other Frameworks here.
Other choices
Don’t forget that there are many more JavaScript libraries, communities, collections, and frameworks available, often with specific focus areas.
For example, CodePen is a free online community for testing and showcasing mixes of HTML, CSS, and JavaScript. Think of it as a social environment for frontend designers and developers, an online development community, and an editor with a uniform interface. Each CodePen entry is called a Pen and you can see them in action as part of a collection. Some collections are quite fancy, such as anime.js, while others, such as Funny JS, have interesting widgets you might not see elsewhere. It also works with directly with React.
Similarly, Jest is a “zero-configuration” JavaScript testing solution designed to work out-of-the-box with React.
BIDEO.JS, meanwhile, provides a method for displaying full-screen background videos, useful if you’re building a site for a travel agency, for example.
The bottom line
As it should be clear by now, the problem isn’t finding a JavaScript library or framework that can help you do something interesting—it’s finding the library that will help you do the one task you need to accomplish.
In addition, you want to make sure you’re relying on libraries that will still be around tomorrow. No one wants to have to rework their application because the JavaScript library it uses is no longer available. And even though most modern JavaScript libraries and frameworks are now extremely reliable, you still have to ensure they work with all of the devices and browsers your users rely on.