博客专区 > 点空的博客 > 博客详情
Angular2的新时代【介绍, 用后评价, 关键问题】—前端开发框架的比较选择
点空 发表于1年前
Angular2的新时代【介绍, 用后评价, 关键问题】—前端开发框架的比较选择
  • 发表于 1年前
  • 阅读 3560
  • 收藏 5
  • 点赞 4
  • 评论 3

【粉丝福利】-《web 前端基础到实战系列课程》免费在线直播教学>>>   

摘要: 网上大部分对Angular2的介绍评价,都非常浅。既没有体会到它的优点,也没有暴露它当前的问题。而我们深入进去,尝试用Angular2开发了一个小品级服务,这里将感受分享给大家,并提供从jquery, angular, react, 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标准,彻底把前端模块化、对象化。代表着未来趋势。

选择框架的历程


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

Jquery很轻快,但太轻量,显得开发缺少效率。

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

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


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

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


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

Angular2


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

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


它真正做到了前端完全面向对象化,一个组件,就是一个类,可以有自己的html和css文件,而不是像react那样嵌在js中。这样前端工作即能完美分离,又能完美组件化。整个网站前端,就是个树状结构,一个组件调另一个组件。

同时,它完全基于事件机制实现双向绑定,让它拥有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的时代必然会到来,让我们一起拭目以待。


-----

update:

angular2的一整套机制,要得以顺畅使用,差不多要等es6普及,es5全面淘汰,那真的需要好几年。现在,最好的选择,是vue


vue可以理解为es5版本的angular2。同时,vue把前端模块化,扔给了webpack,所以vue本身包很轻。


共有 人打赏支持
粉丝 4
博文 7
码字总数 4463
评论 (3)
叫我刀刀
1.2还没学会怎么办
点空

引用来自“叫我刀刀”的评论

1.2还没学会怎么办
angular 1.2和1.3+差异有点大,建议避开1.2系列,除非为了维护公司的老旧代码,迫不得已
wancy
继续1.5
×
点空
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: