Comparison of AngularJS, Backbone.js and Ember.js

1 Introduction

We're going to compare three popular web-based "model-view-*" frameworks in this article: AngularJS, Backbone, and Ember. Choosing the right framework for your project can have a huge impact on your ability to deliver projects in a timely manner and the ability to maintain your own code in the future. You might want to build a project based on a reliable, stable, and mature framework, but you don't want to be constrained. The web is growing fast-new technologies are emerging, and the old ones quickly keep up with the trends. In such a situation, we are prepared to carefully and thoroughly compare these three frameworks.

2 Framework Overview

All the frameworks we mentioned today have a lot in common: they are open source, adhere to the MIT protocol, and try to solve the problem of developing single-page applications through the mv* model. They all have similar concepts: views, events, data models, and routes. Let's take a brief look at the history and background, and then start a deeper comparison of the three frameworks.

AngularJS was born in 2009 and was called Getangular as part of a large commercial product. Soon after, one of the Misko Hevery,getangular project creators took just three weeks to rewrite a page application with a 17K line of code that had taken 6 months to complete with getangular, and cut the code to about 1,000 rows, So successfully persuaded Google to start sponsoring the project and open it up, which is what we saw AngularJS today. Angular is characterised by its bidirectional data binding, dependency injection, easy-to-test coding style, and the simple extension of HTML by using custom directives.

Backbone.js is a lightweight MVC framework. Born in 2010, it was quickly popular as a substitute for a clunky, full-featured MVC framework, such as ExtJS. Many services use it, such as Pinterest, Flixster, AirBNB, and so on.

Ember goes back to the 2007, starting with the SproutCore MVC framework in front of the world, developed by Sproutit, then Apple, and then to 2011, when JQuery and Ruby's core contributors to Rails Yehu Da Katz took part in. The famous Ember users include Yahoo!, Groupon, and ZenDesk.

3 Community

The community is one of the most important factors to consider when choosing a framework. The greater community means more answers, more third-party modules, more YouTube tutorials ... You, get it. I made a statistic, as of August 16, 2014, Angular is the absolute king, as GitHub on the sixth-Star project, StackOverflow on the question than Ember and Backbone add up more, you see:

How many stars do you like on Github?	27.2k	18.8k	21H
Third-party modules	Ngmodules	236 Backplugs	Emberaddons
Number of questions on stack explosion nets	49.5k	15.9k	11.2k
Number of YouTube pieces	~75k	~16k	~6k
GitHub Contributors	928	230	393
Chrome Plugin User	150k	7k	38.3k
Indicators	AngularJS	Backbone.js	Ember.js

All of these indicators show only the current state of each frame. It's fun to see which frame is growing fastest, and you're blessed, with the Gushi trend Tracker, you can get the following answers:

Http://www.google.com/trends/explore?hl=en-US#q=ember.js,+angularjs,+backbone.js&cmpt=q

4 Frame size

Page loading time is the key to your site's success. Users don't have much patience when it comes to browsing speed-so in many cases you want to make your app as fast as possible. With the framework, two factors affect the load time of the app: the size of the frame and the time it starts.

Javascript resources are usually streamlined and compressed, so let's compare the compressed version. But it's certainly not enough to look at the size of the frame. Backbone.js, although the smallest (only 6.5kb), must be Underscore.js (5kb) and JQuery (32KB) or Zepto (9.1KB), and you may have some third-party plugins to add in.

AngularJS 1.2.22	39.5kb	39.5kb
Backbone.js 1.1.2	6.5kb	43.5KB (JQuery + underscore) 20.6KB (Zepto + underscore)
Ember.js 1.6.1	90kb	136.2KB (JQuery + handlebars)
Frame	Net size	contains the size after the dependency

5 templates

Both Angular and Ember have a template engine. Backbone, on the other hand, leaves this option to you. The best way to feel the similarities and differences between template engines is to point to the code, OK, let's get started. We will show an example of converting a list to an HTML list.

5.1 AngularJS

The Angular template engine simply uses a binding expression on HTML. The binding expression is just a two-tiered brace:

123456

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

5.2 Backbone.js

Backbone can be integrated with many third-party template engines, with the default selection being the underscore template. Because underscore is a Backbone dependency, you have loaded it into the page, and you can use its template engine without adding any additional dependencies. The bad is, underscore's template engine is very rudimentary, you usually have to mix JavaScript, for example:

