Beyond jQuery: An expert guide to choosing the right JavaScript framework

The defining characteristic of a really good programmer is laziness. That doesn't mean stupid or ignorant, though. The really good lazy programmer doesn't write (then need to debug and test) 100 lines of code when 10 will do. In the JavaScript world, the truly lazy developer will rely on an efficient, well-tested, and well-supported framework to avoid constantly reinventing solutions to common problems.

Frameworks “chunk” much of the fine-grained functionality of the JavaScript language into method calls, reducing the amount of code the lazy programmer needs to write, test, and debug. There are two hurdles to clear before reaping that advantage: choosing a framework for your purpose, and learning it.

Once you’ve learned a framework, the obvious course is to stick with it for everything you develop so that you don’t have to learn something else, but that isn’t always useful. In fact, one of the clues that says you’re using the wrong framework for your current task is you find yourself doing a lot of work. So be really lazy and always keep learning.

A little history

The history of JavaScript goes back to development work Brendan Eich did on the Mocha language for the Web browser company Netscape in 1995. Mocha was released as LiveScript later that year and renamed to JavaScript when Sun granted Netscape a trademark license. Trying to tie the lightweight C-like JavaScript interpreter to the unrelated heavyweight Java -- an object-oriented, token-compiled language -- by means of a similar name seemed like a good idea for marketing purposes in 1995, but over the years that choice has caused no end of confusion.

The development of JavaScript over the next decade was marked by disagreements among the browser implementers and a fairly weak ECMA standards effort. What changed this malaise and reenergized the language was the rise of Dynamic HTML and Ajax in the mid-2000s, followed quickly by the introduction of open source JavaScript libraries such as Prototype, jQuery, Dojo, and MooTools, which were intended to make Dynamic HTML and Ajax easier to use, and to provide “widgets” for JavaScript that would enhance the functionality of HTML form controls.

Although Netscape released a JavaScript server shortly after JavaScript for the browser, the language didn’t really take off for back-end use until the rise of Node.js starting in 2009. Part of what made Node.js attractive was the use of Google's highly tuned V8 JavaScript engine for library modules, with core code in fairly portable C++.

This tour of JavaScript frameworks is an attempt to make sense of today’s major JavaScript libraries in three categories: ones that run in Node.js servers, ones that work in browsers, and ones that support native or hybrid mobile apps.

Node.js frameworks

Node.js is a JavaScript and C++-based server technology that has attracted quite a bit of attention and support since its introduction (to a standing ovation) by author Ryan Dahl at the European JSConf in November 2009. Node.js is distinguished by an event-driven architecture capable of asynchronous I/O, a small memory footprint, and high throughput and scalability for Web applications.

While Node.js has all the pieces needed to implement a Web server, writing that layer takes some work. TJ Holowaychuk released Express 1.0 Beta in July 2010, and it soon became the “default” back-end server for Node.js and part of the MEAN stack, with the MongoDB database and the Angular.JS front-end framework.

Nevertheless, different developers and organizations have different needs. Express has directly or indirectly spawned Locomotive, Hapi, Koa, Kraken, and Sails.js. Meteor is quite different, although it too runs on Node.js.

Express. Express is a minimal and flexible Node.js Web application framework, providing a robust set of features for building single-page, multipage, and hybrid Web applications. The Express API deals with the Web application, HTTP requests and responses, routing, and middleware. As of Express 4.x, the supported middleware for Express resides in a number of separate repositories.

Several forks of Express and add-ons for Express have surfaced, including Locomotive, Hapi, and Koa. Koa was created by one of the main contributors to Express.

Express is older than its scions, and it has a larger footprint. Nevertheless, it also has a larger community and more stability. I constantly see Express incorporated into other frameworks and tools without comment, as if it were the only possible choice for building a Web server on Node.js. On GitHub, the framework has more than 23,000 stars and 4,000 forks.

