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.
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
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.
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.
Some examples of websites built with Angular are:
Youtube on PS3
You can find more examples on https://builtwith.angularjs.org/
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:
You can find more examples on http://backbonejs.org/#examples
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:
You can find more examples on http://emberjs.com/ember-users/