Clash of the Titans: Angular VS Backbone VS Ember

1. [ Introduction ]

Nowadays a lot of different javascript frameworks have appeared. There’s even a joke that every day it’s a birthday of new framework. The choice of the most suitable for the project framework influences dramatically on your opportunity to perform tasks on time & to support your code in future. You need reliable, battle tested framework, but you don’t want to be bounded? So the question arises: which framework to choose? Let’s have a thorough look at 3 most popular frameworks of today. Please, meet AngularJS, BackboneJS and EmberJS.

2. [ History ]

All the above mentioned frameworks have common features: their code is open, released under MIT license & they solve tasks of single-page web application creation with the help of MV* designing template. All of them have the concept of scene, event, data models & pathnames.

AngularJS was born in 2009 as part of the great commercial product known as GetAngular. Soon after that, Miško Hevery, one of GetAngular founders, managed to re-create with the help of this product the web application, which was comprised of 17.000 code lines & made in 6 months. Google was impressed by such a fact & started to support the project with an open code. Among its features are: two-way data binding, interaction injection, simple code for testing & extension of HTML possibilities through directives.

Backbone.js is a lightweight MVC-Framework, created in 2010. It has become popular as a good alternative to heavyweight Frameworks such as ExtJS.

Ember is originally from 2007. Its history began as SproutCore MVC Framework: initially it was developed by SproutIt & then by Apple. In 2011 it was forked by Yehuda Katz, one of the main programmers of jQuery & Ruby on Rails projects.

3. [ Communities ]

Community is one of the most important factors when choosing the Framework. Bigger community – more answers on questions and tutorials in Youtube. As we see from the grid, Angular wins by far.

4. [ Framework size ]

Page load time is a crucial thing in website success. The users are behindhand in patience, so it’s necessary to speed up the load as much as possible. There’re two factors influenced on: framework size & time, required for its launch.

5. [ Templates ]

Angular & Ember include template engine. Backbone though leaves it to the developer’s discretion. The best way to test the templates is to take the code sample. We will take the sample of forming a list in HTML.

 5.1 AngularJS

AngularJS templates are represented by HTML with binded clauses. The clauses are hooped by double brace.

5.2 Backbone.js

Though Backbone.js can be integrated with several template engines, Underscore is used by default. The processing with its help templates are quite primitive & it is necessary to add code on JS.

5.3 Ember.js

Ember uses Handlebars, an extention of the popular Mustache engine. A new version of Handlebars is developing now, named HTMLBars. Handlebars doesn’t understand DOM – it just works with strings. In HTMLBars, DOM will be identified.

6. [ AngularJS ]

6.1 Advantages

Angular is considered to be quite powerful & more or less self-sufficient framework. It has a huge community and support from Google. GitHub contains a vast number of modules from external developers for all of life’s emergencies.

The main perks of AngularJS:

• modularization: you can write particular parts of application by uniting them in individual modules & reuse them in your projects.
• two-way data binding: the data once entered by the user appeared in your objects & vice versa.

• Angular Expressions: expressions which allow to manipulate data directly in your template. You can perform functions inside the element or attribute & output data.
• Templates support: you can break parts of the page into separate pieces, known as directives & bundle them when necessary. You can describe these pieces as individual HTML tags or attributes. Each template might be bound to a controller.
• On-board forms validation: Angular possesses good & extensible on-board form validation. Without writing a code line, you can report the user about empty fields or wrongly entered email.

• Single-page web application
• Filters: An AngularJS Tool that allow to exclude & modify the data on display phase.  It might be selection, a kind of data exclusion, pagination as well as limitation of the text length or its transfer to the upper case. Angular possesses the ready-made useful filters and also allows to create your own.
• Dependency injection: AngularJS possesses a kind of “include” feature. You can include in your module, controller, service, directive, etc. all the necessary modules, services, filters & even separate data through injector.
• Interceptor. For purposes of global error handling, authentication, or any kind of synchronous or asynchronous pre-processing of request or post processing of responses, it is desirable to be able to intercept requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests. The interceptors leverage the promise APIs to fulfill this need for both synchronous and asynchronous pre-processing.
• In-built Support of AJAX
• Unit tests Support

