現在SPA用哪個比較好，Ember.js還是AngularJS？

01-09

如果選用AngularJS，可是Angular2神一樣地存在著，又不兼容。
大神門做SPA頁面用的是什麼技術？

半年前受命做了一個類似「淘寶賣家中心」的一個網站，這個網站涉及產品、訂單、物流、促銷、銀行卡信用卡、收入報告等等的複雜邏輯，未來要支持跨境電商，而且同時做 9 個國家的本地化，在 Test 和 Staging 伺服器上並行開發測試多項功能，目前 GIT 上只有一條分支 (master)。

在開發之前考慮過 Angular, Ember.js 和 React，最終選擇 Ember.js，主要考慮有幾點：

Ember.js 是一個為產品工程化做出很多考量的框架。

首先 Ember.js 提倡 Convention over Configuration，在開發的時候可以避免做一些不必要的決定來浪費時間，很多東西 Ember 系列 (Ember, Ember Data, Ember CLI) 會替你做出決定，而且從我們這半年的開發來看，大部分決定都是最佳實踐，後期其他產品（非 Ember 的應用）的開發也有受益於 Ember 的約定。對於這一點，我不能武斷地說這個是 Ember 的優點，因為團隊的風格不同、開發的產品不同，Convention over Configuration 或者用一個大而全的框架未必就是針對所有團隊的最佳選擇。根據我們產品的複雜度，以及我們這半年開發的結果，我們是受益於 Ember.js 的。

前面提到了 Ember 是個大而全的框架，它提供了從數據模型到模板渲染的一整套解決方案，我們使用 Ember Data 來處理我們的數據，使用 Ember CLI 來構建我們的工程結構。當時由於我們開發周期的問題，迫切需要一個涵蓋所有方面並且很成熟的解決方案，而不僅僅是一個框架。在這一點上 Angular 和 React 並不能滿足我們的全部需求。（目前 Angular 團隊已經開始製作 Angular CLI，也是 Fork 的 Ember CLI 的。順帶一提 Angular 2 的 Router 也是用的 Ember 的 Router）而且 Ember CLI 有一個還算不錯的生態系統，Ember Addons，對於社區為 Ember 開發的插件可以直接用 ember install 直接安裝，這些插件也不僅僅是為你的網站導入一個 JS 庫那樣簡單，他們涵蓋從開發、編譯的工作流程到運行時的各個方面：比如 ember-cli-sass 會自動幫你編譯你的 SASS/SCSS 樣式，liquid-fire 為你的項目添加聲明式的動畫系統，ember-feature-flag-solution 為你在編譯項目時去掉禁止掉的功能等等。想讓你的程序跑在桌面上，直接裝 ember-electron 就可以了，跑到手機上有 ember-cli-cordova，這些都是會自動幫你把開發、調試、部署打包的流程為你準備好的。業務邏輯、本地化、部署、並行開發等等都有對應的解決方案，這個我們相信只有 Ember.js 目前可以做到。

至於缺點，由於大而全，Ember + Ember Data 真的很大，gzip 之後好像都有 400 KB，另外對於先有得工程並不適合使用 Ember，這個時候可能 React 更適合一些。

在模板和框架的技術上，Ember.js 基本是業界最好的水平

先把缺點指出來，自 Ember 1.13 引用 Glimmer 引擎之後，模板的初始渲染時間比以前長了很多，不過這個問題正被逐步改進，而且 2016 年會有 Glimmer 2 引擎。說到 Glimmer，起核心思想和 React 的 Virtual DOM 差不多，只更新會產生變化的 DOM 來避免大量的 DOM 操作。React 是通過 diff 它內在 Virtual DOM 來更新，而 Glimmer 更近了一步，它是通過去 diff 模板上下文的變數，先判斷變數是否變化，再修改對應 DOM。理論上來看我覺得 Glimmer 的性能可能會更好，但現在的 Benchmark 中，初始渲染時間 Glimmer 1 是最慢的，增量渲染和 React 差不多（比 React 略慢，如果沒記錯的話）。但我還是相信 Glimmer 在模板技術上還是有很大潛力的。

