"JavaScript" front-end development Framework Three Musketeers-ANGULARJS VS. Backone.js VS. Ember.js

Source: Internet
Author: User

Tags: des http io os using Java ar strong for

absrtact: through the data collection of Github,stackoverflow,youtube and other communities, Angularjs is the most popular in the major mainstream communities, backbone.js and Ember.js are not comparable. This article will make a simple comparison of the current three popular web development frameworks.

The choice of a suitable framework for web development has a significant impact on the project. We all want to find a robust and maintainable frame structure. Next, let's come up with a simple comparison of the current three popular web development frameworks.

Preliminary understanding

Angularjs was born in 2009 and is part of the getangular of commercial products. Later, Miskohevry, one of Getangular's creators, streamlined it and then gained strong support from Google to develop into what it is today. The most unique and creative feature of Angular is the bidirectional (two-way) data binding and HTML expansion capabilities.

Invented in 2010, Backone.js is a lightweight MVC framework that advocates a streamlined team that favors it. PINTEREST,FLIXSTER,AIRBNB, etc. are all developed using the framework.

Ember's first footprint was printed in 2007. At first it was the MVC framework for Sproutcore and was later taken over by Sproutlt and Apple. Ember's heavyweight users include Yahoo,groupon and Zendesk.

In addition, the availability of a well-established community support network is also an important consideration. By collecting data from Github,stackoverflow,youtube and other communities, Angularjs is the most popular among the major mainstream communities, and backbone.js and ember.js are not alike.

Frame size

Page loading speed is an important factor in whether the site is popular or not. Users are becoming less patient now, especially when choosing between the same type of Web site, which might be more likely to become preconceived. Therefore, we must fully consider this demand, as far as possible for our page to speed up the weight. Here are two considerations: the size of the frame and the speed of the boot loading process.

The following table lists the net sizes of each of the three frameworks and the size after the binding dependencies (compressed):


Angular and ember already contain their own template engines, and backbone need to be chosen by the user themselves. The following is a comparison of HTML code examples.


The angular template engine is an HTML format that uses an expression binding that uses two-pair braces:


Backbone can be integrated with many other third-party template engines, and the default choice is underscore. If you have already adopted underscore, one of the backbone dependent Undersocre does not require additional action, we can use its template engine. The drawback is that the engine is relatively simple, and we usually need to add other JavaScript code to implement other functions, such as the following example:


Ember currently employs a template engine that belongs to the Mustache template engine extension handlebars. A new handlebars variant named Htmlbars is currently appearing. Added support for DOM with respect to Handlebars,htmlbars, but Htmlbars has not yet been formally launched. The following examples are based on handlebars:

AngularJS 's Strengths

Two-way data binding saves a lot of formulaic code, first look at the following jquery code:

And if you use angular, we can dispense with this code and simply bind the declaration in an HTML template:

Angular not only has the largest online community support, but Google has been promoting it. Many innovative tools are constantly emerging, greatly improving the efficiency, such as: Protractor,batarang,zone.js and so on. In addition, angular has worked extensively with the community to continuously improve. The design documentation for Angular 2.0 can be viewed here and anyone can comment directly on it.

Angular can help us methodically classify program-generated chunks: controllers, directives, assemblers, filters, services, and Views (templates). These are organized in a modular way, forming a dependency on each other. Different chunks have different roles, the view is responsible for the UI, the controller is responsible for the logical management behind the UI, the instruction is responsible for component reuse and HTML extension.

The automated dirty data check (Dirty Checking) mechanism allows us to make arbitrary object property modifications, angular automatically recognize the changes, and then notifies all observers associated with the attribute.

Angular also offers a lot of ready-to-use, powerful basic built-in services, such as $http and $timeout.

AngularJS weaknesses of

The concept of embedding inclusion and prototype inheritance is confusing to many developers, and it takes us a while to understand what it means. The angular expression, which can be widely used at the view level, is not powerful or even too powerful. Developers can use complex logic in a view template or even delegate and calculate operations, which adds to the difficulty of testing. For example, the following code:

[JS]View Plaincopy
    1. <button ng-click="(OldPassword && checkcomplexity (newpassword) && OldPassword! = newpassword)? (ChangePassword (OldPassword, NewPassword) && (oldpassword= (newpassword= ')): (errormessage= ' please input a New password matching the following requirements: ' + passwordrequirements ' >click me</button>

Backbone.js 's Strengths

Backbone is a lightweight product that is easy to get started, has few new concepts, and has a wealth of documentation resources and code sample resources. Third-party frameworks based on backbone are aura,backboneui,chaplin,geppetto,marionette and so on.

Backbone.js weaknesses of

Backbone has not yet provided support for the program architecture, and instead provides some basic tools for building our own architecture, such as memory management, which needs to be pro-Pro. The lack of view lifecycle management makes it easier for programs to have memory leaks when paths/states change, unless we can get rid of all the objects that should be cleaned up.

Many features that are not available from backbone are provided by the third plugin. In this way, we may need to spend some time testing to determine which plug-in is right for you, thus adding additional development times.

Backbone does not provide two-way data binding, we have to write our own code to do the related processing. The view in backbone is the direct manipulation of the DOM, which increases the difficulty of unit testing and also has a certain effect on program robustness and reusability.

Ember.js 's Strengths

Ember has a good configuration management ability, can save a lot of manual code. For example, Ember.js will determine the name of the corresponding route and controller by the name of the router. The Ember has a superior routing layer, data layer, and the name is Ember data. It encapsulates a complete data module that is well integrated with ruby-on-rails or other restful JSON APIs.

Performance indicators are the focus of ember.js design, such as event processing loops and program precompilation, Ember have done a lot of work.

Ember.js weaknesses of

The Ember API has been going on for some time before it finally forms a more stable version. Therefore, the beginning of contact with Ember developers may be some old documents and examples are moved to confuse, specifically can see its update log, please click here.

The use of handlebars makes the DOM full of <script> tags, sometimes it's hard to tell which code is your own, and the integration of CSS styles and other frameworks has a certain impact.

Written in the last

Angular has many unique approaches to HTML extensions and has a strong support resource. The backbone is small and the entry threshold is relatively low. Based on the MVC structure, Ember is very kind to the developers who have the object-oriented programming foundation, and has strong configuration management capability. Each of the three features each has a length, we might as well compare learning, find the right cup of tea.

English: airpair.com


"JavaScript" front-end development Framework Three Musketeers-ANGULARJS VS. Backone.js VS. Ember.js

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: