從Knockout到AngularJS

兩年前初見Knockout.js後便一腳踏入MVVM世界無法回頭。學習簡單很快上手，用Knockout做出錯誤少又容易擴充維護的AJAX網頁。在此之前，為了讓欄位連動，總要寫一堆、 onchage、onclick事件，事後常需要在一堆事件程式碼裡追查更動來源，更糟的是稍一調整就常因觸發順序改變導致錯誤，修改維護是件苦差事；改用KO後，專心把ViewModel邏輯寫好，餘下的欄位連動便能一次到位，加上邏輯都集中寫在ViewModel內，維護起來輕鬆許多。

不過，最近參與SPA專案(Single Page Application，指從頭到尾沒有任何PostBack，停在同一網頁裡完成全部工作的網頁，最經典的例子是Gmail)，逐漸感受單靠Knockout(或者該說MVVM)的不足。SPA需在同一網頁切換不同操作介面，當介面複雜度提高，網頁HTML、JavaScript開始龐大交錯，管理及維護難度急速上升。面對這類情境，引用JavaScript端MVC設計模式讓架構分明，簡化維護難度，是較好的選擇，而Knockout只專注於MVVM，仍需要其他MVC架構輔助才容易建構成SPA。

經過粗淺評估，目前市場上較常提及的JavaScript MVC架構包含: Angular、Ember、Backbone及Durandal(杜蘭德爾，中古世紀聖騎士羅蘭的配劍名字)。由於我的後端一定是用ASP.NET MVC開發，故整合資源、參考資料的多寡將是考量關鍵，以此標準，就是Angular JS或Durandal二選一了。

Angular JS擁有最大的開發社群，是幾個架構中最夯的，氣勢驚人。而選擇Durandal的優勢在於Knockout! MVVM也算是MVC裡的一環，Angular有自己一套處理MVVM的做法，而Durandal則直接採用Knockout處理MVVM，微軟傳教士John Papa也曾針對Durandal有一系列的介紹，對我而言，已累積的KO知識在應用Durandal時將可發揮，感覺上Angular與Durandal各有優勢。看似兩難的抉擇，其實至今局勢已大幅改變~

在今(2014)年初，Open Source的Durandal啟動了一個集資計劃(Kickstarter)，雖然創始人Rob聲明說即使集資不成仍會持續發展，只是開發速度趨緩，但已令人憂心Durandal的發展動能及前景。到了4月中，Angular的部落格上有篇很特別的文章，作者是Rob Eisenberg – 是的，就是剛說的Rob，Durandal的創始者(Rob還打趣的說，大家不要驚慌，他不是靠Heartbleeding漏洞駭進Angular Blog偷發文)，文中透露驚人的消息。Rob從2月起已加入Angular Core 2.0 Team，計劃將原本Durandal下一代(NextGen)的構想融入Angular 2.0，同時提供Durandal 2.x遷移到Angular的途徑，Durandal 2.x仍會繼續維護(但可預期將不再有新版本)，此舉如同宣告Durandal的發展已劃上句點。

發展至此，微軟不再(也無法)漠視Angular的成長並開始擁抱Angular(令我憶起當年AJAX Control與jQuery的瑜亮故事)，John Papa近期有愈來愈多談Angular整合的文章，前陣子結束的北美TechEd還有場談ASP.NET+Angular建立RIA的議程。由此不難得感受，使用Angular建構ASP.NET SPA已是當今的主流!

最後，我很倚重的Kendo UI元件為Angular再下一成。前陣子發表Angular Kendo UI v1.0，方便Angular整合Kendo UI，雖然KO也有社群發展的knockout-kendo可用，但Angular Kendo UI由官方推出，二者層級有別，也算Angular穩坐前端MVC一哥地位的佐證。

分析至此，態勢明顯，如果要走ASP.NET SPA，Anuglar才是主流選擇!! 廢話不多說，立刻向Angular出發~

但，Knockout該何去何從?

首先得強調一點，Knockout根本不是Angular的對手!! 倒不是因為Angular太強大，KO還沒上擂台就被叫去領便當；而是二者定位不同，KO只專注於MVVM，而Angular包含整套MVC。MVVM所聚焦的Data Binding只是MVC中實做View的一環，故二者不該直接相比，就像沒人會拿Office跟iPhone相比一樣道理，要比也是Windows Phone對上iPhone，定位才相近。Angular是完整的MVC架構，真要比較，對手應該是Durandal、Ember或Backbone，而Knockout隸屬Durandal陣營，所以應是Durandal vs Angular，哦哦…

這段時間，其實我已投入不少時間熟悉了解AngularJS，Angular在語法簡潔性(自訂Directive及Filter的概念很酷)、架構彈性(可動態載入切換View、Dependency Injection的點子很棒)、可維護性(甚至已考慮自動測試需求)方面考慮嚴謹周延，常讓我發出讚嘆(回頭看到自己的土砲架構，不禁發出感嘆)。但在Binding運作上，Angular不像KO靠宣告observable()、observableArray()建立依賴關係，而是直接觀察Scope內JavaScript物件的改變自行建立相依。雖然Angular宣告ViewModel時不必寫成observable()、observableArray()很省事，但面臨較複雜的欄位互動邏輯，初學者常難以判斷某個動作是否會被Angular感測。除此之外，Angular涉及MVC，整體架構範圍比MVVM龐大，而官方技術文件較Knockout深澀。依我個人看法，Angular的學習曲線較Knockout陡峭許多。在一些簡單的ASP.NET AJAX應用場合，如果只是需要一套MVVM機制，Knockout較好學習上手，而observable/observableArray宣告雖然囉嗦，但應用時容易區分是否觸發UI連動，還是很有優勢。

至於我的選擇? 由於專案會走向SPA，Angular是強大、完整、嚴謹、彈性的主流MVC架構工具，並已廣為ASP.NET社群接受，就算學習曲線陡峭如同單攻奇萊主峰，也得咬牙吞下去，著眼熟悉活用後帶來好處。近期將會陸續分享我的Angular學習筆記，一連串KO之後，NG要上場囉~