Hapi. Hapi is a simple-to-use, configuration-centric framework with built-in support for input validation, caching, authentication, and other essential facilities for building Web and services applications. Hapi allows developers to focus on writing reusable application logic in a highly modular and prescriptive way. It was developed by Walmart Labs and is a good choice for large teams and large projects.

Hapi was originally built on top of Express, but was later redesigned to be stand-alone. It is based on the ideas that “configuration is better than code” and “business logic must be isolated from the transport layer.” In the example above, notice how clear and clean the configuration of server routes appears in the code.

Koa. Koa is a new Web framework designed by the team behind Express, but independent of the Express code. Koa aims to be a smaller, more expressive, and more robust foundation for Web applications and APIs. Koa uses ES6 generators for middleware rather than using Node.js callbacks. The following is a “hello, world” Koa application using a generator, which does a yield next to pass control to the next generator:

The difference between middleware generators, as used by Koa, and callbacks, as used by Express and Connect, is that you get more flexibility with generators. For example, Connect simply passes control through a series of functions until one returns, while Koa yields control “downstream,” then control flows back “upstream.” In the example above, the x-response-time “wraps” the response generator, with the yield next statement marking the the call. Yielding is more flexible than explicit function calls, as it makes it easy to insert another generator into the sequence -- for example, a Web logger between the timer and the response.

Kraken. A PayPal open source project, Kraken is a secure and scalable layer that extends Express by providing structure and convention, much like Locomotive. Though Kraken is the main pillar of its framework, the following modules can also be used independently: Lusca (security), Kappa (NPM proxy), Makara (LinkedIn Dust.js I18N), and Adaro (LinkedIn Dust.js Templating).

Kraken relies on yo to generate projects, as shown in the screenshot at left. Like Locomotive, it organizes its projects into conventional Rails-like directories, including models, controllers, and config. As generated, Kraken ties into Express as standard middleware, defined as an app, which then has its app.use() and app.listen() methods called. Each route in a Kraken server lives in its own file in the controllers folder.

Locomotive. As a Web framework for Node.js, Locomotive supports MVC patterns, RESTful routes, and convention over configuration (like Rails), while integrating seamlessly with any database and template engine. Locomotive builds on Express and Connect, which is a simple glue framework for middleware used by a number of Node.js frameworks.

Locomotive adds to Express some Ruby on Rails-like structure, which you can see in the image above, that Express otherwise lacks. Locomotive views are often embedded JavaScript (html.ejs) files, as shown here, but Locomotive also supports Jade and other compliant template engines for Express. The REST functionality is controlled by routes, as is usually the case in Express-based servers. You can use whatever database and ORM (object-relational mapping) layer you’d like with Locomotive. The guide demonstrates using MongoDB with Mongoose, as well as working with Passport for user authentication.

Meteor. Meteor gives you a radically simpler way to build real-time mobile and Web apps, entirely in JavaScript, from one code base. Rather than sending HTML over the wire, Meteor sends data from the server for the client to render. In addition to running stand-alone, Meteor can integrate with AngularJS and React. Meteor is nothing like Express, even though it is also built on top of Node.js and supports Handlebars, Blaze, and Jade templates.

Meteor allows for rapid prototyping and produces cross-platform (Web, Android, iOS) code. It integrates with MongoDB, using the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. On the client, Meteor depends on jQuery and can be used with any JavaScript UI widget library.

Meteor is developed by the Meteor Development Group, a startup incubated by Y Combinator. Meteor is now mature enough to support half a dozen tutorial books. The project has drawn more than 32,000 stars on GitHub.

Meteor itself is free open source software, but the Meteor group monetizes it by selling Meteor Galaxy DevOps subscriptions, which include AWS server space and basic Meteor support, and a separate Premium support subscription.

Sails.js. With Sails, you can build custom, enterprise-grade Node.js apps. It is designed to emulate the familiar model-view-controller (MVC) pattern of frameworks like Ruby on Rails, but with support for the requirements of modern apps: data-driven APIs with a scalable, service-oriented architecture. It's especially good for building chat apps, real-time dashboards, or multiplayer games, but you can use it for any Web application project. Sails supports WebSockets and automatically sends socket messages to your app’s routes.

