2009年Angular1出世,12年1.0版正式发布,不知不觉经历6年多的时光,从最初的UI原型工具到称霸一方的MVVM框架,一路走来看遍世间百态。


直到去年React横空出世,开始了前端组件化的浪潮之后,它才开始谢幕。Mumble FE大多数的作品都是使用Angular1框架去搭建,Angular1的功能完备性使得我们可以很方便搭建应用而不用过多的考虑其衍生生态的优劣,技术和经验的积累让我们工作越来越高效,可以说我们处于技术舒适圈中。
但一切并不完美,随着Angular1的深入应用,我们不可避免的会遇到涉及框架本身的“坑”,这里粗略列举几项:
 1.压缩后的Angular1和配套的Router体积加起来有300kb,比较好的3G网络速度大概是750Kbps,所以单纯的框架代码加载就需要0.4s,而很多时候我们大部分逻辑的代码都不到这个体积的一半;
 2.莫名其妙的$apply,脏值检查的性能瓶颈;
 3.庞杂的$scope,乱七八糟的激活事件;
 4.双向绑定的滥用以及其在使用过程中引起的难以解决的Bug(华为输入法Bug);
 5.编写高可重用性的directive难度比重新实现功能难N倍;
 6.第二代Angular出世之后,google随时可能宣布不再维护Angular1;
 前端的转型总是不可阻止,其区别只是主动与被动而已。

我们要到哪里去呢?
皆有可能,未来的方向还在思考中。
是走React那种纯粹UI框架配合其优秀的生态来打组合拳?还是继续选择Angular2走稳定路线?亦或者是清新Vue?
一切皆有可能,我们能做的是不断的钻研新技术,新标准,同时结合公司业务去摸索未来的方向。
 16年5月ng-conf开发者大会上面,Angular团队展示了ng2的核心概念以及未来的开发方向,随后ng2发布了候选发布版本(Release Candidate),9月2号RC6发布,ng2的框架基本定型(文章刚写完的时候,Angular2正式版就发布了- -)。
我从RC4开始翻译ng2的教程,期间使用RC4和RC5分别写了两个小型的SPA。从翻译跟Demo中,体会了ng2以下方面的优化:
 1.全面组件化,转移开发的中心。将页面的功能模块分组件,整个应用是一个大的组件树,可以想象成搭积木~ 2.透明化,封装好生命周期函数,再也不用手动$apply了!
 3.双向绑定成为可选项,默认单向的绑定到DOM视图;
 4.依托zone.js(类似Java中的TLS技术),极大的优化了脏检查性能。(官方数据是5-10倍);
 5.Systemjs,模块加载器,按需加载耍起来!
 6.angular-cli,angular2项目构建构建工具,一键生成整个项目(在开发中,tnpm没成功过,都报网络异常);
 7.FormBuilder, 表单创建、验证全部js干,从此表单的单元测试随便写;
 8.TypeScript,引入强类型系统,接口,继承一系列经典强类型语言特性(争议性还是有的,毕竟js开发者多年来没有关心类型也能活...);
 9.Angular Universal, 模版直出,又叫服务器端渲染(server render),指利用服务器的渲染好首屏,然后将页面推给浏览器端,这样用户会感觉页面加载的非常的快; 10.AOT(Ahead of Time)和JIT(Just in Time)两个选项!Angular提供了两种编译模式,从性能考虑,AOT目测是生产首选。
 Angular2吸收了很多React的优点,同时对Angular1做了极大的优化,并保留Angular1很多优秀的东西,虽然现在才刚刚开始正式版,社区还不够完善,周边的库还不多(主流的库都有出ng2版,譬如ng2-redux,ionic2,bootstrap for ng2),框架本身还有一些鲜为人知的bug,但是不可否认的是Angular2很有潜力跟React一战。
 大量开发人员的涌入使得前端这个原本不怎么geek的领域,不断的更新换代,腥风血雨。让我们暂且离开前端的浪尖,静静思考一些本质性的问题。
