This article introduces you to the comparison of the three most popular JS frameworks for the web namely AngularJS, Ember.js and Backbone.js. Choosing the right framework for your project has an impact on your ability to deliver on time and to maintain the code in the future. Deciding which JavaScript UI framework will best meet the needs of your project and organization is a challenge. We are doing an in depth comparison of three frameworks. Here I would be covering the following topics which are relevant to these frameworks.

Introduction

History of Frameworks

Architectural Diagrams

Features

Size

Getting Started with Frameworks

Template Support

Data Binding

Router

Views

Introduction

AngularJS

AngularJS is a very powerful JavaScript library used in Single Page Applications (SPA’s) projects. It allows organizing large, client heavy applications into manageable ones. AngularJS is an open source web application framework.

AngularJS brings server side services, such as view dependant controllers to client side web applications by using dependency injection.

Ember.js

Ember.js is an open source client-side framework for creating rich JavaScript web applications. Ember is used for building long-lived application. It has convention that helps to write a better code which can automatically determine the route and the controller name while defining the router resource. It is also based on Model, Views and Controller (MVC) pattern to maintain front ends. It is designed for Single Page Application.

Ember.js eliminates the boilerplate (the section of code that has to be included in various places without any alteration) and provides standard application architecture. Ember.js has HTML and CSS at the core of the development model.

Backbone.js

Backbone.js is a basically light weight JavaScript library, which allows structuring and organizing for JavaScript code based on Model, View and Controller (MVC) pattern to maintain front ends. It works very well with any of the JavaScript libraries and used most in the web development community because it’s ease of use and provides structure to the JavaScript applications.

It is literally a backbone upon which you build your application and provides set of base classes to create clean JavaScript code with a RESTful JSON interface on your server. The single page web applications or client side applications can be developed using this library those that run in a web browser.

History of Frameworks

AngularJS

It was developed by Misko hevery and Adam Abrons and maintained by Google; used internally by them and MIT licensed. It is initially released in 2009 and current stable release is 1.3.3 (November 17, 2014) and is the oldest of the three frameworks.

Ember.js

It was initially called as SproutCore MVC framework, originally developed by Sproutlt and later by Apple. Later, it was developed by Yehuda Katz, a member of jQuery, Ruby on rails and SproutCore core teams and is released in 2011. The current stable release is 1.8.1 (November 04, 2014) and MIT licensed.

Backbone.js

It was created by Jeremy Ashkenas in 2010. It is based on the Underscore.js library which provides many functions to work with arrays, collections, objects, events and so on. It is initially released in October 13, 2010 and current stable release is 1.1.2 (February 20, 2014) and MIT licensed.

Architectural Diagrams

AngularJS

Figure 1. Architecture Diagram of AngularJS.

AngularJS contains modules which acts as container for the different types of application such as controllers, view, directives, factory etc. A module specifies how an application should be bootstrapped. Using a module, process will be easier to understand; you can reuse the code, end to end tests uses modules to override the configuration etc. It is place for creating, registering and retrieving angular modules. The config only accepts providers from modules, means every service, factory etc are instances of provider. Routes are used for linking URL’s to controllers and views.

Views are used to add sophisticated handling of user events. It uses ngView directive that complements route service by template of the current route to the main layout (index.html) file. The controller controls the data of AngularJS applications which are regular JavaScript objects. AngularJS defines ng-controller directive which creates a new controller object using controller function and new child available to controller function as $scope as shown in the showed diagram.

The views send element or attribute to the directives which tell AngularJS’s HTML compiler to attach specific behavior to the DOM element and its children. The factory is used to define AngularJS service and it called when service needs to be instantiated.

Ember.js

Figure 2. Architecture Diagram of Ember.js.

The above figure demonstrates the architecture of Ember.js which divides the application into model, view and controller (MVC) which helps the developers quickly understand how everything fits together. Ember starts with route and loads the model then renders the template by using view and adds the template to the DOM. The router sets a model on the controller and events are passed to the controller to update the model. The controller sets the state on template and view.

Let’s see the parts of Ember.js as follows:

Model : Model manages the data of the application. It responds to the request of view and also responds to the instruction from the controller.

: Model manages the data of the application. It responds to the request of view and also responds to the instruction from the controller. Router : Router is used to execute the actions and events which is an URL representation of application’s objects.

: Router is used to execute the actions and events which is an URL representation of application’s objects. Controller : Controller is an intermediary between the model and view or template. It is auto-generated by Ember.js.

: Controller is an intermediary between the model and view or template. It is auto-generated by Ember.js. View : View is associated with template, route and controller.

: View is associated with template, route and controller. Template: Template is the HTML mark-up which automatically gets updated when changes are done in model. It displays the model to the user.

Backbone.js

Figure 3. Architecture Diagram of Backbone.js.

