Angular2与React,前端的未来志向何方?

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:徐飞
链接:https://www.zhihu.com/question/38576309/answer/78211671
来源:知乎

去年年底,我回答过一个问题:

2014 年末有哪些比较火的 Web 开发技术? - 徐飞的回答

转眼间一年过去了,Angular 2发布了beta版,React如日中天,只有Polymer还是不温不火。

这一年时间内,我也经常观察前端界的各种趋势,关注各种创新点,并且跟业内同行进行过一些探讨,最终结论是:这三个框架,代表着前端框架目前的三条路线,仍然是并行发展的,只是在发展过程中互相吸收先进的思想。

哪三条路线呢:

  1. 以Angular,Vue,Aurelia,Avalon为代表的MVVM路线
  2. React以及相关周边
  3. 以Polymer,NovaJS等为代表的Web Components路线

这三条路线本质上都是前端组件化框架/库,所以,组件化理念是它们的立身之本,虽然大家的实现方式有所不同,但很多理念都是共通的。具体差别在哪里呢?

在这里需要先提及三个名词:

MVVM,Virtual DOM,Web Components

我提这三个词的意思,并不是说它们就对应于刚才三条路线,人们往往会有误解:比如认为MVVM是Angular等框架的专利;除了React,别的框架也就不能有Virtual DOM了。

其实不然。

MVVM框架们之所以被冠以MVVM的名号,因为他们都是非常侧重于分层的,三层分得一般非常清楚。比如说我们看Vue,它的一个组件中,包含很明显的三层。

但是在React的实践中,如果应用的规模增大,数据的组合复杂度高,很可能到最后也搞成了类似VM和M的分层,在这个回答的评论下: 如何正确、客观地评价 React? - 邓欣欣的回答

@墨磊 提到的:

另,最近一些项目中,在 Flux 或者 类 Flux 的 Store => View 这一步,
因为一些历史原因,依然不得不走向了这样的过程 ModelStore => ViewModelStore => View,同样可以视为 MVVM 吧。

所以,MVVM并非MVVM框架们特有,当基于React或者其他框架的项目变大的时候,仍然有可能作为一种实践被用起来。

再来看Virtual DOM,目前React是有这个东西的,但MVVM框架的底层一样可以搞起来。好几个框架的底层都部分使用了这种理念,比如大家的track by,都可以把数据和DOM之间的关系索引起来,当一个数组的元素交换了,它们可以借助这些索引关系,不销毁原有DOM树,而是直接把数据交换了设置过去。

如果MVVM框架不是使用先生成DOM,再提取模板配置这种方式,而是直接解析模板生成AST,做这层更加容易,而且可以比较容易替换成其他渲染方式,比如在服务端,或者在移动端的Native代码中渲染。

再看Web Components,主流的MVVM框架其实都在往这个方向靠拢,而React由于使用工程手段解决了Shadow DOM和Scoped CSS这样的问题,所以对此并不太在意,而且由于它实现的特殊性,要兼容Web Components反而比较难。

D2的时候我曾经跟 @贺师俊在这些方面有过交流,他认为MVVM框架们很可能最终跟Polymer合流,整个前端框架领域被React和MVVM流派平分,鹿死谁手尚未可知。

我觉得,目前的应用场景是足够大的,每个流派都是可以活得下去的,无所谓东风压倒西风还是反过来,双方都能生存下去。到最后,当形成整体解决方案的时候,很可能两派方案都是殊途同归:

  • 视图层实现了Virtual DOM
  • 宏观上组件化,形成组件树
  • 微观上MVVM,并且都应用类似Flux,Redux之类的数据层方案
  • 编程模型吸收Immutable和Rx的
  • 通信层应用Relay或者Meteor之类的方案

比较大的区别可能是对Web Components标准的应用程度,MVVM系可能都会使用它,并且相应地采用不同的CSS资源管理和构建方案。

去年年底的时候,有一件事情我没有想到,那就是ES6的普及速度,有鉴于此,我认为,未来一两年内,ES新版本会成为各路组件化开发方案的默认配置,并且得到广大开发人员的接受,TypeScript也可能会随之大放异彩。

另外有一点我没有考虑到的就是HTTP2,这个经过 @贺师俊指出之后,我觉得很有道理。我总结一下他的观点:之前我们都会考虑代码的合并打包等方案,但是当HTTP2普及之后,这方面很可能不是问题,人们会回归一种只专注于代码本身,而不是着重考虑现有这些类型的优化方式,所以这可能会对各类工程管控优化方案有个颠覆。

目前能看到的大致这些,一年后来看看。

顺便回答你的问题,1-2年内,Angular 2应该不太会颠覆得动React,甚至要超越自身的1.x版本都比较困难,更详细的见这里: 如何评价 Angular 2 发布 Beta 版本? - 徐飞的回答

倒是Vue,在2016年的增长会很令人期待。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值