AngularJS vs. Backbone.js vs Ember.js

There are more than 100 JavaScript frameworks available out there and the quantity of results on Google can be overwhelming. When developing a modern, sharp-looking website, including JavaScript at some point is essential. Advanced JavaScript programming can be very challenging however, especially when the application needs to behave the same way on different browsers. By picking the right JavaScript helper library, development time can be easier and less time-consuming.

One of the most popular JavaScript helper libraries is JQuery: a set of JavaScript functionalities that will ease the job of the developer. In this post we’ll take a closer look at three more advanced and popular frameworks: AngularJS, Backbone.js and Ember.js.

AngularJS

AngularJS is a JavaScript framework on an open-source platform maintained by Google. Based on the MVC (Model-View-Controller) architecture, it aims at making both development and testing efficient and easy. AngularJS extends traditional HTML code so that dynamic content can be easily served with help of two way binding.  Angular is an independent framework which means it doesn’t depend on any other JavaScript library - not even JQuery.

Backbone.js

Backbone.js is a lightweight MVC framework. After appearing in 2010, it quickly grew popular as a lean alternative to heavy, full-featured MVC frameworks such as ExtJS. This resulted in many services adopting it, including Pinterest, Flixster and AirBNB among others. It gives structure to web applications by providing models with key-value binding, custom events, collections with a rich API of enumerable functions and views. It can connect your existing API over a RESTful JSON interface. Backbone has a hard coded dependency on Underscore.js.

Backbone represents data as models which can be created, validated, destroyed, and saved to the server. Views are used to display the model’s state and can be triggered when a property has changed. The Views can then respond accordingly or re-render with the new information. Backbone is an attempt to lay down a minimal set of data-structuring (models and collections) and user interface (views and URLs) primitives that are generally useful when building web applications with JavaScript.

Ember.js

Ember's roots go way back to 2007. Starting its life as the SproutCore MVC framework, originally developed by SproutIt and later by Apple. It was formed in 2011 by Yehuda Katz, a core contributor to the popular jQuery and Ruby on Rails projects. Notable Ember users include Yahoo!, Groupon, and ZenDesk.

Ember allows developers to create scalable single-page applications. It offers 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.

Comparison

Community

An important factor when choosing a framework is the size of the community and the rate of activity on it. Angular.js has a larger, faster growing and more active community than the other frameworks mentioned here. It also has more highly starred projects on GitHub and more questions on StackOverflow compared to Backbone.js and Ember.js combined.

Framework size

Page load times are crucial for a successful web application. Users need access to information quickly. There are two factors which impact on loading times: the size of the framework and the time it takes to bootstrap it.

Comparing the minified version of each framework, Angular (1.2 - 105Kb) has the largest footprint followed by Ember.js (1.9.1 - 97Kb) and Backbone.js (1.1.2 - 6,5Kb). However, Angular does not have any dependencies while Backbone needs at least Underscore.js (5,2Kb). Ember.js and Backbone.js also benefit from using JQuery (82Kb). If our comparison includes these dependencies, Angular.js actually has the smallest footprint.

Templates

Angular and Ember include a template engine. Backbone, on the other hand, leaves it up to developers to use the template engine of their choice and Underscore templates are common here.

Flexibility

There are many JavaScript plugins out there that do specialised things, and usually they do them far better than the chosen framework. It is, of course, important that these frameworks can be integrated into the framework. Backbone.js is the most flexible framework because it has less conventions, so consequently developers have to make a lot of decisions when using it. Ember.js and Angular.js are flexible to some degree, but a few buy-ins are essential.

Learning curve

With Angular.js a developer can quickly start building an impressive web application, like using two-way binding, without having to learn much. It looks easy at first sight but after getting the basics, a steep learning curve follows. When using Angular.js, the developer must learn some very specific jargon. Ember.js has a comparative learning curve to Angular.js.

Backbone.js is easier to learn but leaves developers to make important decisions by themselves. Alongside Backbone.js the developer must learn the basics of other libraries like Underscore.js.

An informed decision

Choosing the right framework is an important decision when building a web application. Angular.js is the fastest growing and most active framework for the moment. It has a large community and Google’s backing. It’s definitely here to stay and works well for small and large projects. Backbone.js is the minimalist framework, small and easy to learn. Ember uses the MVC structure that many developers already know. All frameworks mentioned in this post help developers in creating flexible, powerful and mobile applications.