Like Rails, Sails values convention over configuration, provides generators and scaffolds for building out REST APIs quickly from blueprints, and uses an MVC/active-record design pattern. Sails is built on top of Express and uses Waterline for its ORM, with support for ORM joins. Waterline supports both SQL and NoSQL databases.

Sails is a back-end framework designed to be compatible with any front-end Web framework, such as Angular or Backbone, or mobile device, such as iOS or Android, that you happen to like or need to support. There is one book in the works on Sails.js, still only partially complete.

HTML5/JavaScript frameworks

We traditionally think of JavaScript libraries and frameworks as running in browsers. As I mentioned earlier, some of these -- jQuery, Dojo, and MooTools -- arose in the mid-2000s primarily to make Dynamic HTML and Ajax easier to write. Some of these have since expanded into additional areas of functionality, such as user interface widgets and mobile device interfaces.

Others have come about more recently. AngularJS is a front-end framework that extends HTML with markup for dynamic views and data binding. Backbone.js and Ember are designed for developing single-page Web applications. React is for building a UI or view, typically for single-page applications.

Still other frameworks pursue narrower areas of specialization. D3 does data visualization and animations. Socket.IO implements real-time Web apps. Knockout is a high-level way to link a data model to a Web UI. Polymer offers a lightweight “sugaring” layer on top of the Web Components APIs to help in building your own Web components. Underscore is a general-utility library.

As you might expect, you have an embarrassment of riches to choose from for client-side Web development.

AngularJS. AngularJS (or simply Angular, among friends) is a model-view-whatever (MVW) JavaScript Ajax framework that extends HTML with markup for dynamic views and data binding. Angular is especially good for developing single-page Web applications and linking HTML forms to models and JavaScript controllers.

The weird-sounding model-view-whatever pattern is an attempt to include the model-view-controller, model-view-viewmodel (MVVM), and model-view-presenter (MVP) patterns under one moniker. While programmers loves to argue the differences between these three closely related patterns, the Angular developers decided to opt out of the discussion.

Basically, Angular automatically synchronizes data from your UI (view) with your JavaScript objects (model) through two-way data binding. To help you structure your application better and make it easy to test, Angular teaches the browser how to do dependency injection and inversion of control.

Angular was created by Google and open-sourced under the MIT license. The repository on GitHub has more than 47,000 stars and 22,000 forks. Made with Angular showcases hundreds of websites built with Angular, many of them high-profile Web properties.

Backbone.js. Backbone.js is a lightweight open source JavaScript library with a RESTful JSON interface and an MVP application model, created by Jeremy Ashkenas and maintained by Ashkenas and the community. It depends on Underscore.js (also by Ashkenas), and it's designed for developing single-page Web applications and for keeping various parts of Web applications synchronized. A number of prominent Web apps have been built with Backbone, including AirBnb, Foursquare, Hulu, Pandora, Pinterest, and WordPress.com.

Backbone gives structure to Web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, and views with declarative event handling. It connects all of this to your existing API over a RESTful JSON interface.

With Backbone, you represent your data as models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the views that display the model's state can be notified of the change, so they are able to respond accordingly, re-rendering themselves with the new information. In a finished Backbone app, you don't have to write the glue code that looks into the DOM to find an element with a specific ID, and update the HTML manually. Rather, when the model changes, the views simply update themselves.

Backbone uses collections to deal with a group of related models, handling the loading and saving of new models to the server and providing helper functions for performing aggregations or computations against a list of models. Aside from handling their own events, collections also proxy through all of the events that occur to models within them, allowing you to listen in one place for any change that might happen to any model in the collection.

Backbone is agnostic about how its view and subview objects are rendered in the UI. You can define your own render() method for a view and generate HTML by hand, or use a parsed JavaScript template, or install a Backbone view extension such as Marionette or LayoutManager.