6.2 Disadvantages

• Two-way data binding is implemented through digest cycle, which runs through your data, monitor all changes & update the output data. It’s quite comfortable from one side: one needn’t to write any evaluator & care about how to output data. But from the other side when you have a lot of data, they will be checked even by a slightest change. If you add here any complex angular expressions with functions, you understand the problem scale – the performance starts suffering.
• Everything you do by using Angular, you should do inside Angular. If you use an exterior component on jQuery & try to change the data in view or in object which participates in data binding – nothing will happen. Because Angular doesn’t know that something has been changed until another digest cycle will pass on. In such a case, you should launch it manually.
• It seems to me, it’s so great when the data and their displaying work independently and you just operate objects and all output Angular takes upon itself. However, that’s life, when such an independence backfires. For example, when you add a new object to the collection displayed as a set of inputs and it’s necessary to focus the insertion point on the appeared input field. One have to get fancy trying to find field using jQuery or built-in feature – angular.element or even to write a separate directive to do that.
• one of the pain in the ass with which the developer faces is debugging. The thing is that exceptions are not thrown in angular expressions. And if you use a lot of complex expressions, it’s hard to understand where something goes wrong – it becomes a real pain in the ass. One should transform it into a function & then monitor where something goes wrong.

7. [ Backbone.js ]

7.1 Advantages

Backbone is light & doesn’t take much space in data store: it has great documentation, its code is simple. You even can dip into a framework code & become aware of it in an hour.

On its basis one can build the frameworks. Some samples of ready-made frameworks: Backbone UI, Chaplin, Geppetto, Marionette, LayoutManager, Thorax, Vertebrae.

In case of Angular & Ember, you have to get along with what have been prepared by the developers. They promise to fix it in Angular 2.0, but that day is still far distant.

7.2 Disadvantages

Backbone is unstructured. It is represented by a set of simple tools for creating structure and you should fill in a lot of empty spaces. Of course, many of these spaces are filled with external plugins, but it doesn’t mean that you should make a lot of decisions while choosing them.

There’s no support of two-way data binding, so you will have to write a lot of code-behind to upgrade the scene when modifying the model & to upgrade the model when modifying the scene.

The Scenes in Backbone manipulate DOM directly, that’s why it’s hard to test them & to reuse.

8. [ Ember.js ]

8.1 Advantages

Ember.js works under the principle of “naming conventions instead of configurations”.

Ember doesn’t require the code-behind, it might itself tumble to an idea, for example to automatic determination of pathname & controller when determining the source. It can even create automatically a controller for the source, if you don’t jump ahead of it.

It includes a good evaluator of path names & optional layer for work with data named ember data. Unlike any of the other frameworks, Ember at once has a module for work with data, which integrates with Ruby-on-Rails Backend & other API with RESTful JSON.

While developing Ember, a great attention was payed to the speed of response. Your application more likely will be downloaded & work faster.

8.2 Disadvantages

API was booming that’s why it contains obsolete content & examples, which now don’t work out. Take a look at Ember Data Changelog & you’ll understand what I mean. Lots of questions at StackOverflow are outdated.

Handlebars pollutes DOM with <script> tags which not only add complexity to HTML, but can also break CSS or integration with other frameworks like jQuery UI Sortable.

9. [ Summary ]

We’ve examined advantages & disadvantages of the frameworks. The holistic approach of Ember to MVC installation will be appreciated by those developers, who try it in Ruby, Python, Java, C# & other OOP languages. It also suits for creation of fast working applications & release us from redundant code.

Backbone stands for minimalism. It is fast & simple in teaching & provides a minimal set of the necessary tools.

Angular is an innovator in extending HTML possibilities. It has a huge community & support from Google, it will have a constant growth & development. It suits well for fast and simple way to create a mockup as well as for huge projects.