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?