从Knockout到AngularJS

从Knockout到AngularJS

两年前初见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架构包含: Angular、Ember、Backbone及Durandal(杜兰德尔，中古世纪圣骑士罗兰的配剑名字)。由于我的后端一定是用ASP.NETMVC开发，故整合资源、参考数据的多寡将是考虑关键，以此标准，就是Angular JS或Durandal二选一了。

Angular JS拥有最大的开发社群，是几个架构中最夯的，气势惊人。而选择Durandal的优势在于Knockout!MVVM也算是MVC里的一环，Angular有自己一套处理MVVM的做法，而Durandal则直接采用Knockout处理MVVM，微软传教士JohnPapa也曾针对Durandal有一系列的介绍，对我而言，已累积的KO知识在应用Durandal时将可发挥，感觉上Angular与Durandal各有优势。看似两难的抉择，其实至今局势已大幅改变~

在今(2014)年初，Open Source的Durandal启动了一个集资计划(Kickstarter)，虽然创始人Rob声明说即使集资不成仍会持续发展，只是开发速度趋缓，但已令人忧心Durandal的发展动能及前景。到了4月中，Angular的部落格上有篇很特别的文章，作者是Rob Eisenberg -- 是的，就是刚说的Rob，Durandal的创始者(Rob还打趣的说，大家不要惊慌，他不是靠Heartbleeding漏洞骇进AngularBlog偷发文)，文中透露惊人的消息。Rob从2月起已加入AngularCore 2.0 Team，计划将原本Durandal下一代(NextGen)的构想融入Angular2.0，同时提供Durandal2.x迁移到Angular的途径，Durandal2.x仍会继续维护(但可预期将不再有新版本)，此举如同宣告Durandal的发展已划上句点。

发展至此，微软不再(也无法)漠视Angular的成长并开始拥抱Angular(令我忆起当年AJAX Control与jQuery的瑜亮故事)，John Papa近期有愈来愈多谈Angular整合的文章，前阵子结束的北美TechEd还有场谈ASP.NET+Angular建立RIA的议程。由此不难得感受，使用Angular建构ASP.NETSPA已是当今的主流!

最后，我很倚重的Kendo UI组件为Angular再下一成。前阵子发表AngularKendo UI v1.0，方便Angular整合Kendo UI，虽然KO也有社群发展的knockout-kendo可用，但AngularKendo UI由官方推出，二者层级有别，也算Angular稳坐前端MVC一哥地位的左证。

分析至此，态势明显，如果要走ASP.NET SPA，Anuglar才是主流选择!! 废话不多说，立刻向Angular出发~

但，Knockout该何去何从?

首先得强调一点，Knockout根本不是Angular的对手!! 倒不是因为Angular太强大，KO还没上擂台就被叫去领便当；而是二者定位不同，KO只专注于MVVM，而Angular包含整套MVC。MVVM所聚焦的DataBinding只是MVC中实做View的一环，故二者不该直接相比，就像没人会拿Office跟iPhone相比一样道理，要比也是WindowsPhone对上iPhone，定位才相近。Angular是完整的MVC架构，真要比较，对手应该是Durandal、Ember或Backbone，而Knockout隶属Durandal阵营，所以应是Durandalvs 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.NETAJAX应用场合，如果只是需要一套MVVM机制，Knockout较好学习上手，而observable/observableArray宣告虽然啰嗦，但应用时容易区分是否触发UI连动，还是很有优势。

至于我的选择? 由于项目会走向SPA，Angular是强大、完整、严谨、弹性的主流MVC架构工具，并已广为ASP.NET社群接受，就算学习曲线陡峭如同单攻奇莱主峰，也得咬牙吞下去，着眼熟悉活用后带来好处。近期将会陆续分享我的Angular学习笔记，一连串KO之后，NG要上场啰~