至於框架，Ember.js 擁抱 ECMAScript 2015，Ember CLI 默認生成的項目就是使用 ECMAScript 2015 的，而且 Ember.js 在設計上也充分考慮了 ECMAScript 的發展，API 的設計也儘可能與未來的 ECMAScript 想貼近，一旦未來某些標準成為主流，開發者們不需要就改代碼就能享受到新標準帶來的好處。

哲（玄）學上，Ember 支持單向和雙向綁定

在前幾年，MVVM和雙向綁定十分流行，這些概念使前端開發不用再「面向 HTML 元素編程」從而有能力開發更複雜的業務邏輯。但隨著 Web 應用變得不斷龐大，以及雙向綁定對數據操作的不確定性，使得維護付出的成本不斷增加。所以 React 和 Redux 不斷流行起來。Ember 支持單向和雙向綁定，單項綁定提倡 Data Down, Actions Up 哲（玄）學，和 Redux 的 Unidirectional Data Flow 類似，使程序更加易懂以及可預測。同時支持兩種方式既保證了向後兼容性，也照顧了用戶的口味，你可以選擇你自己喜歡的方式。

更多信息：Ember 1.x 底層的數據是雙向綁定的，而 Ember 2.x 底層數據其實全部是單項綁定的，雙向綁定是通過單向綁定 + mut 方法來實現的。

從宗教方面來講

I"ve found React to be a sensible choice for a bank, an investment firm, and a rocket company sending things into space.

最糟糕的事情是框架的選擇已經成為了一種宗教，開發者們已經不再用常識來選擇框架。國內外經常會有「XX框架」已死的結論，前幾天還看到了標題 "Forget Angular Ember, React has already won the client-side war" 個人覺得，目前流行的框架都有各自的特色，根據自己的需求來作出合理選擇才是最好的。（我們團隊的其他產品使用了 React 和 Vue.js）

選擇 Ember 的公司

Apple, Sony Computer Entertainment, Microsoft, Yahoo, Twitch, LinkedIn, TED, Zendisk, Travis CI 等等等等。有興趣的可以查看 Ember.js - Users 和 Built With Ember

04/02/2016更新

知友在評論指出我用的是陳年數據：

那我們就看下目前ember和angular在Github上star的人數吧

Ember: 15,632 GitHub - emberjs/ember.js: Ember.js

Angular: 46,665 GitHub - angular/angular.js: HTML enhanced for web apps

再者就是看一下google trends的幾個關鍵詞的熱度

https://www.google.co.nz/trends/explore#q=Angular%2C%20Ember%2C%20Backbonecmpt=qtz=Etc%2FGMT-13

=====================================================================

首先選擇一個framework真的是依據你的project來定的，

但是可以通過一個假設的例子讓你來了解Ember和Angular。

假設你想搭建一個single page application 做前端，後端則用Node或者WebAPI/C#作為restfulAPI。數據主要通過JSON傳輸。

你可能會想要一個穩定，穩固，已被證實是一個好用的framework。

讓我們來做個對比：

首先我們都知道Ember和Angular都是開源項目，他們都在使用MV* Design Pattern。

同樣的，他們都有類似的 views, events, data models 和 routing。

背景方面，Angular是在2009年誕生的，其原名叫做GetAngular。其後Google開始贊助這個項目，也逐漸成為大家所知的Angular JS了。 Angular 比較獨特和創新的功能有：two-way data bindings(我喜歡Angular的原因之一)，dependency injection 和directives等。

Ember則起源早於Angular，在2007年一個叫做SproutCore MVC framework，由SproutIt開發之後蘋果也有加入。2011被Yehuda Katz （JQuery 和 Ruby on Rails的主要參與人）Fork 。Ember比較知名的使用者有： Yahoo!, Groupon, and ZenDesk。

