Quantcast
Channel: 黑暗執行緒
Viewing all articles
Browse latest Browse all 2421

從Knockout到AngularJS

$
0
0

照片出處: http://www.geograph.org.uk/photo/360000作者: Barbara Voules

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

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

經過粗淺評估,目前市場上較常提及的JavaScript MVC架構包含: AngularEmberBackboneDurandal(杜蘭德爾,中古世紀聖騎士羅蘭的配劍名字)。由於我的後端一定是用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要上場囉~


Viewing all articles
Browse latest Browse all 2421

Trending Articles