Comparison between AngularJS, Backbone. js, and Ember. js, angularjsbackbone

Comparison between AngularJS, Backbone. js, and Ember. js, angularjsbackbone
1 Introduction

In this article, we are going to compare three popular Web "Model-View-*" frameworks: AngularJS, Backbone, and Ember. Choosing the right framework for your project will have a huge impact on your ability to deliver your project in a timely manner and your ability to maintain your own code in the future. You may want to build a project based on a reliable, stable, and mature framework, but do not want to be constrained. Rapid Web development-new technologies are emerging, and the old method cannot keep up with the trend. In this situation, we are ready to carefully and thoroughly compare these three frameworks.

2 Framework Overview

All the frameworks we mentioned today have many things in common: they are all open-source, comply with the MIT protocol, and all try to solve the problem of developing single-page applications through the MV * mode. They all have similar concepts: views, events, data models, and routes. Let's first briefly review the relevant historical and background knowledge, and then compare these three frameworks. Frontend UI sharing

AngularJS was born in 2009 and was called GetAngular as part of a large commercial product. Shortly afterwards, Misko Hevery, one of the creators of the GetAngular project, took only three weeks to use GetAngular to rewrite a page application with 17 K lines of code that had been completed in six months, and reduced the code to about 1,000 lines, so we successfully persuaded Google to start sponsoring the project and open-source it, that is, we can see AngularJS today. Angular features two-way data binding, dependency injection, easy-to-test encoding style, and simple HTML extension by using custom commands.

Backbone. js is a lightweight MVC framework. Born in 2010, it quickly became popular as a replacement of the bulky and full-featured MVC framework, such as ExtJS. Many services use it, such as Pinterest, Flixster, and AirBNB.

Ember is going back to 2007. It was first presented to the world with the SproutCore MVC framework, developed by SproutIt, then Apple, and then came to 2011, yehuda Katz, a core contributor to jQuery and Ruby on Rails, was involved. Famous Ember users include Yahoo !, Groupon, and ZenDesk.

3. Community

Community is one of the most important factors to consider when selecting a framework. The big community means more answers, more third-party modules, more YouTube tutorials... You understand. I made a statistical report. Angular was the absolute king by August 16, 2014. As the sixth star project on GitHub, there were more questions on StackOverflow than the question of Ember and Backbone. You can see:

AngularJS Backbone. js Ember. js

Likes on Github	27.2 k	18.8 k	11 k
Third-party module	800 ngmodules	236 backplugs	21 emberaddons
Number of questions about stack burst network	49.5 k	15.9 k	11.2 k
YouTube	~ 75 k	~ 16 k	~ 6 k
GitHub contributor	928	230	393
Chrome plug-in user	150 k	7 k	38.3 k

All these indicators only display the current status of each framework. It is also interesting to see which framework is growing at the fastest speed. You are blessed to follow the trend of Gu renxi.

4. Frame Size

Page loading time is the key to your website's success. Users do not have much patience when it comes to browsing speed-so in many cases, you should try your best to make your application run faster and better. There are two factors that affect the loading time of an application: the size of the framework and the start time of the framework.

Javascript resources are usually simplified and compressed, so let's compare the compressed version. However, the size of the Framework is definitely not enough. Backbone. js. Although it is the smallest (only 6.5kb), it must be Underscore. js (5kb), jQuery (32kb), or Zepto (9.1kb), and you may have some third-party plug-ins to add.

The net size of the Framework contains the dependent size.

AngularJS 1.2.22	39.5kb	39.5kb
Backbone. js 1.1.2	6.5kb	43.5kb (jQuery + Underscore) 6kb (Zepto + Underscore)
Ember. js 1.6.1	90kb	136.2kb (jQuery + Handlebars)

5 templates

Angular and Ember both have template engines. On the other hand, Backbone left you with this option. The best way to feel the similarities and differences between the template engine is to click the code above. Okay, let's start. Here is an example of converting a list into an HTML list.

5.1 AngularJS

Angular's template engine only uses binding expressions on HTML. The binding expression is only two-layer braces:

1

<ul>

2	<li ng-repeat="framework in frameworks"

3	title="{{framework.description}}">

4	{{framework.name}}

5

</li>

6

</ul>

5.2 Backbone. js

Backbone can be integrated with many third-party template engines. The default choice is Underscore template. Because Underscore is the dependency of Backbone, you have loaded it into the page. You can use its template engine without adding any additional dependencies. Unfortunately, the Underscore template engine is very basic and you usually have to mix javascript into it, for example, frontend UI sharing.

1

<ul>

