比較Backbone.js, Angular.js, Ember.js, Knockout.js 心得

現在client-side javascript MV*(MVVM, MVC等) framework實做產量豐富，Backbone.js, Spine.js, Angular.js, Ember,js, Knockout.js, Batman.js, Javascript MVC, SproutCore.js, Cappuccino.js 好像每個高手都要發明一套才行，不過其實各框架的目的不盡相同，其中我比較感興趣的是 Backbone.js和 Knockout.js 還有強大的 Angular.js和 Ember.js，你們在玩的時候能夠比較一下他們的todo list是怎麼作的，todo list範例已經是新框架誕生時要遵照的"行規"了。

Backbone.js

Backbone.js你們絕對都聽過，有廣大的社羣支持者，文件和教學很完整，使用他第一次讓我能夠把javascript event整理成清楚好維護的方式。雖然我比較常獨立栽種程式碼，可是我相信一個網頁前端團隊合做用Backbone.js會是很輕鬆的，module的切割加上他幾乎沒有改變html原有的寫做方式，不會嚇跑負責html和css的夥伴或任何人，能夠有乾淨的工做區分。

Backbone.js在功能上能夠說是提供了比較...基礎的功能協助，其實能夠說什麼都沒作吧...，相較於在使用其餘框架時，會面臨須要思考如何把強大的功能"降級"，這很痛苦，Backbone.js讓我能夠build from scratch，這每每更容易完成我想要的功能也更容易除錯，也很容易改造一些原始運做，可是我有時候發現程式碼變得很是龐大，並且事必躬親，事情彷佛被複雜化了，我常想這是必要的代價嗎? 使用到後來發現我愛的其實是Underscore.js吧，Underscore.js程式碼的品質很好。

其餘Backbone.js相對比較好的地方像是collection的概念，還有整個框架檔案很小，缺點(特點)就是沒有data-binding，有人試圖幫他作了一個，最後效能太差收掉了。

補充一下基於Backbone.js的兩個成熟框架， Marionettejs和 Chaplin。由於Backbone幾乎只滿足了前端框架的最基本需求，這兩個框架則解決實際的使用上的問題，像是清除event-listener(lifecycle)，還有更好的應用架構支援和Controller，而不是隻有單純的Router獨挑大樑，以及有更完整的View繼承和預設render方式，和整合AMD支援等等。

Angular.js

Angular.js和Ember.js讓我第一次發現原來View和Model能夠作binding，並且是透過很是簡單的方式，簡直美好，雖然Knockout.js也有data binding，可是就是沒有Angular.js用起來直覺。

Angular.js提供的template樣版也是在我用過的javascript MV*當中最喜歡的，用起來有點像是Jinja2的感覺。

Angular.js還提供簡單的方式讓你本身作directive，能夠想像在UI當中加入一個小東西就能完成經常使用的功能。

Angular.js的routing也很是簡單易懂，可是太過簡單以致於只能用做者但願的方式來用，加上他自己用singleton模式，只能有一個app instance，讓我無法在一個route中同時做出複雜的動做，或是更新多個View，目前無法符合個人需求（更新：後來我透過directives完成了，directives是一個能夠讓你作出類似網頁widget的強大功能），不過做者說不適合在1.0時釋出太複雜的東西，因此我們就持續關注吧。

使人驚訝的是，Angular.js自帶一組強大的end to end testing工具，並且很是的簡單好懂。

另外Angular.js和Ember,js, Knockout.js同樣潛在的缺點(特點)是，有些人可能不但願程式的邏輯跑進html中，可是我認為簡單繁瑣的邏輯應該允許放在最合適的地方，進一步瞭解能夠看一下 Angular.js做者在Quora上的見解，這點就見仁見智。

整體而言我對Angular.js的未來很是看好，現在在Google的CDN上也能夠取得了，可見Google對他的重視，預計九月初會釋出1.2版。

Ember.js

