quora 中有关angular与emberjs的精彩辩论

原贴地址，要注册才能看，这里只有国人翻译的一部份内容

本文源自于Quora网站的一个问题，做者称最近一直在为一个新的Rails项目寻找一个JavaScript框架，经过筛选，最终纠结于Angular.js和Ember.js。

这个问题得到了大量的关注，并吸引到这两个框架的开发者参与回答。若是你也纠结JavaScript框架的选择，那么本文对你来讲也是一个很是好的参考资料。

　　Angular.js和Ember.js介绍

Angular.js是一款开源的JavaScript框架，由Google维护，其目标是加强基于Web应用，并带有MVC功能，使得开发和测试变得更加容易。

Angular.js读取包含附加自定义（标签属性）的HTML，听从这些自定义属性中的指令，并将页面中的输入输出与由JavaScript变量表示的模型绑定起来。这些JavaScript变量的值能够手工设置，或者从静态或动态JSON资源中获取。

项目地址：http://angularjs.org/

Ember.js一样是一个用于建立web应用的JavaScript MVC 框架，其采用基于字符串的Handlebars模板，支持双向绑定、观察者模式、计算属性（依赖其余属性动态变化）、自动更新模板、路由控制、状态机等。

Ember.js使用自身扩展的类来建立Ember.js对象、数组、字符串、函数，提供大量方法与属性用于操做。每个Ember.js应用都使用各自的命名空间，避免冲突。

项目地址：http://emberjs.com/

　　Angular.js开发者：Angular.js最能体现HTML的精髓

Angular.js其中一位开发者Misko Hevery回复了提问者的疑问，内容以下。

我是Angular团队中的一名开发者，我还不太了解Emeber.js，所以个人观点可能会有些偏颇。

有人说，Angular.js和Ember.js都在HTML中放入了太多的逻辑。固然，将逻辑放入HTML是一个很差的作法，咱们也不建议这么作。事实上，Angular.js只放置绑定，而不是逻辑，咱们建议把逻辑放入控制器中。但绑定一样是信息，这些信息能够放在一些地方，你有三种选择：

1. 代码。但这使得程序模块化很成问题，由于HTML与代码紧密耦合，要想从新组成一个应用程序很是困难。
2. HTML。这正是Angular.js所作的。咱们认为，除了放置链接信息外，你不该该在HTML中作任何事情。任何逻辑都不该该出如今这里，由于它会致使各类问题。我认为Angular.js作的绑定至关好。
3. 元数据文件：虽然我不知道是否有人这样作，但基本上这是一个双重问题，由于你将不得不在代码中链接HTML位置和模型位置。

固然，在构建一个应用程序时，你也能够不使用框架，但不能否认，使用框架将使得你的开发工做变得更容易。

我我的认为Angular.js的独特之处在于它拥抱HTML/CSS，遵循“HTML是什么”的精神。其余一些框架提供了它们本身的API，偏离了HTML。Angular.js在全部框架中是最能体现声明式的。我相信声明式很是适合用来构建用户界面，而JS很是适合用来编写逻辑。

Angular.js容许你扩展HTML，因此你在使用Angular.js过程当中遇到的任何问题均可以很容易地克服。你能够在Angular.js官网中http://angularjs.org找到一些可以展现其特性的例子。

　　Ember.js开发者：Ember.js是构建“雄心勃勃”的应用程序的不二选择

Ember.js的一位开发者Tom Dale对Angular.js和Ember.js进行了详细对比，具体内容以下。

做为Ember.js的做者之一，我常常会被问道：应该使用Angular.js仍是Ember.js？

我认为在作出选择以前，须要考虑：要构建什么样的应用？那么Ember.js是否是比Angular.js更好呢？

虽然二者在表面上有一些类似之处——它们都使用绑定，都比其余框架（好比Backbone.js）更有利于编写Web应用程序。

我首先来介绍一下Ember.js项目的由来。从2009年开始，我就一直在苹果公司参与SproutCore的开发，这是一个开源的相似于Cocoa的JavaScript框架，后来演变成了你如今所看到的iCloud。当时，个人周围是一些世界上最好的Cocoa开发者。

问题是，多少年来在客户端应用程序方面，彷佛并无真正新的突破。自80年代以来就一直遵循的基本模型——代码运行在本地计算机上，从网络上获取数据，而后在本地处理，并显示在屏幕上；而现在惟一改变的是——代码运行在浏览器的沙箱环境中，而后加载所需的“二进制”文件，而不是由用户安装到硬盘上的文件。

在考虑这些问题是，我会首先想到：在咱们以前，人们已经作了什么？我认为很难去争辩框架的成功，好比Cocoa，不管在Mac仍是iOS上，Cocoa均可以让开发者轻松编写受用户喜好的应用程序。

咱们但愿开发者可以建立雄心勃勃的、可以与本地应用竞争的Web应用程序。要作到这一点，开发者首先须要先进的工具和正确的概念，以帮助他们沟通和协做。

