JavaScript Frameworks: AngularJS, Backbone.js & Ember.js

In the first part of this article we talked about the questions you need to ask before choosing a JavaScript framework. Once we have decided on the need for a framework, we saw how aspects like features of the framework, difficulty-level in learning, external dependencies and the level of community support guide our choice.

In this second and concluding part we are going to compare the three most popular JS frameworks namely AngularJS, Backbone.js and Ember.js.

The 5 parameters on which we will evaluate the three frameworks include:

• Size
• Getting started
• Developer productivity
• Community support and popularity
• Users

A quick glimpse into each of the three frameworks and what they do:

AngularJS

Who: Developed by Google; used internally by them and MIT licensed.

What: Angular follows the MVC pattern of software engineering and encourages loose coupling between presentation, data, and logic components. Using dependency injection, Angular brings traditional server-side services, such as view-dependent controllers, to client-side web applications.

Backbone.js

Who: Developed by Jeremy Ashkenas, (creator of CoffeeScript and Underscore.js ) and DocumentCloud. MIT licensed.

What: JavaScript framework with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. It gives structure to web applications by pulling your model out of your DOM and into Backbone’s Model, Collection, and View objects.

Ember.js

Who: Developed by Yehuda Katz (a member of the jQuery, Ruby on Rails and SproutCore core teams) and Tom Dale. MIT licensed.

What: Based on the model-view-controller (MVC) software architectural pattern, it allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework. Provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.

Let us now see how these three frameworks compare against one another.

Size

Size of the framework is an important parameter because it adds to the overall size of your application. This is especially important if you are building mobile apps.

The Gzipped size (no dependencies) of Angular, Backbone and Ember are 36kb (approx), 6.5kb and 90kb respectively.

However, both Backbone and Ember have external dependencies.

Backbone’s hard dependency is on Underscore.js ( >= 1.5.0). For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, jQuery is required and for older Internet Explorer support json2.js is required.

Ember needs jQuery and Handlebars.

Angular does not have any external dependencies.

The size of the framework affects performance. The trade-off is usually between features and flexibility. The more ambitious and feature- rich a framework is, more is the size and also more difficult it will be to integrate it with others particularly on the same page of an app. The more flexible the framework, less is the size but will require developers to write a lot of code.

Getting started

Angular is very easy to start with. You can do some awesome things like two-way bindings and out-of-the-box directives and filters just by learning the basics. From there, the learning curve becomes steep. Even the documentation uses many Angular specific jargon.

Backbone is the least opinionated of the three frameworks and its basics are therefore very easy to learn. However, the flipside to this is there are no ways to know how to best structure your code. It has fewer conventions than the other frameworks- it does not default to any view template, does not have a default project structure and no in-built testing recipe. It requires the developer to make a lot more decisions.

Ember has the steepest learning curve out of the three and requires some learning to get started even on the basic things. It is opinionated about how certain things should be done including how you name your objects and how you organize your files.

Developer productivity

AngularJS may be difficult to learn and may require you to structure your code in a particular way but once you get the hang of things, you can be very productive with it.

The key feature of Backbone is flexibility as it is the one with the least conventions and opinions. However, due to its inherent flexibility it requires you to write a lot of boilerplate code which goes against developer productivity.

Ember believes in conventions over configuration but all you need to do is learn and apply these conventions and then watch Ember do things magically. For example as mentioned in the above point, Ember can get lot of things done for you if you follow its naming conventions. If you have a url route /stories in the app, then you will have:

• a stories template
• a StoriesRoute
• a StoriesController

Community Support & Popularity

To gauge the community support and popularity for these three frameworks we looked at data from GitHub, Stack Overflow and Twitter and plotted the level of community support based on parameters like:

• All time contributors
• All time commits
• Active pull requests comprising of both merged and proposed (for 1 month)
• Tagged questions on Stack Overflow
• Tweets per day (for 1 month)

All time contributors (as on 7th August, 2014)

All time contributors help to understand the governance style of project―whether it is managed by a small group of people or open to contributions from diverse audience. Angular is a clear winner here. However, you should not overlook the fact that Angular is the oldest (initial release 2009) of the three frameworks and Ember (initial release 2011) is the youngest. Backbone.js initial release was in 2010.

Commits (as on 7th August, 2014)

Angular and Ember seem to be getting some shared love while Backbone lags behind in terms of commits.

Active pull requests (for 1 month)

Pull requests let you know how many changes (additions, deletions, modifications, etc.) the GitHub community has suggested for a specific framework. Once a pull request is sent, interested parties can review the set of changes, discuss potential modifications, and even push follow-up commits, if necessary. Anyone with push access to the repository can complete the merging of the pull request.

This helps to understand how much of the community’s contributions are being integrated into the project’s codebase. The higher the percentage of merged pull request, more is the framework open to community contributions.

Tagged questions on Stack Overflow (as on 7th August, 2014)

The number of tagged questions on Stack Overflow is also an indication of how active a framework’s community is. Angular is a clear winner here.

[For details of Stack Overflow data on Angular, Backbone and Ember]

Tweets per day (for 1 month)

We also used Twitter data to understand the popularity of these three frameworks. Here too AngularJS wins by a large margin.

Users

All three frameworks boast of some big names in their client list.

Google, YouTube on PS3, Nike, Huffington Post and many more use AngularJS. [Related read: Built with AngularJS]

Twitter, Foursquare, LinkedIn Mobile, Soundcloud, etc. use Backbone.js. [Related read: Projects and Companies using Backbone]

Yahoo, Groupon, Zendesk, Square and many more use Ember.js to power their apps. [Related read: See who’s using Ember.js]

Conclusion

Each JavaScript framework has its unique set of advantages and disadvantages and it would be unfair to say that one is better than the other. They all have a similar goal-to make the process of application development faster. The choice of the right framework depends to a large extent on the kind of application you are trying to build and your personal preferences as a developer.

Based on our experience, we would however suggest the following:

• If you can handle a slightly steep learning curve and are looking for a mature framework that is complete in itself, go for Angular.
• If you do not like too much control and are looking for a framework that offers easy REST api data access plus routing, go for Backbone. Be prepared to write a lot of boilerplate code, though.
• If you are looking for a framework that seeks to rival native apps and reduce the amount of time and code it takes to write a web app with, go for Ember. Be prepared for a lot of initial roadblocks in terms of learning.

Now over to you. Which framework did you choose for building your application and why? Share your thoughts and lessons in the comment section below.