2	<% _.each(frameworks, function(framework) { %>

3	<li title="<%- framework.description %>">

4	<%- framework.name %>

5

</li>

6

<% }); %>

7

</ul>

5.3 Ember. js

Ember currently uses the Handlebars template engine, a popular extension of the Mustache template engine. A new Handlebars variant, called HTMLBars, can be used now. Handlebars does not care about DOM-all it does is perform a simple string transformation. HTMLBars can process the DOM, and all variable conversions are context aware. Since HTMLBars is not popular, let's take a look at how to print the list using Handlebars:

1

<ul>

2	{{#each frameworks}}

3	<li {{bind-attr title=description}}>

4

{{name}}

5

</li>

6

{{/each}}

7

</ul>

6 AngularJS6.1 benefits

Angular has brought many innovative concepts for Web development. Bidirectional data binding saves a lot of sample code. For example, the following jQuery code snippet:

1	$('#greet-form input.user-name').on('value', function() {

2	$('#greet-form div.user-name').text('Hello ' + this.val() + '!');

3

});

 

Because of Angular two-way binding, you do not need to write your own code. You only need to declare the binding in the HTML template:

1	<input ng-model="user.name" type="text" />

2	Hello {{user.name}}!

 

Promises plays an important role in Angular. Javascript is a single-threaded language based on the event loop, which means that many operations (such as network communication) are performed asynchronously. Asynchronous Javascript Code will soon fall into a long nested Callback, that is, the notorious "Pyramid Code" or "Callback Hell ". Frontend UI sharing

Compared with the other two, Angular not only has a larger community, more online documents, but also the promotion and support behind Google. Therefore, the core team is still growing to produce more innovations and tools to improve development and production efficiency, such as Protractor, Batarang, ngmin, and Zone. js. In addition, the Development Team also collects requirements from users. For example, you can find all the design documents of Angular 2.0 from here. Anyone can give suggestions to the design documents directly.

Angular helps you divide application building blocks into the following types: Controller, Directive, Factory, Filter, and Service) and View (View) (Template ). They are organized as modules and can be referenced by another one. Each type has a different effect. View processing UI, the controller processes the logic behind the UI, the service is used to process communication with the background, and the commonly associated functional components are combined, and commands are defined by new elements, attributes and behaviors can easily construct reusable components and HTML extensions.

Automatic dirty Value Check means that you do not need to use getter and setter to access the data model-you can modify any attributes of a scope, and angular will automatically detect the changes, notifies all the observers for this attribute ).

"Angular was originally designed to write testable Code ." This sentence in the unit test Guide contains too many meanings-Angular really focuses on separation and unit isolation, providing ready-made and powerful mock for basic built-in services such as $ http and $ timeout.

6.2 pain points

Angular is often criticized for its complicated APIs. Transclusion is particularly prominent. This concept makes many developers confused, so that you can fully understand various concepts, such as compiling functions, linking, function pre-processing/post-processing (pre/post linking functions), various scope types (transclusion/isolate/child scope), and various configuration settings, which require considerable time to grasp.

The scope hierarchy in Angular uses Prototypal inheritance, which is a concept proposed by developers from object-oriented languages such as Java and C. A lack of understanding of scope causes many developers to suffer from development problems. Frontend UI sharing

Angular expressions are widely used in the view layer. The expression language is very powerful. Sometimes it is too powerful. This induces developers to use a variety of complex logic, and even execute value assignment operations and calculations in the template. Putting logical operations in the template makes it very difficult to test, because it becomes impossible to test independently. Let's take a look at the example below to demonstrate how to abuse the template language:

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>

 