D3.js. D3.js is a tool for data visualization in Web documents. It allows you to bind arbitrary data to a DOM (Document Object Model), then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or you can use the same data to create an interactive scalable vector graphics (SVG) bar chart with smooth transitions and interaction.

D3 uses a declarative approach to picking and modifying HTML elements, operating on arbitrary sets of nodes called selections. In D3, unlike jQuery for example, styles, attributes, and other properties can be specified as functions of data, not only constants. D3 implements transformation, not representation of data. D3 creates elements in standard HTML, SVG, and CSS that are then rendered by the browser.

D3 supports animated transitions as well as transformations. By applying easing functions, you can control the interpolation or “tweening” of the transitions. Using D3 transitions does not keep you from using CSS transitions.

An extremely popular and widely used library, D3 has 47,000 stars on GitHub.

Dojo Toolkit. Dojo Toolkit is a modular, browser-agnostic JavaScript framework designed to provide everything you need to build a Web app, including language utilities, UI widgets, and data binding components. In addition to Web clients, Dojo also supports server (Node.js) and mobile, including integration with Cordova/PhoneGap. Dojo loads its modules dynamically using Asynchronous Module Definition format.

All Dojo is divided into four parts: dojo (core), dijit (widgets), dojox (extended functionality), and util (support tools). Functionality includes animation, effects, events, DOM manipulation, NodeList (Dojo’s internal node collection) manipulation, Ajax, deferreds, promises, and JSON with Padding (JSONP) support. Widgets include charting, dialogs, layouts, forms, and vector graphics, as well as themes, buttons, check boxes, sliders, and grids. Dojo handles data in “stores,” and it supports the MVC paradigm, as well as binding data to data grids and trees.

While there are several books on Dojo, they are all obsolete. The Dojo community is discussing creating a “living” Dojo book, probably starting with Dojo 2.0. The current stable version is 1.10.

In September 2015, the jQuery Foundation and the Dojo Foundation announced a merger. Several Dojo projects have since been restarted under the auspices of the jQuery Foundation.

Ember. Ember is an open source JavaScript framework designed primarily for creating “ambitious” single-page Web applications using the MVC pattern. Ember can also be used to build mobile and desktop apps.

Ember exposes routes that control what is visible to a user when called from the associated URL. Each route object has a data model, often built with Ember Data. Ember templates use Handlebars (technically HTMLBars, but let’s not quibble) with data binding that updates the display automatically when the data changes. Ember components are custom HTML tags implemented with Ember templates and additional JavaScript to define behaviors. Ember services hold long-lived data.

Ember supports promises, ES2015 modules, and ES2015 syntax. It also supports the newer syntax in older JavaScript implementations using Babel.js. The Ember CLI runs on Node.js.

Ember users include Yahoo, Zendesk, Square, Groupon, and Twine.

Famous Engine. The high-performance Famo.us JavaScript framework introduced last year has become the Famous Engine and Famous Framework. The Engine runs in a mixed mode, with the DOM and WebGL under a single coordinate system. As before, Famous structures applications in a scene graph hierarchy, but now it produces very little garbage (reducing the garbage collector overhead) and sustains 60FPS animations.

The Famous Physics engine has been refactored to its own, fine-grained module so that you can load only the features you need. Other improvements since last year include streamlined eventing, improved sizing, decoupling the scene graph from the rendering pipeline by using a draw command buffer, and switching to a fully open MIT license.

The new Famous Framework is an alpha-stage developer preview built on the Famous Engine. Its goal is creating reusable, composable, and interchangeable UI widgets and applications. Eventually, Famous hopes to replace the jQuery UI widgets with Famous Framework widgets, but the Famous Framework is nowhere near production-ready despite its promise.

