Since Javascript was born, around 20 years ago, we have witnessed the birth of loads javascript frameworks covering virtually every problem concerning web development. My initial intention was to give an overview of all these frameworks, but, given the abundance, I had to pursue a slightly modest goal. I will describe the 3 most popular frameworks (at the moment) for MVC pattern implementation: AngularJs, Backbone and EmberJS.
The question that arises is: why use a client-side MVC framework when all of my processing on the page are made for the most part, in PHP on the server? If we consider that today’s standard browsers are just one of the means used to access your network data, we can imagine using the server to expose APIs, returning only a JSON, so that consumer devices are demanded the task of presenting that data in the most appropriate way. Here comes the MVC frameworks. Let us see what are the three in the middle of the chatter.
Comparison Table
AngularJS Backbone EmberJS
Latest release 1.3.0 1.1.2 (February 20, 2014) 1.6 and 1.7 BETA (July 7, 2014)
Weight (kb) 108 (minified) 6.3 90(min + gzip)
Frist release 2009 Oct. 2010 2011
Community Large Large Large
Website https://angularjs.org/ http://backbonejs.org/ http://emberjs.com/
Maintainer Google Jeremy Ashkenas and the community Yehuda Katz, Tom Dale and Ember.js contributors
Technical features
AngularJS Backbone EmberJS
Observables Y Y Y
Routing Y Y Y
View bindings Y N Y
Two way bindings Y N Y
Debugging Chrome plugin Y N Y
Debugging Firefox plugin N N Y
Supported protocol HTTP RESTful RESTful (but can be expanded with adapters)
Observables Objects that can be observed for changes (take a look here for further explanation of observer pattern).
Routing Pushing changes to the browser URL hash and listening for changes to act accordingly.
View bindings Using observable objects in views, having the views automatically refresh when the observable object change.
Two way bindings Having the view push changes to the observable object automatically.
AngularJS
Let’s start from AngularJS. The main feature that brings Angularjs to another level is the two-way data binding implementation. Angular detects changes in model through comparison between current and previous values, a process called dirty-checking, while Ember and Backbone are using some sort of trigger mechanism. Data-binding mechanism allows AngularJS to manage templating easily from client side coding, reducing CPU consuming activities on the server. Templates are rendered according to the data contained in a particular object called $scope. The $scope service connects the view and the model: every time a change is done to the view the model is updated and, vice versa, any alteration on the model reflects in the view.
One thing that developers will love is the extremely coincise syntax of AngularJS: the same things done with AngularJS data bindings are implemented by Backbone using a lot of boilerplate code.
It is also possible to expand templating capabilities using it in combination with Mustache. Another important feature of AngularJS is the use of partial views and filtered views. The first are views that can be includeed in other views, the latter are views that can display objects filtered by a certain criteria.
Another notable thing is that AnglularJS provides the chance to create object models as simple javascript objects and there are not constraints about sub-classing any Model superclass.
Some examples of websites built with Angular are:
Youtube on PS3
ONS FloorPlan
24Me
You can find more examples on https://builtwith.angularjs.org/
Backbone
The strength of Backbone is itsultra-light weight: 6KB only for the production library. Also, it’s very easy getting started with Backbone and to implement it in a small portion of a page.
On the other way, a lot of core functionalities are missing in comparison with Angular and Ember. This makes you work more in order to implement objects natively included in other frameworks. Obviously this can be bypassed using external libraries such as PubNub for data-binding or UnderscoreJS and Mustache for templating.
The way to create custom models is a little different from AngularJS: it is mandatory to subclass the Model class. In This way you can use setters and getters and keep the model up-to-date.
Some examples of websites using Backbone are:
DocumentCloud
USA Today
Wordpress.com
Disqus
You can find more examples on http://backbonejs.org/#examples
Ember
EmberJS is focused on performance and small size (as told in their website)
Just like AngularJS, EmberJS has partial views (views included in other views) and filtered views (views displaying objects filtered by some criteria) and EmberJS also includes the Handlebar templating system that allows to synchronize model and HTML automatically when the underlying model changes, likewise happens in AngularJS.
Another feature is the strong push to use the native Ember’s idiom and is provided with simple API set: both releasing the developer from reinventing the wheel and speeding up his work.
The model creation in EmberJS looks very similar to Backbone: you have to subclass the Model class.
Let’s talk about documentation: on the website we can find APIs documentation and a blog, it also seems to be large community around it.
Some examples of websites built with EmberJS are:
Yahoo!
Yapp
Tilde
You can find more examples on http://emberjs.com/ember-users/
Further considerations
One important announcement from Google opens a new important scenario in using MVC framework to build single page web app: Google, on May 23rd, said that its indexing algorithm will include javascript processing. Before today, in fact, a single-page website implemented using a MVC framework will appear, for search engine eyes, like a blank page; now this will finally change.
One more thing is that Google, with Chrome 35, fully implement Object.observe. Thanks to this, use plain JavaScript object no longer enforces the use of dirty-checking and put AngularJS in a position of advantage because, between 3 framework analyzed, it is the only one allowing the creation of model that does not inherit from a class system.