1234567

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

5.3 Ember.js

Ember is currently using the handlebars template engine, a popular mustache template engine extension. A new handlebars variant, called Htmlbars, is now ready for use. Handlebars does not care about dom– what it does is simply to do a simple string transformation. While Htmlbars can handle the DOM, all variable conversions have context-aware. Since Htmlbars is not yet popular, let's take a look at how to print the list in handlebars way:

1234567

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

6 AngularJS 6.1 Benefits

Angular brings a number of innovative concepts to WEB development. Bidirectional data binding saves a lot of boilerplate code. For example, the following JQuery code snippet:

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

Because of Angular's two-way binding, you don't have to write your own code at all. Just declare the bindings inside the HTML template:

12	<inputng-model="user.name" type="text"/>Hello {{user.name}}!

Promises played an important role in the Angular. Javascript is a single thread, based on the language of the event loop, which means that many operations, such as network traffic, are performed asynchronously. The asynchronous Javascript code quickly falls into a long nested callback, known as the infamous "Pyramid code" or "Callback Hell".

Compared to the other two, Angular not only has a larger community, more online documentation, but also Google's behind the promotion and support. As a result, the core team is growing, producing more innovation, and improving productivity tools such as Protractor, Batarang, Ngmin and zone.js, grabbing a lot. In addition, the development team has asked the user for demand. For example, all the design documents for Angular 2.0 can be found here, and anyone can give advice directly to the design document.

Angular helps you divide the blocks of your application building into the following types: Controller, instruction (Directive), Factory (Factory), filter, service, and view (the template). They are organized in the form of modules and can then be referenced by another. Each type has a different effect. The view handles the UI, the controller handles the logic behind the UI, the service is used to handle the communication with the background, and it combines the common set of functional components, and the directives easily construct reusable components, as well as HTML extensions, by defining new elements, attributes, and behaviors.

Automatic dirty checking means that you do not need to use getter and setter to access the data model-you can modify any property of any scope (scope), and then angular will automatically detect the change, notifying all observers of the property (watcher).

"Angular's intention was to write testable code. "This sentence in the Unit Test guide contains too much meaning –angular really pays attention to separation, cell isolation, providing ready-made, powerful mocks for basic built-in services such as $http and $timeout.

6.2 Sore

Angular is often criticized for directing that complex API. Transclusion, in particular, is a concept that confused many developers and gives you a full range of concepts such as compiler functions (compiling function), linking, preprocessing/post-processing of functions (Pre/post linking functions), various scope types (Transclusion/isolate/child scope), as well as various configuration settings, require considerable time to master.

The scope hierarchy in Angular uses Prototypal inheritance, which is another concept to cater for developers who come from object-oriented languages like Java and C #. Not understanding scope causes many developers to be injured (say, this, and this).

Angular expressions are widely used in the view layer. The expression language is very powerful, sometimes powerful. This induces developers to use a variety of complex logic, and even perform assignment operations and calculations all in the template. Putting a logical operation in a template makes it very difficult to test because it becomes impossible to test independently. Take a look at the following example, demonstrating how to abuse this template language:

1	< button  ng-click = >click me </ button >

In many cases, the spelling of the instruction name, or the invocation of the undefined scope method, is ignored and is difficult to find, especially when you get the complex instruction API and the inheritance of the scope mentioned above. I've seen a lot of pain. Scratching to find out why a bound event in the scope was not triggered by a callback function, but was named after the Hump (CamelCase) and did not use a hyphen to separate (hyphen-separated) the name of the spelling attribute ( This, for example).

Finally, it is Angular's circulatory system, pay attention to the "magical" dirty value check, it often surprises developers. When running in a non--angular context, it is easy to forget to call $digest () (example). In other words, you have to be very careful not to trigger slow observer events or infinite loops (example: this, and this). In general, angular can become very slow for pages with a large number of interactive elements on a page. A good definition is to not put more than 2,000 active bindings on the same page.

7 Backbone.js 7.1 Benefits

Backbone light weight, fast, low memory footprint. The learning curve is also very gentle and requires only a few simple concepts (model/collection, view, routing). It has great documentation, simple code, detailed comments, and here's a annotated version of the source to explain the work of the framework. In fact, you can read through the framework of the source code, in less than one hours to familiarize it.

