Beyond jQuery: An expert guide to JavaScript frameworks

How to choose from 22 essential JavaScript frameworks for Web and mobile development

1 2 3 Page 2
Page 2 of 3

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.

backbone

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

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.

dojo

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

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.

famous

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.

jquery

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.

knockout

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.

mootools

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.

polymer

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

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.

socketio

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.

1 2 3 Page 2
Page 2 of 3