在开发Ember.js过程当中，咱们花了大量时间从其余一些本地应用程序框架（如Cocoa）中引入一些概念，但后来咱们感受到这些概念带来的困扰多于帮助，或它们并不适合用来构建Web应用程序。所以，咱们开始转向其余流行的开源项目，好比Ruby on Rails和Backbone.js，从它们中来找灵感。

所以，Ember.js最终成为了一个综合的、强大的、符合现代Web特性的、轻量级的工具。

在我看来，与Ember.js相比，Angular.js更像一个研究项目。好比，来看看它们的学习文档：Ember.js主要讨论模型、视图和控制器，而Angular.js指南要求你去学习一些相似于范围、指示符和transclusion方面的内容等。

我彻底支持一些研究型项目，并但愿它们可以变成最好的。可是，要记住，要在生产环境中看待应用程序。

一些大公司已经在Ember.js上投入了时间和精力，好比新版ZenDesk已经使用Ember.js重写（在他们对Backbone.js失望后，决定放弃它改用Ember.js），Square的整个Web层面也是基于Ember.js的（由于他们想要一个漂亮、响应式的UI），Groupon的移动版Web应用也是使用Ember.js开发的。此外，还有不少初创型公司经过Ember.js得到了成功，并开始对Ember.js社区进行贡献。

而我目前所看到使用Angular.js开发的大多数应用程序只是演示项目，或是Google的内部项目。

Yehuda（Ember.js开发者之一）和我也一直积极邀请真正的用户参与Ember.js框架的设计和维护，这能够确保咱们在Ember.js中添加的功能对于实际开发是有用的。

事实上，在过去的几个月中，大多数Ember.js开发工做都是由Ember.js社区的核心贡献组完成的，他们来自不一样的公司。若是Yehuda和我哪天有什么事情，或者咱们的公司倒闭了，Ember.js还将会持续发展。这是一个真正的社区项目，而不是“Google”项目。

回到技术细节。Angular.js官网上写道“Angular.js是HTML的将来，它被设计用于构建Web应用程序。”我认为当看他们的应用程序时，这种理念是显而易见的——用户界面由HTML标记定义，使用有语义意义的属性（好比data-ng-repeat）来装饰。