Recently, Famous has gone quiet, there has been no visible progress in the open repositories on GitHub, and many of the developers have left or been laid off. That doesn’t mean that Famous is out of business: it has raised $30 million in venture capital. It probably means that Famous is pivoting slightly, with a small group of developers.

JQuery. jQuery started as an “inkling” by John Resig about a JavaScript library to use CSS selectors in a succinct way and has grown into a collection of multiple cross-browser JavaScript framework projects, including jQuery Core, jQuery UI, jQuery Mobile, QUnit, and Sizzle. jQuery Core is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation, event handling, animation, Ajax, and more.

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of Core. jQuery Mobile is a unified, HTML5-based user interface system for all popular mobile device platforms, built on Core and jQuery UI. Its lightweight code is built with progressive enhancement, which increases its portability at the expense of limiting how much native look and feel it can provide.

There are several books in print on jQuery, and they have been updated on a regular basis. The jQuery Foundation estimates that jQuery Core powers two-thirds of all websites; W3Techs puts the figure at nearly 70 percent of sites. The project repository on GitHub has 38,000 stars.

Knockout. Knockout, aka KO, is an open source JavaScript library that helps you create rich and responsive user interfaces with a clean underlying MVVM data model. KO features declarative bindings and forms, automatic UI refresh, model dependency tracking, and templating. It is intended to be a high-level way to link a data model to a Web UI.

When you look at a KO View, you’ll typically see HTML forms with added data-bind attributes. The KO viewmodel is a JavaScript file that defines the model, applies the bindings, and handles events from the view.

The author and maintainer of Knockout is Steve Sanderson, who happens to be a Microsoft employee. KO is not a Microsoft project, however: It is open source with a MIT license.

According to W3Techs, Knockout is used by only 0.1 percent of websites, but the sites that do use Knockout tend to have high traffic. A few sites using Knockout are Ancestry.com, Boredpanda.com, and Jsfiddle.net.

MooTools. MooTools, the MooTools site tells us, is a compact, modular, object-oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. The unique capability of MooTools (or unique prior to ES2015) is its Class constructor and support for classic inheritance, as shown in the figure. In addition, MooTools provides DOM utilities, animation, event handling, CSS3 selectors, Ajax, and quite a few extensions to the native JavaScript library.

The authors of MooTools like to describe it as a framework that improves JavaScript, including the DOM, and jQuery as a toolkit that enhances the use of the DOM. MooTools emphasizes modularity and reusability. MooTools is used on about 4 percent of all websites, per W3Techs.

Polymer. The Polymer library is a lightweight “sugaring” layer on top of the W3C Web Components APIs to help in building your own Web components. It adds several features to make it easy to build complex elements such as custom element registration, adding markup to your element, configuring properties on your element, setting the properties with attributes, data binding with mustache syntax, and internal styling of elements.

Polymer also includes libraries of prebuilt elements. The Iron library includes elements for working with layout, user input, selection, and scaffolding apps. The Paper elements implement Google’s Material Design. The Google Web Components library is exactly what it says, and it includes wrappers for YouTube, Firebase, Google Docs, Hangouts, Google Maps, and Google Charts.

The Gold library includes elements for credit card input fields for e-commerce. The Neon elements implement animations. The Platinum library implements push messages and offline caching. Molecules are elements that wrap other JavaScript libraries. The only Molecule currently implemented is for marked, a Markdown library.

The Polymer repository on GitHub currently has 14,000 stars. It is distributed under a BSD-style license.

React. React is a JavaScript library for building a UI or view, typically for single-page applications. Note that React does not implement anything having to do with a model or controller. React pages can render on the server or the client; rendering on the server (with Node.js) is typically much faster. People often combine React with AngularJS to create complete applications.

React combines JavaScript and HTML in a single file, optionally using an XML-like syntax called JSX, which is compiled into JavaScript. React fans like the way JSX components combine views and their related functionality in one file -- though that flies in the face of the last decade of Web development trends, which were all about separating the markup and the code. React fans also claim that you can’t understand it until you’ve tried it.