說完背景不得不說下Community:

在Community方面，Angular可以說是力壓群雄，在StackOverflow上Backbone加上Ember連Angular的一半都沒有到。

活躍度方面：

在文件大小方面：

Angular 約為 40kb

Ember 則為90kb 同時你還需要額外136.2kb給作為required dependencies 的 jQuery 和 HandlebarsTemplate Engine發麵:

兩者都有用到template engine

Angular：

& &

{{framework.name}}

   &
&

Ember

& {{#each person in people}} &Hello, {{person.name}}!& {{/each}} &

總結：

由於Angular two-way data binding 的特性，使得angular 可以處理異常複雜的Directives API。

Ember是遵循 Convention over Configuration的，所以在處理routing的時候會輕鬆很多，同時如果你Back end使用的是Ruby on Rails，那麼我還是強烈建議你使用Ember的。Ember現在版本非常穩定，對於不想折騰的知友是個非常不錯的選擇。

總體來說Angular在很多方面完勝對手，目前大家糾結比較多的是Angular 2將不向下兼容。大多心裡基本都是：好不容易學了Angular 1.x，2出來完全不一樣的syntax和concept，又要重新學一遍，好累好麻煩。我想說既然你入了前端的坑，就要做好心理準備，前端的知識更新非常快，ES6馬上出來了，難道你就任性，就繼續用ES5？機會總是留給有準備的人的。

最後，通過以上的對比，這個假設的single page application，Angular將會是我的首選，強大的community絕對是王道。至於Angular 2.0 到現在都一直沒消息，估計最快年底才會出beta，個人認為到商用還需要很長的一段時間。

Reference:

https://www.airpair.com/js/javascript-framework-comparison

有完整的用過Anguarjs和Ember搭建管理員後台

在這兩個項目開發過程中，都有自己寫各類通用組件庫，對這兩個框架有較深刻的理解

綜合比較下來Ember要好一些，擁有一套完成開發、測試、數據mock、上線部署流程，上手之後很方便，只不過Ember的知名度沒有angularjs高，輪子比較少，很多都得自己寫。Ember的設計思路有很多都和React比較像，玩過React的上手都很快

對Angularjs已經無愛了，一不小心就踩坑，一踩就幾個小時爬不起來，數據臟檢查很討厭，這也是Angularjs坑多的主要原因之一，但是angularjs的有點是文檔健全，並且開源插件很多

angularjs ui–router

Meteor 算 single-page 嗎？它這 real-time 倒是很棒。

react， sencha touch 都行啊，

angular js 適合數據處理複雜的spa。

不得不推薦vue.js

說一點github的star數，個人認為這個數值在一定範圍內能夠比較準確的反應社區以及開發的活躍度和受眾的廣泛度，但是超過一定的閾值之後，準確度就有待商榷了。以Emberjs和Angularjs為例，star數的差異並不一定真實反映了兩套框架的差距。小人一點猜測，Angularjs（vuejs）大部分的star可能來自國內的程序員。國內有很多高級別的程序員，同時也擁有大量跟風的低水平程序員。Ember好還是Angular好，當然和你的項目有關，只有自己寫過才能體會兩者的差異。對於熟練的程序員（比如我，不好意思），嘗試體驗一下這些框架是很容易的事情，所以請先自己體驗，再做決定。

現在發表下個人的想法。

Emberjs成熟穩定，沒有提倡什麼玄乎的概念，just works。高效，它對實際項目可能涉及的方方面面都給予支持。做純後台，沒什麼理由不選它。

Reactjs專註於組件化，它好像沒有宣稱是一個框架。它基於某種哲學理念，比如單項消息流，在某種理念指導下的作品，如果你認同，就會覺得它完美。類似的有Elm，如果你欣賞它的氣質，你就會毫無抵抗地投入它的懷抱。

Vue寫WebApp很棒，項目已經在用，效率高、易調試～

單頁應用，你可以參考 fisp 。

http://fis.baidu.com 相當不錯