AngularJS vs. Backbone.js vs. Ember.js

1. Introduction

In this article, we will compare three popular MV * frameworks for web development: AngularJS, Backbone and Ember. Choosing the right framework for a project will fundamentally affect your ability to perform tasks on time and maintain your code in the future. You need a reliable, proven framework, but you do not want it to limit you. The web is developing rapidly, and the old techniques are a thing of the past. Let us take the same detailed comparison.

2 Get to know the frameworks.

All the frameworks in question have common features: their code is open, released under the MIT license, and they solve the problem of creating a one-page application through the MV * design pattern. All have concepts of views, events, data models, and paths.
')
AngularJS was born in 2009 as part of a larger commercial product GetAngular. Shortly thereafter, Misco Heveri, one of the founding engineers of GetAngular, managed to recreate a web application with this product, consisting of 17 thousand lines of code and done in 6 months, in just 3 weeks, and at the same time keep within a thousand lines of code. Google was impressed with this fact and began to sponsor the open source project AngularJS. Its capabilities include two-way data binding, dependency injection, easy-to-test code, and HTML extension with directives.

Backbone.js is a lightweight MVC framework born in 2010. It gained popularity as an alternative to heavy frameworks like ExtJS.

Ember hails from 2007. It began as a SproutCore MVC framework, and first it was developed by SproutIt, then by Apple. In 2011, he was forked by Yehuda Katz, one of the main programmers in the jQuery and Ruby on Rails projects.

3 Communities

The community is one of the important factors for choosing a framework. More community - more answers to questions, third-party modules, tutorials on YouTube ... I made up a sign that is relevant for April 2014. Angular clearly wins - this is the 6th most popular project on GitHub and there are more questions on it on StackOverflow than in the sum of Ember and Backbone:



In addition to current indicators, you can use Google Trends to look at the rate of growth of frameworks:

4 Framework Sizes

Page load time is a crucial thing for a site’s success. Users do not have the patience , so you need to try to speed up the download as much as possible. This is influenced by two factors - the size of the framework and the time it takes to start.

We will compare the minified versions in the gzip archive. But it is not enough to compare the size of the frameworks themselves. For example, Backbone.js, despite its small size, also requires Underscore.js (5kb) and jQuery (32kb) or Zepto (9.1kb).

5 Templates

Angular and Ember include a template engine. And Backbone leaves it to the discretion of the developer. The best way to test patterns is to take a sample code. We take an example of formatting a list in HTML.

5.1 AngularJS

Angular templates have HTML with binding expressions. Expressions are surrounded by double curly braces:

<ul> <li ng-repeat="framework in frameworks" title="{{framework.description}}"> {{framework.name}} </li> </ul> 

5.2 Backbone.js

Although Backbone can be integrated with several template engines, Underscore is used by default. But processing templates with its help is rather primitive, and you have to add code to JS:

 <ul> <% _.each(frameworks, function(framework) { %> <li title="<%- framework.description %>"> <%- framework.name %> </li> <% }); %> </ul> 

5.3 Ember.js