The React repository on GitHub has 37,000 stars. React is BSD licensed with a patent license grant from Facebook.

Socket.IO. Socket.IO is a small library that implements real-time Web apps using a custom protocol built on top of WebSocket I/O, with polling for fallback. Socket.IO implements server (Node.js) and client (browser and mobile) with nearly identical APIs.

Socket.IO uses Engine.IO for its socket connection, along with debug for its debugging logging. You can use the Socket.IO server alone under Node.js, with a Node.js HTTP server, with an Express server, and with a Koa server.

Underscore.js. Underscore is a JavaScript library that provides about 100 utility functions for four kinds of data types: arrays, objects, collections, and other functions. In addition, Underscore has its own utility categories, for chaining and other common routines that might be painfully long-winded in raw JavaScript. It also provides a test suite. Underscore is required by Backbone and is released under an MIT license.

Native or hybrid mobile app frameworks

While some browser-based JavaScript frameworks can be used to build mobile Web apps, Cordova/PhoneGap and Ionic are for creating hybrid or (occasionally) native mobile apps. Hybrid apps are the norm for these frameworks: Cordova or PhoneGap provides the native shell and the native capabilities, while the HTML part of the interface runs in a mobile Web view hosted by the native shell.

Cordova/PhoneGap. Apache Cordova is the open source project that was spun off when Adobe acquired PhoneGap from Nitobi. Cordova is a set of device APIs, plus some tooling, that allows a mobile app developer to access native device functionality such as the camera and accelerometer from JavaScript. Combined with a UI framework such as Angular, this allows a smartphone app to be developed with only HTML, CSS, and JavaScript. By using Cordova plug-ins for multiple devices, you can generate hybrid apps that share a large portion of their code but also have access to a wide range of platform capabilities. The HTML5 markup and code runs in a WebView hosted by the Cordova shell.

Cordova is one of the cross-platform mobile app options supported by Visual Studio 2015. Several companies offer online builders for Cordova apps, similar to the Adobe PhoneGap Build service. Online builders save you from having to install and maintain most of the device SDKs on which Cordova relies.

Ionic. The Ionic framework is a front-end SDK for building hybrid mobile apps, using AngularJS and Cordova/PhoneGap/Trigger.io. Ionic was designed to be similar in spirit to the Android and iOS SDKs and to do a minimum of DOM manipulation by using hardware-accelerated transitions to keep the rendering speed high. Ionic is focused mainly on the look and feel and UI interaction of your app.

In addition to the framework, Ionic encompasses an ecosystem of mobile development tools and resources. These include Chrome-based tools, Angular extensions for Cordova capabilities, back-end services, a development server, and a shell View App to enable testers to use your Ionic code on their devices without the need for you to distribute beta Apps through the App Store or Google Play.

Appery.io integrated Ionic into its low-code builder in July 2015. Ionic’s GitHub repository has more than 22,000 stars and 4,000 forks. Ionic is distributed under an MIT license, and it currently runs in UIWebView for iOS 7+, as well as in Android 4.1 and up.

Decisions, decisions

As we have seen, there is a robust ecosystem of JavaScript frameworks that supports the development of Node servers, browser-based apps, and hybrid apps. In several cases, frameworks build on other frameworks in useful ways. For example, Ionic builds on Cordova and Angular, Backbone builds on Underscore, and Locomotive builds on Express.

That fact hints at the opportunity for mixing and matching frameworks, but not at the potential costs of doing so. If you blithely combine several frameworks that serve essentially the same functions -- because you are reusing code from multiple apps built on different libraries, for example -- you might wind up with a working app, but you might also run up against incompatibilities between frameworks. You will certainly create apps with excessive memory usage and load time.

If at all possible, pick one framework for a given app or family of apps. Exactly which one will be best for your needs will depend on many factors, but starting your selection process with this bestiary may help you to pick a few promising candidates without needing to wade through the excessive hype and jargon that tends to surround them.