In many cases, misspelling of command names or calling undefined scope methods are ignored and difficult to find, especially when you get the complex instruction API together with the scope inheritance mentioned above. I have seen a hard time scratching my ears and trying to figure out why a bound event in the scope was not triggered by the callback function. It turned out that it was named by camelCase, the name of the spelling attribute is not separated by a hyphen (hyphen-separated.

Finally, in Angular's loop system, you should pay attention to the "magic" Dirty value check, which often surprises developers. When running non-Angular context, it is easy to forget to call $ digest (). That is to say, you must be very careful not to trigger slow observer events or infinite loops. Normally, Angular becomes very slow for pages with a large number of interaction elements on one page. We recommend that you do not bind more than 2,000 activities on the same page.

7 Backbone. js7.1 benefits

Backbone is lightweight, fast, and occupies a small amount of memory. The learning curve is also very gentle. You only need a few simple concepts to master (model/set, view, and route ). It has great documentation, simple code, detailed comments, and a comments version of the source code to explain the details of the framework. In fact, you can read the source code of the entire framework and get familiar with it in less than an hour.

Because it is small and basic, you can build your own framework based on Backbone. Examples of Backbone-based third-party frameworks include Aura, Backbone UI, Chaplin, Geppetto, Marionette, LayoutManager, Thorax, and Vertebrae. Angular and Ember are usually used by the Framework author for your choice. Some may not be suitable for your engineering needs or personal style. Angular 2.0 promises to change this situation. By building smaller independent modules, you can select and combine them. However, we have not seen when it will be delivered. Frontend UI sharing

7.2 pain points

Backbone does not provide basic structures. It only provides some basic tools for you to create and decide how to construct an application. This is too many blank fields. For example, you need to be careful with memory management. Due to the lack of view lifecycle management, this will change the routing/status and easily lead to memory leakage, unless you can handle everything clearly.

It is true that a third-party plug-in can fill in the functions that Backbone does not provide. This means that you have many choices when creating an application, because a feature usually has many alternative plug-ins. For example, the embedded model can be provided by the following plug-ins: Backbone. DocumentModel, BackBone. NestedTypes, Backbone. Schema, Backbone-Nested, and backbone-nestify. This is a small part. Deciding which project is more suitable for you requires investigation, which requires time-and one of the main purposes of using the framework is to save your time.

Backbone lacks support for two-way data binding, which means that you must write a large number of templates to process view updates triggered after model updates. Let's take a look at the example above and think about how much sample code Angular. js's bidirectional data binding has cut.

Views in Backbone directly operate on the DOM, which makes it very difficult for them to perform unit tests, making them more vulnerable and reusable. A common example is to use the CSS selector to find DOM elements, change the CSS class name, add new elements with the same class name, or wrap the same DOM tree to another element, will disrupt your CSS selector and application rendering.

8 Ember. js8.1 benefits

Ember. js advocates better conventions than configurations. That is to say, without writing a lot of sample code, Ember will automatically export many configurations. For example, when defining a routing resource, it can automatically determine the route name and controller. Ember will even automatically generate one for your resources when you do not define the controller.

Ember contains an excellent route and an optional data layer called ember data. Unlike the other two frameworks, their data layer is very small (the collection/model of Backbone and the $ resource of Angular), and Ember has a very mature data module that is ready for use, you only need simple configuration to integrate Ruby-on-Rails in the background or other RESTful JSON APIs. It can also support mock API development and testing by setting fixtures.

Performance is the main goal of Ember. js design. Such as The Run Loop concept can ensure that data changes only result in a single DOM update, even if The same piece of data is updated multiple times, there is also a cache of computing attributes, the ability to pre-compile the HandleBars template at compile time or on the server end can help you ensure the load of the application and ensure that it runs fast enough. Frontend UI sharing

8.2 pain points

The APIs of Ember have changed significantly before the stable version is released. This leads to a large number of expired content and examples that cannot be run any more, which will be very confusing when new developers start to use this framework. Check the Ember Data change log and you will know what I mean. There are too many major changes here, which makes the answers and coding examples of many stack burst networks meaningless.

To keep the template and data model consistent, Handlebars uses too many <script> labels to pollute the DOM. This will become meaningless when migrating to HTMLBars, but by that time, all of your DOM trees will be <script> tags, which will hardly be able to identify what your code is. The worst part is that it will disrupt your CSS style or affect integration with other frameworks, such as the sorting of jQuery UI. Frontend UI sharing

9 Summary

We have seen the strengths and weaknesses of the three frameworks. Ember's comprehensive capabilities, including the MVC structure, are of great significance to programmers who once had MVC programming background knowledge in Ruby, Python, Java, C # or other object-oriented languages. Ember also delivers performance comparable to that of desktop applications, and saves you a lot of sample code because the conventions are better than the configurations.

Backbone advocates minimalism. It is small enough, fast enough, simple enough, but provides the minimum set you need to build an application (in many cases, or even smaller than the minimum set ).

Angular's innovative HTML extension method makes sense to web developers. It has a powerful community with Google's support behind it, and it continues to grow and develop. It is not only applicable to rapid prototyping, but also for large-scale production applications.

How can angularJS interact with PHP on the server?

This is quite tangled, especially in spring
The parameters submitted by the get method must be written as follows: params must contain
$ Http. get (url, {params: parameter obj to be passed). success (function (data) {...}); post is best written as form submission
$ Http. ({method: 'post', url: url, data: parameter to be passed, headers: {'content-type ': 'application/x-www-form-urlencoded '}}). success (function (data ){...}) you can try it.


Angularjs js changes model

If it is invisible in any situation other than timer or angularjs, you can use
$ Scope. $ apply (function (){
// Do someting

})