一樣是後起之秀， Ember.js是從SproutCore.js出來又從Amber.js改頭換面成了Ember.js。這是和我初始想法最接近的Javascript client-side framework，寫起來頗有感覺，有時候寫程式真的不須要選什麼你們都在用還是評價最高的東西，選一個和本身頭腦思考方式最接近的就是最好的，這點也是因人而異的。

Ember.js的Model是我最喜歡的方式，Backbone.js相對顯得囉嗦和貧乏，Model中的computed property能夠選擇連動的屬性，one-way or two-way binding能夠自由搭配，他使用的Handlebars.js template比Underscore.js和Mustache.js提供的都要更好用，我建議Backbone.js使用者也能夠看看Handlebars.js，他在功能和簡單兩邊取得了平衡，算是很是不錯的javascript template引擎。

雖然我舉雙手贊成以後template盡量都移到client-side來作，可是我必須說，現在全部的client-side template功能和server-side經年累月琢磨出來的template都還比不上，其實Model和Controller也是，還有不少能夠加強的功能，因為還要考慮client裝置的能力和網路環境的限制，不能像server端的東西包山包海。至少現在Angular.js和Ember.js看起來是站在巨人的肩膀上。Ember.js在attribute binding功能上更勝一籌，Angular.js目前的1.0版則較為簡單易用。

Ember.js還有一個很是特別的地方是Finite State Machine Routing，他本來一直沒有提供routing功能，後來才透過他的State實作了routing，目前官網還沒有很好的文件。和其餘框架都不一樣的是，他的routing是能夠和location脫鉤的finite state machine，可是若是你但願，他也能夠在改變state時自動幫你更新location，很是強大，我只能說Ember.js野心太大，但願不要搞砸，能夠看一下本來幫Ember.js寫RouteManager外掛的做者的這篇來瞭解中間的不一樣，State Machine的設計概念我是支持的，軟體流程能夠作的比較清楚，可是目前整體routing語法太冗長、贅字太多這點有待改進，View裡面的outlet的侷限性也是我用起來覺得不順手的地方，算是個缺點吧。

另外Ember.js最大的缺點就是文件不齊全或沒跟上最新版，學習時間比其餘框架要長一點。

Knockout.js

Knockout.js 好久之前就被facebook推薦作為mobile web前端的框架，我覺得Knockout.js算是比較成熟的MVVM框架，他不試著包山包海，他迷人之處就是他專心作好data-binding，然後在這之上搞好template，因為他很專一和成熟因此他有不少細心的地方，像是你能夠在data-binding的過程中很容易的界接jquery的aniamtion，不少其餘框架就只是幫你即時作binding而，還有如何從jquery中調用Knockout.js的value和context， Knockout.js 給使用者很大的自由，甚至他還想到怎樣作能夠更方便的把UI上資料同步遠在server的資料庫(for Rails)，另外在template上也有許多巧思能夠體會到他設想周到。

Knockout.js的缺點就是我不喜歡他的語法，雖然本身進去改一些東西可能也能解決，但這會讓我覺得我和做者的靈魂不夠接近，這是很嚴重的問題，並且他太成熟了，不是一個追逐最新潮流的碼農能夠拿出來炫耀的工具，這也是很嚴重的問題，哈。

由於Knockout.js 沒有routing功能(有routing功能的框架一般官網也會直接展現)，我們可使用Crossroads.js, Director.js或是Sammy.js，三個都很不錯，Director.js是Server和Client兼具， Sammy.js是我一直在關注的工具，他一樣專注在一件事情上，我很喜歡他的語法，用起來有jquery和server-side routing結合的感覺，不像不少框架在語法上都喜歡自成一格，模仿jQuery語法相當明智，並且現在也有html5 history support了，能夠和Knockout.js結合的很好。

另外還有個有趣的東西叫作 Knockback.js，他是Backbone.js和Knockout.js產下的混血兒， Knockback.js 把Backbone.js的ORM, routing, serialization和Knockout.js的MVVM data-binding各取所長的結合在一塊兒，我是不敢用基因改良的東西啦，我怕會有基因突變，期待有人分享心得了。