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年的增长会很令人期待。