一起拭目以待Angular2的新时代—前端开发框架的比较选择

原文发在：https://771dian.com/cb/topic/4JQH1_zUl 

开局非常艰难，但是，一旦用上了Angular2，我们就再也不愿意回到没有它的时代了。就好比看过了彩色电视的人，不愿意再去看黑白电视。

我们试着用Angular2开发了一个小品级服务： https://771dian.com/danmu 

现在，随着 ES6推进，前端正在迎来新一轮变革。这期间，我们做了很多尝试、调研、试用工作，总结出来，帮助想选择前端框架的各位少走弯路。

前端框架大概有这么几类选择（老手请跳过）

1. JQuery

轻量包装了操作网页dom的方法，简单好用、高性能。但没有模块机制，网页中到处是 class 和 id，开发显得缺少效率。

2. Angular

Angular是google的一套前端开发框架。真正把网页模板化，做到模板数据，和javascript数据双向绑定，给开发带来了极大地便利。用Angular，一般倾向于完全不用Jquery。

3. React

Facebook提出的一套组件机制，他和Angular走上了相反的道路，他不是把html模板化，而是彻底把html拆成小块，塞入javascript中，完全靠javascript渲染html。React的组件，既可以在服务器端渲染，也可以在客户端渲染。

4. Angular2

Angular2不是Angular的简单升级，而是推倒重来，完全基于es6标准，彻底把前端模块化、对象化。代表着未来趋势。

选择框架的历程

即使看到上面这样的介绍，大部分人，其实也不知道该选择什么框架。

Jquer很轻快，但太轻量，显得开发缺少效率。

于是，我们很快就被Angular的开发效率吸引。网上一搜索，提到Angular的，要么是求助贴，要么就是说它好。于是，我们就乐滋滋的扑过去了。但使用之后，发现这是一条贼船

Angular 性能低下 、 内存消耗高居不下 、 包装directive模块辛苦、困难、麻烦 。 坑爹的路由机制 ，让用户即使只打开一个页面，也要加载整个网站所有页面和脚本。要用Amd异步模块机制缓解，就要对引用的外部包进行再改造。过程辛苦、吃力不讨好。

于是，我们在寻求彻底解决方案时，瞄准了能同时在客户端和服务器端渲染组件的React。如果React客户端有类似angular的问题，至少还可以拿到服务器端用。

有了Angular的教训之后，我们选择只在英文圈了解情况。并发现，React组件不但编写很不自然，而且渲染很慢，在服务器端渲染更慢。国外很多React用户反映了这个问题，但React的团队反馈是，他们不认为在服务器端使用React是它的目标，不打算改进。

于是，我们把目光转移到了还在胎盘阶段的Angular2。

Angular2

开局非常艰难，但是，一旦用上了Angular2，我们就再也不愿意回到没有它的时代了。就好比看过了彩色电视的人，不愿意再去看黑白电视。

这是我们用Angular2开发的小品级服务： https://771dian.com/danmu

它真正做到了前端完全面向对象化，一个组件，就是一个类，可以有自己的html和css模板。整个网站前端，就是个树状结构，一个组件调另一个组件。

同时，它完全基于事件机制实现双向绑定，让它拥有Angular的优点，同时性能接近JQuery。

国外有横向测试，网站我们懒得再去找了，但我们记住了当时看到的结果。

* 假设极端情况，有个页面，用Jquery打开，要3秒。
* 那么，用Angular2 就是4-5秒，
* Angular就是8-9秒。
* 用React就是12-13秒。

没错，Jquery依然最快，但是，Angular2已经非常接近。Angular慢得让人心痛，React则慢得令人吐血。

但我们在爱上Angular2的同时，也体会到现阶段使用它的痛苦。如果你是在2015年底看到这篇文章，并想学Angular2，那么你要做好以下思想准备： 

1. Angular2还太早期，官方文档错得一塌糊涂，严重跟不上开发进度，我们是阅读github中angular2的代码注释，才真正把angular2用上手。
2. 关键变量、引用名称每周都在变！ 这周能用的，下周升级下，大概就不能用了。
3. 目前，它的调试信息基本毫无用处，它大部分时候，都不能准确告诉你，你的代码中哪一行出了错，只扔给你一句毫无用处的内部出错信息。

但是，趋势却是站在Angular2这边的。大家需要做的，就是等待一个恰当的切入时机。何时是恰当的时机？我们的想法是，从2015年底算起， 3-5年 。

之所以要这么久，不是因为Angular2本身不成熟，而是因为客户端无动于衷。

很多用户还在使用ie和遨游，手机浏览器也没有跟上es6步伐。于是，angular2需要额外加载外部库，来兼容es5。前置要加载的东西，有点太多，第一次打开网页就很慢。

另一边，组件化，意味着一个页面，被打散成很多文件。比如，本页的示例： https://771dian.com/danmu 就包含20个组件，近40个文件。这意味着，如果浏览器不支持http2，速度将慢到吐血。比如，我们这个测试页面，在手机浏览器上打开，要接近8秒。

在这种情况下，Jquery和Angular依然还能坚挺，但从我们的体验来看，几年后，Angular2的时代必然会到来，让我们一起拭目以待。