The above diagram represents the architecture of Backbone.js. User requests a file such as a page, image etc from a web server using HTTP Request protocol. The Backbone routers are used for routing applications URL’s when using hash (#) tags. Router is required when web applications provide linkable, bookmarkable, and shareable URL’s for important locations in the app. It provides methods for routing client side pages and connecting them to actions and events.

The DOM (Document Object Model) is an application programming interface which defines the logical structure of documents and the way a document is accessed and manipulated. The DOM sends event to the view. The view objects are associated with a fragment of DOM and constitute the user interface in an application. They are designed to tie models that need to present to the user. Views can be change as the model changes.

The model moves the events to data source to get requested information of the user. The models are heart of JavaScript application which provides basic set of functionality for managing changes. It takes specific requested data from the database, synchronizes it, updates the model and DOM.

Features

AngularJS

It is client side technology which provides powerful things that embraces and extends HTML, CSS and JavaScript.

It has most useful feature, data binding which saves from writing boilerplate code by providing two way data binding to handle synchronization of data between model and view.

It uses template which is plain old HTML to show information from the model and controller.

It has one more feature called module which divides the application into reusable and functional components that can be integrated into other web applications.

It contains directives to create custom HTML tags and decorate HTML elements with new, custom behavior to manipulate HTML elements.

Ember.js

Ember.js is used for creating long lived JavaScript web applications.

It contains a feature called route which is a URL representation of application’s objects and serializes application’s current state.

It has models which respond to the view request and instruction from the controller and contains data associated with application.

Controllers act as intermediary between model and view or template and decorate the models with display logic.

Ember uses templates to build application’s HTML and gets updated when changes are done in the model.

Another feature called views which handles the user input events and binds the model events and methods, renders model and interacts with user.

Backbone.js

It is a JavaScript library uses MVC pattern to maintain front ends.

It uses only required functionality wherever necessary in the application.

It can be integrated easily with other frameworks, so it is called as minimalistic.

Backbone uses views which reflect how data model should look like.

Uses models to store data, validate data and provides access to different parts of the data in the application.

Backbone also contain router feature for routing applications URL’s when using hash (#) tags.

Size

It is important to understand what is the size of each these frameworks to download and what you are getting for that extra weight in the application. In many cases user wants to download the application as fast as possible. The size of the framework is important parameter which adds overall size of your application. There are two factors which should be considered when loading time of the application, one is framework size and another is time taken by the framework to bootstrap.

The size affects the performance but also gives an idea about how ambitious a framework is and how much time it takes to learn the technology as well as how many features does it support and how robust they are. The size of the framework is important especially when you are building mobile applications. JavaScript assets are usually minified and gzipped, so we will compare size of these frameworks depending on minified – gzipped versions.

AngularJS contains gzipped size of 36kb approx which does not have external dependencies.

contains gzipped size of 36kb approx which does not have external dependencies. Ember.js comes with gzipped size of 90kb and it also includes external dependencies jQuery plus Handlebars with size of 136.2kb. The more ambitious and rich framework is the more in size and also more difficult to integrate with others on the same page of an application. The less flexible framework will be less in size and requires developers to write lots of code.

comes with gzipped size of 90kb and it also includes external dependencies jQuery plus Handlebars with size of 136.2kb. The more ambitious and rich framework is the more in size and also more difficult to integrate with others on the same page of an application. The less flexible framework will be less in size and requires developers to write lots of code. Backbone.js has gzipped size of 6.5kb which includes external dependencies requires jQuery plus Underscore with size of 43.5kb and Zepto plus Underscore with size of 20.6kb.

Getting Started with Frameworks

AngularJS

It is easy to use. It provides features of two way data binding which makes custom tags, attributes which encapsulate built-in directives that make extending functionality of HTML easier. It is a flexible framework and versatile used for large app projects or small element.

It is distributed JavaScript file and can be added to a webpage by using following line:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

Ember.js

It is a two way data-binding which is based on Model, Views and Controller (MVC) pattern to maintain front ends. It requires some learning to get started with on the basic things. It is optional about how you name your objects and how you organize your files.

Ember allow4s writing better code and helps to facilitate the collaboration between different developers working on the same project. To start with ember.js, you should add the following lines in your application:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/handlebarsjs/1.3.0/handlebars.min.js"></script> <script src="http://builds.emberjs.com/release/ember.min.js"></script>

Backbone.js

It is collection of cohesive objects and its basics are easy to learn. It has fewer conventions such as it does not default to any template, does not have default project structure and no built in testing recipe. It is easier to implement on small portion of page and easier to get started with and allows for greater control over the method of implementation.

It supplies models with key value binding and custom events collections with API functions, views with event handling and connects it to your existing application over RESTful JSON interface. To get start with backbone.js, you need to add below lines in your code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

Template Support

A template is a project skeleton of a simple single page web application.

AngularJS

AngularJS does not include any angular specific file templates. It comes with set of live templates to create controllers etc by using template engine. It also does not support 3rd party template engine.

The AngularJS template engine is a simple HTML with binding expressions surrounded by double curly braces as shown in the below code:

<div ng-app=” “ data-ng-init=”names=[‘Sachin’,’Sehwag’,’Gambhir’,’Dhoni’]”> <p>Looping with ng-repeat</p> <ul> <li data-ng-repeat=”myname in names” title=”{{myname.description}}”> {{myname}} </li> </ul> </div>

Ember.js

Ember.js contains template is the HTML markup which gets updated automatically when changes are done in the model. It uses handlebars templating library which is like regular HTML which allow embedding expressions that change what is displayed. This template will automatically get compiled and display the message on the page when it gets loaded.

We can define handlebars template inside your HTML by putting it inside tag as follows:

<script type=”text/x-handlebars”> <ul> {{ #each names}} <li {{bind-attr title=description}} > {{ myname }} </li> {{/each}} </ul>

Backbone.js

It uses templates which create bunch of different reusable copies of markup that populates each component with different data. By default, Backbone.js uses Underscore.js template engine which includes its own micro-templating solution. Backbone has hard dependency on Underscore.js. Underscore is JavaScript library that provides functional programming support without extending built-in JavaScript objects.

You can get advantage of template engine of backbone.js without adding additional dependencies for the application, because already you will be having underscore.js on your page.

The below simple format shows the templating engine of Underscore.js

<ul> <% _.each(names, function( myname) { %> <li title=”<%- myname.description %>”> <%- myname %> </li> <% }); %> </ul>

Flexibility

These frameworks provide plug-ins and libraries to do specialized things and have ability to be easily modified.

AngularJS

It is flexible framework for developing dynamic web applications. It includes integrated toolset that helps to develop well structured, rich applications in modular format with less code and more flexibility. The main reason for AngularJS’s success is the flexibility in the building blocks the framework provides.

It extends HTML by providing functionality of directives that allows creating dynamic templates and also creating your own directives that fill your needs and abstracting away all the DOM manipulation logic.

Ember.js

It is a flexible framework that embraces the concept of fast web page. It speeds up the performance of your application without reloading the whole page. Ember.js gives flexibility to change UI interaction very easily. It allows scaling existing functionality and makes easy to add new one.

Backbone.js

It is smaller and well documented flexible library for building JavaScript applications that interact with web services. It is built on top of regular DOM events which make mechanism versatile and extensible. It gives you a lot of flexibility by providing models and collections to represent data entities with create, read, update and delete operations.

Data Binding

Data binding is a process that establishes connection between application user interface and business logic.

AngularJS

In AngularJS, data binding is fully supported which is the automatic synchronization of data between view and business logic of the application. It provides two types of data binding namely one-way data binding and two-way data binding.

One-Way Data Binding

Figure 4. Architecture Diagram of one way binding.

The one-way data binding binds the data in one direction and merge the template and model components into view. When merge occurs, changes to the model will not be reflected automatically in the view. So developer needs to write code separately for view with model and model with view

Two-Way Data Binding

Figure 5. Architecture Diagram of two way binding.

Compare to one way binding, it works differently. First template compiled on the browser which produces a view when model variable is bound to an element that can change and display the value of the variable. In simple words, when the model changes, the view reflects the change and vice versa. You can say that view is simply an instant projection of your model. Two way binding can be applied to those elements that allow the user to provide data value such as input, text area, select elements etc. Models uses JSON properties such as car.color=”red”; and provides option for creating custom bindings.

Ember.js

In Ember.js, data binding is fully supported which creates link between two properties when one property changes, the other property will get updated to the new value. Binding can connect same object across different objects and in bindings, ember.js can be used with any object not just between views and models.

A model uses getters and setters but binding is automatic and better than backbone. Two- way binding can be created as shown in the below simple code:

Company1=Ember.Object.create({ totalProfit: 100000 }); Company2=Ember.Object.create({ totalProfit: Ember.computed.alias(‘company1. totalProfit’) }); company2=Company2.create ({ company1=company1; }); company2.get(‘totalProfit’); //100000 company2.set(‘totalProfit’,120000); company1.get(‘totalProfit’); //120000

You can change bound property as many times without worrying synchronization bindings because ember waits until your application has finished running before synchronizing changes.

One-way binding can be done in one direction. One way binding useful when you want to defines specific behavior such as address of shop etc.

For instance:

name=Ember.Object.create ({ comany_name: “Techbuds” }); C_Name=Ember.View.extend ({ Comany_Name: Ember.computed.oneWay (‘name.comany_name’) }); c_name=C_Name.create ({ name: name; }); name.set(‘comany_name’, “Techbuds ”); // changing name of user object on the view. C_Name.set(‘Comany_Name’, “Techbuds IT Solutions”); // It will become “Techbuds” now name.get(‘comany_name’); //displays “Techbuds”

Backbone.js

In Backbone.js, data binding is not supported by default. There is plug-ins available to support data binding.

Epoxy.js is extensible data binding library for backbone.js which provides rich extensions of Backbone’s model and view components to hook view elements directly to data models. It includes some features such as automated dependency mapping, view updates, computed model and view attributes.

Router

Routers are used for routing your applications when using hash (#) tags. Router maps an URL to JavaScript function.

AngularJS

It supports concept routing which is quite similar to backbone.js. Angular after all is a framework used for creating single page applications. This technique usage in angular, is called routing. Routing is a process of loading sub templates depending upon the URL of the page.

In AngularJS, routing is taken care of by a service provider that Angular provides out of box called $routeProvider to handle routing. By using this, AngularJS will handle all of the technique required to get new file and inject it into your layout.

Following format shows specifying root URL in AngularJS:

var MyApp=angular.module(‘MyApp’, [‘ngRoute’]); MyApp.config(function($routeProvider){ $routeProvider .when(‘/’,{ templateUrl : ‘techbuds/home.html’, controller : ‘MyController’ }) .when(‘/careers’,{ templateUrl : ‘techbuds/careers.html’, controller : ‘CareerController’ }) .when(‘/contact’,{ templateUrl : ‘techbuds/contact.html’, controller : ‘ContactController’ }) ; });

Ember.js

In ember.js, router is used to execute the actions and events which is an URL representation of application’s objects. The URL can be changed manually by the user and specified URL is used by ember to understand what application state to be sent or present to the user. It is responsible for loading the data and displaying templates when it matches the current URL to the routes which you have defined. The router can link views based on its application state.

Below code shows the simple format of specifying a root URL in Ember.js:

App.Router.map(function() { this.route("home", { path: "/home" }); this.route("contact", { path: "/contact" }); });

Backbone.js

The backbone routers are used for routing applications URL’s when using hash (#) tags i.e. it is an URL representation of application’s objects. Router is required when web applications provide linkable, bookmarkable, and shareable URL’s for important locations in the app. It provides methods for routing client side pages and connecting them to actions and events. When router maps URL, it triggers the actions and events for the matched routes. It is still very useful in providing URL routing facility for an application. In URL routing, anything after hash (#) tag is interpreted by the router.

Following format shows specifying root URL in Backbone.js:

<script type="text/javascript"> var Router = Backbone.Router.extend({ routes: { 'route/:id' : 'MyRoute' }, }); var router = new Router(); Backbone.history.start (); </script>

Views

In general, views are used to define how stuffs are displayed in the screen.

AngularJS

AngularJS uses HTML and its own templating language to specify views. The views are specified declaratively as HTML. AngularJS defines ng-app directive which becomes placeholder for views. AngularJS uses ng-view directive as container to switch between views. When the route changes, the view changes according to the configuration of the $route service.

You can create ng-view in your application by using following format:

<div ng-app=”app”> <ng-view></ng-view> </div>

Ember.js

It has extensive view type support. Ember views are responsible for how and what to display from our application. Views are used to reflect “how your data model looks like”. It has own Dom element which knows about its model or collection. It handles the user input events and binds the model events and model methods and renders model or collection and interacts with user.

Views can be created for the reasons such as when you need to handle user events and to create reusable component and handlebars are used for templating.

Below code shows the format of how to define view in the program

var view = Ember.View.create({ template: Ember.Handlebars.compile(“enter your message here…”) });

Backbone.js

In backbone.js, views are simple and straight forward and it represents the logical chunk of UI in the DOM. Vview classes do not know anything about the HTML and CSS. Each view can be updated independently when the model changes without reloading the whole page. It’s easy for developer with jQuery and Dom skills. Views allow defining DOM events declaratively without having to worry about render function to the model into HTML using a template data.

We can create the backbone view by simply extending the existing View class of the backbone i.e. Backbone.View which creates initial element outside of the DOM, if existing element is not provided.

You can create view constructor of the backbone views as shown below:

var AppView = Backbone.View.extend({ hello: function(){ alert(‘Hello...This is example of view!!!'); } });

Conclusion

At this point in the tutorial, we have covered comparison between AngularJS, Ember.js and Backbone.js. Each framework has unique features and it would be unfair to say that one is better than the other. All the frameworks have similar goal to make the process of development faster. What we need to consider is, the requirement list of the project and the adaptability of the framework on those requirements. There are lots of factors we need to take care of before selecting the framework for our application. Deciding which JavaScript UI framework will best meet the needs of your application you want to build and your preferences as developer.

Links

Official AngularJS website https://angularjs.org/

Official Backbone.js website http://backbonejs.org/

Official Ember.js website http://emberjs.com/guides/