而Ember.js使用Handlebars来描述HTML，来展示你的应用程序界面。从美观角度，咱们能够谈谈你是更喜欢Handlebars语法（使用相似于{{#each}}的helper），仍是喜欢像Angular.js那样经过额外的属性来注释HTML。我我的认为，HTML属性方法有点杂乱，难以阅读。固然，你可使用其中任何一种方式。若是Ember.js不存在，而我又必须使用一个使用了数据属性的框架，那么我会考虑Angular.js。

抛开美观不谈，我相信，Ember.js使用基于字符串的模板的方式也为咱们带来了一些优点：

• 基于字符串的模板能够在服务器上预编译。这样能够减小启动时间，也意味着渲染一个模板能够像调用一个函数同样简单。
• Angular.js须要你在应用程序启动时遍历整个DOM，你的应用程序越大，启动速度越慢。
• 若是你想在服务器上渲染你的应用程序（用于Google爬虫索引或让首次加载时显示速度更快），Angular.js须要你去启动整个浏览器环境，像PhantomJS，这是资源密集型的。而Handlebars是100％的JavaScript字符串，全部你须要的只是像node.js或Rhino之类的东西。
• 若是你的应用程序变得愈来愈大，那么字符串模板能够很容易地被分割和懒加载。

此外，Handlebars只让你绑定属性，而Angular.js容许你嵌入实时更新的任意表达式。不少人最初将这个视为Ember.js的局限性，但实际上：

• Ember.js容许很是容易地使用JavaScript来建立可计算属性，它能够包含任意表达式。咱们只要求你指定你的依赖，这样在更新时能够智能些。
• Angular.js在每次有新的变化时，必须从新计算这些表达式，这意味着须要在你的应用程序中绑定更多的元素，速度会变慢。
• 由于Ember.js只容许你绑定属性，咱们将能够很容易地利用ECMAScript 6的性能优点，如Object.observes。因为Angular.js发明了本身的带有自定义解析器的JavaScript子集，这对于浏览器来讲，优化代码变得比较困难。

在通常状况下，Angular.js依靠一种叫作“脏检查（dirty checking）”的机制来肯定对象是否已进行更改。“脏检查”的方式是，在你扫描每一个对象和其全部绑定属性时，比较当前值和以前已知的值。若是它发生了变化，你就须要去更新其绑定。正如你能想到的那样，代码中对象越多，成本将越昂贵。

但Angular.js开发者很是聪明，他们很是仔细地进行了折中。他们的方案是：

• 使用“脏检查”，你不须要使用accessors。你能够用person.name = "Bill"来代替person.set('name', "Bill")，就像在Ember.js 或 Backbone.js中的同样。
• 为何在DOM中你会有这么多的对象？这最终将会成为一个瓶颈的。

Miško Hevery在StackOverflow上介绍了这种折中方式。他指出，使用“脏检查”，你没法一次有超过2000个绑定对象。

我认为这很好地说明了Ember.js 和 Angular.js理念上的区别。Ember.js 和 Angular.js都力求简单和易用。而Ember.js使你没必要担忧代码中是否有超过2000个绑定。若是你正在编写大型应用程序，那么你已经解决了你所担忧的最大的事情。对于中小规模的应用程序来讲，Angular.js一样是伟大的，由于这些应用程序不会触及Angular.js的限制区。

在Ember.js中，咱们老是但愿利用浏览器和语言中的新功能，以便使事情变得更容易。例如，一旦ES6中代理对象（proxies）可用，咱们不会再要求你使用get()和set()。

因此这就是为何我认为——若是你想构建雄心勃勃的应用程序，你应该选择Ember.js。

咱们从不拒绝从其余一些框架中吸收一些知识，由于这些框架已经知道如何最好地去构建大型应用程序。

咱们已经有了一个梦幻般的社区，有一群最聪明的Web开发人员，他们致力于解决现实中遇到的最难的一些问题。

此外，在开发过程当中，咱们对于性能方面和如何利用语言新特性方面也考虑了好久。Yehuda Katz和我一块儿开发Ember.js，他同时也是TC39（负责JavaScript下一个版本的制定）的成员，在此方面至关有经验。

咱们已经发布了1.0版API，所以你能够开始学习，而不用担忧有大的变化。

你能够经过这个视频来了解如何经过Ember.js从头开始构建一个应用程序：Building an App with Ember.js

下面是一些很是棒的学习资源：

• Ember.js指南
• Rey Bango的Ember.js入门教程
• Luke Melia 的介绍Ember.js幻灯片

若是你想构建一个雄心勃勃的应用程序，你必定要考虑Ember.js。

　　angularjs_scaffold开发者：Angular.js符合Web的将来

angularjs_scaffold的开发者Patrick Aljord也参与了讨论，内容以下。

我是angularjs_scaffold（基于Angular.js编写的针对scaffolding视图的Rails插件）的开发者，我来讲说为何我会选择Angular.js。

事实上，我本来打算在项目中使用Ember.js，由于我比较信赖Yehuda（Ember.js开发者之一）在Rails和jQuery方面的工做。可是Ember.js中随时会变化的API和匮乏的文档，使我一再推迟使用它。我偶然发现了Angular.js，就被它吸引了。

像Tom Dale（Ember.js开发者之一）所说，Ember.js受Cocoa 和Rails启发。但问题是，经过Ember.js，我并无真正感受到像在写一个Web应用程序，它就像一堆抛出的概念。而在Angular.js中，我感受像在写一个Web应用程序，它真正支持全部的Web概念，并以一种很是天然的方式来扩展HTML。

事实上，Angular.js并无使用本身的对象或重写JS方法，当你使用Angular.js时，你就使用了纯JS，而且Angular.js实现的许多概念都将直接进入下一个版本的Javascript中。

学习Angular.js，就意味着学习将来的Javascript，而学习Ember.js，你只是学习到了Ember的特定概念。

来看个例子。HTML是伟大的，由于它是声明式的，若是想要定义一个段落，你只需写以下代码：

<p>Hello world</p>

可是若是你想很是动态地实现？你须要经过相似于下面的代码来引导浏览器：

<p id="greeting1"></p>
 <script>
var isIE = document.attachEvent;
var addListener = isIE ? function(e, t, fn) {
    e.attachEvent('on' + t, fn);
}: function(e, t, fn) {
    e.addEventListener(t, fn, false);
};
addListener(document, 'load', function() {
    var greeting = document.getElementById('greeting1');
    if (isIE) {
        greeting.innerText = 'Hello World!';
    } else {
        greeting.textContent = 'Hello World!';
    }
});
 </script>

来看看Angular.js如何实现：

<p>{{hello}}</p>

它经过HTML声明来编写动态代码。再来看一个示例，若是你要遍历一个数组，只需： 

<ul>
  <li ng-repeat="element in array">element</li>
</ul>

这个语法看起来像新的MDV标准。这看起来比Ember.js更加简洁。另外，Angular.js被优化得很是快，开发团队经过以下措施来实现：

• 脏检查
• 只检查当前视图
• 只在变化发生时检查
• 经过和Chrome团队协做来利用JIT

在一些基准测试中，结果显示Angular.js的速度要快于Ember.js，具体可见Angular VS Knockout VS Ember。

Angular.js将来会拥有可重用的组件，这容许你编写很是简洁的代码，并轻松重用一些部件。这不是Angular.js特定的需求，而是Web的将来。

此外，Angular.js还拥有一个庞大的社区和大量的贡献者。

原帖中还有不少开发者也参与了讨论，详细内容：Is Angular.js or Ember.js the better choice for Javascript frameworks?