学习曲线的选择
Angular和React犹如两个不同的修仙门派,升级路线不同,学习曲线也就迥异了。
二者开发模式,编程风格,代码可读性有着较大的差距。React非常纯粹,Js开发者选一种编程风格,学两个渲染函数,再搞几个生命周期函数便可以写出嵌套多层的组件树。
但是,单纯的使用React是非常无力的,React亮眼的地方还在于丰富且优秀的其周边产品,在生产上通常选择多个配套的框架最佳搭配来完成业务需求。换句话说便是,想搭建高复杂度的应用,使用React并不会降低学习难度。
Angular(1.x,2.x)和Vue则必须先学习其特有的语法,指令,函数之后才具备开发的可能。一名Js开发者入手React会比Angular要快许多,但因为Angular2框架的完备性,我们可以不用花太多精力去选择乱七八糟的衍生框架,使用Angular提供的功能便能很好的完成大部分业务需求。
思维的中心:视图 vs 组件
开发的重心到底是放在视图中,从视图的角度去实现需求;还是聚焦在组件上,组件化的方式去构建应用?
作为一个Angular1代的开发者,当我使用Angular2开发的时候,便强烈感受到二者的区别。在Angular1的controller加view的搭配下,我们很容易便把工作重心放在对应视图和UI稿上面,但是在组件为中心的框架(包括且不止Angular2,React)拿到设计稿的时候,我们会思考这个页面能有几个组件组成,组件之间怎么搭配,组件的状态如何管理,我该如何写的通用一点,争取能重用呢?
可能你不信,其实Angular1的开发者问问自己一个问题就明白了,想过重用Controller吗?
增强HTML vs 纯粹JS
这是React和Angular2最大的区别。
Angular2继承了Angular1的做法,利用Js去增强Html,通过各种指令和组件丰富Html的功能;React却恰恰相反,JsX的出现使得开发者可以用Js从头写到尾,而不用切换到html去编辑组件的UI。

是在Js里面写Html,亦或者在Html里面“写”Js?从我们传统的前端人员配置来看,Angular2的在HTML中写Js的做法依然非常有吸引力,重构和h5可以很愉快的分工,页面代码的可读性依旧良好。
打包 vs 按需加载
目前SPA(Single Page Application)绝大多数的做法都是将依赖资源和项目资源打包成两个js文件,然后一次性的加载进页面,这样的做法当项目中资源过大时,首屏加载会很慢,这也是服务器渲染(Server Render)火起来的原因。
Angular2的做法是使用Systemjs去做资源的按需加载,这么做的好处很明显:首屏渲染的没啥压力,当然这么做又会有另外一个哲学的问题,该怎么权衡的去打包压缩资源,同时用好按需加载呢?目前比较通用的做法是,项目代码打包,大的依赖文件动态加载。
拥抱标准
Angular2 利用Typescript的编译能力以及各种polyfill大量的使用新的ES特性,包括且不止Observable,Web Animation,web Component,Decorator,Module。
 ES6(ECMAScript 2015)发布了大量新特性之后,ES变成了一年一更,今后每年都会有新的proposal,ES会变得越来越完备和强大。
虽然新的特性浏览器支持会比较差,但是babel和typescript等预编译器可以将ES6的代码转译为ES5兼容的代码,这样我们便可以提前在开发中使用ES6,甚至ES7的新特性。这些特性会极大的提高我们编程的效率,同时降低代码的复杂度。
 轻巧
前端技术更新换代的速度非常快,前几年前火的不行的require.js,sea.js,backbone,grunt,bower,现在被webpack,react,gulp压了一头。
如果没有良好架构的话,一个项目很可能一年之内多次重构。团队面对众多的工具和库的时候,应该理解他们需求点,明白为什么旧的方式会被取代,而不是一味的为追新而追新,与此同时我们还必须提高原生开发的能力,降低对某个框架的依赖,保持这样轻盈的方式有利于团队快速转型。
学习曲线的选择
Angular2的研究只是我们为转型努力的方向之一,还有Ember,React,Vue等等优秀的框架可选,未来是多框架并行的使用,还是专注于某个框架,主要由公司业务决定,一切皆有可能。
郝拉克里特说,人的一生不可能两次踏进同一条河流,无物常在,保持两分兴趣和八分专注,一起去远方走走看看,或许会发现,别样的精彩。