Ember is currently using Handlebars - an extension of the popular Mustache engine. A new version of Handlebars is being developed by the name of HTMLBars. Handlebars do not understand DOM - it just works with strings. HTMLBars will understand the DOM.

 <ul> {{#each frameworks}} <li {{bind-attr title=description}}> {{name}} </li> {{/each}} </ul> 

6 AngularJS

6.1 Benefits

Angular has introduced many new concepts. Two-way data binding minimizes code. Take this example on jQuery:

 $('#greet-form input.user-name').on('value', function() { $('#greet-form div.user-name').text('Hello ' + this.val() + '!'); }); 

Due to the two-way binding, such code will not have to be written. You simply declare a bundle in the template:

 <input ng-model="user.name" type="text" /> , {{user.name}}! 

Promises play an important role in angular. JS is a single-threaded and eventual language, so many things happen in asynchronous mode. Asynchronous JS code quickly grows and turns into spaghetti from nested callbacks. It is often called the Pyramid Code or Hell with Callbacks.

Angular is not only the largest community, it is supported and advertised by Google. Open source allows everyone to participate in the development of the framework. Here are the documents on the design of Angular 2.0, and everyone can get acquainted and comment on them.

Angular breaks an application into blocks of several types: controllers, directives, factories, filters, services, and views. They, in turn, are broken into modules. All blocks have their own role. Views deal with UI, controllers deal with interface logic, services communicate with the backend, directives allow creating components and extending HTML.

“Angular is written for testability” - this quote from the unit test guide says a lot. Indeed, Angular strongly cares about splitting entities, isolating units, and provides powerful tools for working with embedded services like $ http and $ timeout.

6.2 Disadvantages

Angular is often criticized for the complexity of the API directives. The concept of transclusion is especially confusing for developers, and in addition there are such things as compilation of functions, pre- and post-referenced functions, different types of scope and directive settings.

The scope hierarchy uses prototype inheritance, which is difficult for people with Java and C # experience.

Angular Expressions are widely used in species. This language is quite powerful, sometimes even too much. It allows you to create complex logic and perform assignment operations and various calculations inside templates. Placing logic in patterns makes testing difficult. Consider the following example of a template overloaded with calculations:

 <button ng-click="(oldPassword && checkComplexity(newPassword) && oldPassword != newPassword) ? (changePassword(oldPassword, newPassword) && (oldPassword=(newPassword=''))) : (errorMessage=' ,   : ' + passwordRequirements)"></button> 

In many cases, it is easy to err in the name of a directive or function, and it is hard to find this error.

Digest Cycle, which provides the magic of “dirty checks,” also often surprises developers. It's easy to forget to call $ digest (), working in a context other than Angular. Care must be taken not to randomly make endless digest cycles. On pages with an abundance of interactive Angular begins to slow down. You should not use more than 2000 bundles on one page.

7 Backbone.js

7.1 Benefits

Backbone is lightweight and does not take much memory. The learning curve is linear, and it has very few concepts to understand (models / collections, types, paths). Excellent documentation, and the code is simple. You can even go through the whole code of the framework, which is well documented, and get acquainted with it within an hour.

On its basis, you can build your own frameworks. Examples of finished: Backbone UI, Chaplin, Geppetto, Marionette, LayoutManager, Thorax, Vertebrae. In the case of Angular and Ember, you have to live with what the developers have prepared for you. In Angular 2.0 they promise to fix it, but still need to live to see it.

7.2 Disadvantages

Backbone does not provide structure. This is just a set of simple tools for creating a structure, and you need to fill a lot of empty places. Of course, many of these places are filled with third-party plug-ins - but this means that you need to make a lot of decisions when choosing them. For example, nested models can be made using Backbone.DocumentModel, BackBone.NestedTypes, Backbone.Schema, Backbone-Nested, backbone-nestify, and so on. Choosing the best solution takes time - and the essence of the framework is to save your time.

There is no support for two-way data connectivity, that is, you have to write a lot of auxiliary code to update the view when the model changes, and to update the model when the view changes.

Views in Backbone directly manipulate the DOM, so they are difficult to test and more difficult to reuse.

8 Ember.js

8.1 Benefits

Ember.js works on the “agreement instead of settings” principle. Ember does not require writing auxiliary code; it can guess many things by itself, for example, automatic determination of the path name and controller when determining the resource. He even knows how to automatically create a controller for a resource if you do not define it.

It includes a good path handler and an optional data layer called ember data. Unlike the other two frameworks, Ember immediately has a data module that integrates well with the Ruby-on-Rails backend or any API with RESTful JSON.

When developing Ember, attention was paid to speed. Your application will most likely load and run faster.

8.2 Disadvantages

The API has been booming, so it contains outdated content and examples that no longer work. Take a look at the Ember Data Changelog, and you will understand what I mean. Many answers to questions on StackOverflow are already irrelevant.

Handlebars pollute the DOM with a lot of tags , HTML, CSS jQuery UI Sortable.

9
. Ember MVC , Ruby, Python, Java, C# -. .

Backbone . , , .

Angular HTML, -. Google, , , . , HTML, CSS jQuery UI Sortable.

9
. Ember MVC , Ruby, Python, Java, C# -. .

Backbone . , , .

Angular HTML, -. Google, , , .

, HTML, CSS jQuery UI Sortable.

9
. Ember MVC , Ruby, Python, Java, C# -. .

Backbone . , , .

Angular HTML, -. Google, , , .

, HTML, CSS jQuery UI Sortable.

9
. Ember MVC , Ruby, Python, Java, C# -. .

Backbone . , , .

Angular HTML, -. Google, , , .