Because it's small and basic, you can build your own framework based on Backbone. Some examples of Backbone-based third-party frameworks are Aura, Backbone UI, Chaplin, Geppetto, Marionette, LayoutManager, Thorax, vertebrae. With Angular and Ember you will generally have to use the frame author to give you the choice, some may not be suitable for your engineering needs and personal style. Angular 2.0 promises to change this situation by building smaller standalone modules so that you can select and combine them. But we haven't seen when it's going to be delivered.

7.2 Sore

Backbone does not provide a basic structure. It simply provides some basic tools for you to create, so you can decide how to construct the application, and there is too much space to fill it out. For example, memory management needs to be handled with care. Because of the lack of view lifecycle management, this can make routing/state changes that can easily lead to memory leaks, unless you are able to handle everything clearly.

Admittedly, the functionality that backbone itself does not provide can be filled by third-party plug-ins, which means that there are a number of options when you create an application, because a feature usually has a number of alternative plugins. For example, the embedded model can be provided by the following plugins: Backbone.documentmodel, Backbone.nestedtypes, Backbone.schema, backbone-nested, Backbone-nestify, this is still a small part of it. Deciding which works better for you is a need to investigate, which takes time-and one of the main purposes of using the framework is to save your time.

Backbone lacks support for bidirectional data binding, meaning that you have to write a number of templates to handle the view updates that are triggered after the model update. Take a look at the examples given above to see how much boilerplate code is cut by Angular.js's bidirectional data binding.

The view in Backbone is the direct manipulation of the DOM, which makes it very difficult to do unit testing, it is more fragile and more difficult to reuse. A common example is using CSS selectors to find DOM elements, changing CSS class names, adding new elements with the same class name, or wrapping the same DOM tree to another element, which will disrupt your CSS selectors and the rendering of your app.

8 Ember.js 8.1 Benefits

The ember.js claims that the agreement is better than the configuration. That is, without having to write a lot of boilerplate code, Ember will automatically deduce many of the configuration itself, such as when defining a routing resource, you can automatically determine the name of the route and the controller. Ember will even automatically generate one for your resources when you don't define a controller.

The Ember contains an excellent route and an optional data layer called Ember. Unlike the other two frameworks, their data layers are very small (Backbone collections/models and Angular $resource), Ember has a very mature data module that can be used as a simple configuration, and the background of the Ruby-on-rails or other RESTful JSON APIs that are very well integrated. It can also be configured to support mock API development and testing by setting up fixtures.

Performance is the main goal of ember.js design. The concept of the Run Loop ensures that data changes only result in a single DOM update, even if the same block of data is updated more than once, as well as the caching of computed properties, and the ability to precompile handlebars templates at compile time or on the server. can help you keep your app's load and keep it running fast enough.

8.2 Sore

The Ember API changed too much before it came out of its stable version. This leads to a lot of outdated content and the inability to run again, which is confusing when developers start using the framework. Look at the Ember Data change log and you'll know what I mean. There are too many big changes here, which makes the answers and coding examples of many of the stack-up nets meaningless (for example).

Handlebars to keep the template and data model consistent, too many <script> tags are used to contaminate the DOM. This makes no sense when migrating to Htmlbars, but by then, your DOM tree is all <script> tags, and you'll almost never be able to identify what your code is. And the worst part – it upsets your CSS style, or affects integration with other frameworks, such as the sort of jQuery UI.

9 Summary

We have seen the strengths and weaknesses of the three frameworks. Ember's comprehensive capabilities, including the MVC structure, make sense for programmers who have had MVC programming background knowledge in Ruby, Python, Java, C #, or other object-oriented languages. Ember also offers performance comparable to desktop applications, and because of the fact that the Convention is better than the configuration, you can save a lot of boilerplate code.

Backbone advocating minimalism. It's small enough, fast enough, simple enough, but it provides the minimum set you need to build your app (in many cases, even less than the minimum set).

Angular's innovative approach to extending HTML is very meaningful for people who are web developers in their bones. It has a strong community, there is Google in the back to support it, it continues to precipitate and grow. It is not only suitable for rapid prototyping, but also for large-scale production applications.

Original address: Http://www.airpair.com/js/javascript-framework-comparison

Comparison of AngularJS, Backbone.js and Ember.js