比較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各取所長的結合在一起，我是不敢用基因改良的東西啦，我怕會有基因突變，期待有人分享心得了。