前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js

秒速五厘米 2022-08-11 16:41 116阅读 0赞

## 1 Introduction ##

In this article we are going to compare three popular MV\* frameworks for the web: AngularJS vs. Backbone vs. Ember. Choosing the right framework for your project can have a huge impact on your ability to deliver on time, and your ability to maintain your code in the future. You probably want a solid, stable and proven framework to build upon, but don’t want to be limited by your choice. The web is evolving fast — new technologies arise, and old methodologies quickly become irrelevant. Under this light, we are going to go through an in-depth comparison of the three frameworks.

## 2 Meet The Frameworks ##

All the frameworks we are going to meet today have a lot in common: they are open-sourced, released under the permissive MIT license, and try to solve the problem of creating Single Page Web Applications using the MV\* design pattern. They all have the concept of views, events, data models and routing. We are going to start with some quick background and history, and then dive in to compare the three frameworks.

AngularJS was born in 2009 as a part of a larger commercial product, called GetAngular. Shortly after, Misko Hevery, one of the engineers who founded GetAngular, managed to recreate a web application that consisted of 17 thousand lines of code and took 6 months to develop in a mere 3 weeks using just GetAngular. Reducing the size of the application to just about 1,000 lines of code convinced Google to start sponsoring the project, turning it into the open-source AngularJS we know today. Amongst Angular’s unique and innovative features are two-way data bindings, dependency injection, easy-to-test code and extending the HTML dialect by using directives.

Backbone.js is a lightweight MVC framework. Born in 2010, it quickly grew popular as a lean alternative to heavy, full-featured MVC frameworks such as ExtJS. This resulted in many services adopting it, including Pinterest, Flixster, AirBNB and others.

Ember’s roots go way back to 2007. Starting its life as the SproutCore MVC framework, originally developed by SproutIt and later by Apple, it was forked in 2011 by Yehuda Katz, a core contributor to the popular jQuery and Ruby on Rails projects. Notable Ember users include Yahoo!, Groupon, and ZenDesk.

## 3 Community ##

Community is one of the most important factors to consider when choosing a framework. A large community means more questions answered, more third-party modules, more YouTube tutorials…you get the point. I have put together a table with the numbers, as of August 16, 2014. Angular is definitely the winner here, being the 6th most-starred project on GitHub and having more questions on StackOverflow than Ember and Backbone combined, as you can see below:

<table style="border-collapse:collapse; border-spacing:0px; empty-cells:show; border:1px solid rgb(203,203,203); margin-bottom:1.563rem"> 
 <thead style="vertical-align:bottom; background:rgb(245,242,240)"> 
  <tr style=""> 
   <th style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em"> Metric</th> 
   <th style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em"> AngularJS</th> 
   <th style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em"> Backbone.js</th> 
   <th style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em"> Ember.js</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> Stars on Github</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 27.2k</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 18.8k</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 11k</td> 
  </tr> 
  <tr style=""> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> Third-Party Modules</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 800&nbsp;<a href="https://ngmodules.org/" style="" rel="nofollow">ngmodules</a></td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 236&nbsp;<a href="http://backplug.io/" style="" rel="nofollow">backplugs</a></td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 21&nbsp;<a href="http://emberaddons.com/" style="" rel="nofollow">emberaddons</a></td> 
  </tr> 
  <tr style=""> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> StackOverflow Questions</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 49.5k</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 15.9k</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 11.2k</td> 
  </tr> 
  <tr style=""> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> YouTube Results</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> ~75k</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> ~16k</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> ~6k</td> 
  </tr> 
  <tr style=""> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> GitHub Contributors</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 928</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 230</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 1px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 393</td> 
  </tr> 
  <tr style=""> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> Chrome Extension Users</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 150k</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 7k</td> 
   <td style="border-left-style:solid; border-left-color:rgb(203,203,203); border-width:0px 0px 0px 1px; font-size:undefined; margin:0px; overflow:visible; padding:0.5em 1em; border-bottom-style:solid; border-bottom-color:rgb(203,203,203); background-color:transparent"> 38.3k</td> 
  </tr> 
 </tbody> 
</table>

All those metrics, however, merely show the current state of each framework. It is also interesting to see which framework has a faster-growing popularity. Fortunately, using Google Trends we can get an answer for that too:

scrolling="no" width="730" height="330" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=ember.js,+angularjs,+backbone.js&cmpt=q&content=1&cid=TIMESERIES\_GRAPH\_0&export=5&w=730&h=330" style="box-sizing: border-box; max-width: 100%; border-style: none;">

## 4 Framework Size ##

Page load times are crucial for the success of your web site. Users [do not exhibit much patience][] when it comes to the speed of browsing — so in many cases it is desired to do everything possible to make your application load as fast as possible. There are two factors to look at when considering the impact of the framework on the loading time of your application: framework size and the time it takes the framework to bootstrap.

Javascript assets are usually served minified and gzipped, so we are going to compare the size of the minified-gzipped versions. However, merely looking at the framework is not enough. Backbone.js, despite being the smallest (only 6.5kb), requires both Underscore.js (5kb) and jQuery (32kb) or Zepto (9.1kb), and you will probably need to add some third party plug-ins to the mix.

## 5 Templating ##

Angular and Ember include a template engine. Backbone, on the other hand, leaves it up to you to use the template engine of your choice. The best way to get a feeling of the different templating engines is a code sample, so let’s dive in. We will show an example of formatting a list of items as HTML.

### 5.1 AngularJS ###

Angular’s Templating engine is simply HTML with binding expressions baked-in. Binding expressions are surrounded by double curly braces:

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