Updated June 2018.
- 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):
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.
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.
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.
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.)
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.
You can even use QUnit to test QUnit (assuming you’d ever want to do so)!
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.
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.”
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.
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.
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
- Customer management systems
- Real-time services, such as chat apps and games
- REST APIs
- Social network applications
- Utilities and tools
For more information, you can see how Vue compares with other Frameworks here.
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