唱唱反调：风口上的技术不要盲目追

2020 年 4 月 4 日 InfoQ

作者丨蔡芳芳

对于前端领域的开发者来说，“学不动了”虽然更多是一种调侃，但也真实地反映出了他们面对频繁出新的前端技术时又爱又恨的心情。在经历了移动互联网的大爆发后，前端领域的边界不断扩张，新技术、新概念、新框架层出不穷。这在一定程度上迎合了开发者喜欢追踪热门框架和技术最新发展的天性，但同时也带来了新问题。热门框架那么多，到底该选哪个？新技术引入并非毫无代价，一味追求新技术是不是合理？最火、最流行的技术一定适合你所在的团队吗？

在大前端领域，我们已经看到了太多技术风口，关于如何做好前端技术选型这件事，我们希望能从不一样的视角聊一聊。为此，InfoQ 近期采访了阅文集团技术专家、前百度 T8 资深研发工程师彭星，谈谈他对目前大前端发展趋势和架构演进的理解，并总结了他在技术方向选择和方案选型上的经验，希望能给大家提供一些参考。另外，彭星是 GMTC 全球大前端技术大会（北京站）2020 大前端架构演进专题的出品人，该专题将通过解读行业具体实践案例明晰前端架构演进的路径和未来方向，感兴趣的同学可以关注。

大前端架构十年演进

彭星进入淘宝和百度实习的时候是 2010 年，到现在刚好十年。回顾过去这十年，前端领域经历了一场不大不小的变革。

2010 年， AJAX 已经应用多年，十分成熟，虽然出现了 backbone 这样的 MVC 框架，但真的用 MVC 框架开发用户产品的并不多，绝大部分是内部管理系统。这个时期主流前端是开发后端模板，通过服务器端渲染，AJAX 用来做页面内容的局部更新。要说 2010 年前对业界影响比较大的一件事情，就是 Chrome 团队开发的 v8 引擎，大幅提升了 JS 的性能。这时候还没有大前端这一说法。

同年，基于 v8 引擎的 Node.js 出世，使得前端开发人员可以用 JS 编写服务器端代码，接管渲染层，开启了大前端的大门。不过 Node.js 在服务端使用真正被开发者接受是在 2012 到 2013 年左右，前后端分离开始变得流行，这时候的前端包括前端和渲染层。

再后来就是改变世界的移动时代的来临，流量逐渐从 PC 分流到移动平台。Web 相比 Native，具有跨平台、开发成本低、周期短、发布周期短等优势，在移动开发上赢得了不小的市场。这一时期出现了 Hybrid 混合开发 App，结合了 Web 和 Native，谁也没能替代掉谁。

但是，Hybrid 毕竟也是 WebView，性能相比 Native App 依然存在不足，而在手机这样小的屏幕上，用户体验尤其重要。想要 Native 般的体验，又想要 Web 跨平台、动态发布等优点，并不容易，但办法总是比困难多，React Native 的出现，将两者的优点融合在一起。这个时候大前端的边界再度扩大，涵盖了前端、渲染层和端开发。

然后就是近两年小程序和 Flutter 的流行，使得大前端的概念和范畴进一步巩固。

这期间不断涌现的新技术给前端开发者和前端团队 Leader 带来的困扰是：那么多新框架、新技术、新编程语言，怎么选？

盲目跟风不可取

最简单的一种方式是互联网大厂选什么，跟着选就是了。这其实是在技术选型上偷懒，却也是当前业界普遍存在的情况：很多公司在前沿技术方向上盲目跟风互联网大厂，并没有好好考虑这些技术方案是否真的适合自己。

比如，企业官网是不是应该用 MVVM 框架来做？彭星的答案是不应该，在他看来，企业官网需要 SEO，交互少，传统的服务器端渲染是最好的解决方法。虽然用 Node.js 做 React/Vue 的 SSR 也能解决 SEO 问题，但这其实是把简单问题复杂化了，不仅费人费事还费财。

彭星认为，大厂在技术探索上投入很大的人力物力是有理由的，他们的业务模块多且复杂，既需要保留解决方案的灵活性，也需要可维护性，但这些不应该是中小企业优先关注的问题。

彭星表示，互联网大厂、传统企业和中小型企业，在前端技术选型上应该有不同的侧重点：

互联网大厂，核心技术自研非常有必要，因为只有自己掌握核心技术才能不受人制约，所以大厂在技术探索上投入很大的人力物力。大厂的二级业务才会选择使用内部自研的或者社区影响力大的技术方案。

传统企业，需要结合自身企业类型来选择前端技术方案。传统企业往往需要承接各个平台过来的流量，载体一般是网站和小程序，小程序不用多说，网站还是主要看是否需要 SEO，是否便于在主流平台进行分享传播，一般选择后端直出的框架配合 jQuery 即可。

中小型企业，这类型的企业有一定的研发能力，业务类型多样，以 Native App 和小程序居多，网站只是 App 引流工具或者活动页面。Native 的解决方案取决于业务类型，只要不是非常复杂且对可靠性要求很高的应用， Flutter、RN 等跨平台方案是很好的选择。

综上所述，技术选型首先还是要参考业务需求，“同时也呼吁同行，不要为了达到一些目的而大肆鼓吹，这对相信你的开发者很不负责”，彭星进一步补充。

前端技术选型经验小结

彭星毕业后在百度工作了 9 年，期间负责百度搜索团队的前端技术，曾主导百度搜索前端的优化和重构工作；2020 年加入阅文集团负责创新中台团队，团队成员共有 50 多人，包含了前端、客户端、服务端等不同角色，是名副其实的大前端 + 的团队，集团的新产品都从这里孵化。虽然新老东家的前端团队规模、主要业务均有不同，关注的技术点也有差异，但在技术选型上却有一点是相同的，那就是以实用为主。

彭星表示，阅文对于前端技术的关注点主要是实用，要能解决业务中的问题，同时要有技术架构上的灵活性，由于业务的复杂度不高，因此技术一般都是拿来直接用，比较方便；百度的体量更大，每个大的团队关注点也会有一些区别，彭星之前所在的百度搜索团队，对于前端的关注点同样是实用为主，因为搜索系统庞大而复杂，也会关注前端技术能否解决大型系统中的组织结构灵活性和可维护性问题，同时还要求性能最好，一般很少直接使用业界的技术，而是吸收加以改善，再用到项目中。

彭星在做技术选型时一般会参照以下几个步骤：

首先看自身的主要问题是什么，业务需要什么；

再看业界有什么解决方案，一定要结合自身业务的主要诉求；

方案决定后，选择框架，选择社区大而活跃的。

对于大前端领域现在很火的前沿技术，如 Vue、React、Flutter 这三大框架，以及 Serverless 等，前端团队如何判断这些技术是否适合自己？

彭星参照上述技术选型的几个步骤给出了一些建议：

首先看业务的形态是什么，后台管理系统、移动端网站、移动端 App 还是其他形态。

Vue/React 解决的问题类似，主要是富交互场景，比如管理系统，或者移动端 Web App。当然他们都可以作为 Hybrid 的前端框架继承在 App 里，如果是在 Vue 和 React 中挑一个的话，大型系统选择 Angular，有洁癖选择 React。Flutter 的选择就很简单了，移动端想跨端、节省人力、愿意学 Dart 就可以，只是 iOS 上的动态更新要费点事。Flutter 现在最主要的竞品其实是 React Native，RN 由于苹果的那条传言已久的禁令，受到的影响不小，如果担心这个，可以不选 RN。

彭星坦言，过去一年 Serverless 概念的火爆有点超出自己的预期。