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.