2021 前端会有什么新变化，首先需要搞清楚我们关注这些新技术的目的是什么？

相信对于关注这个问题的人包括我来说，除了了解技术发展风向作为饭后谈资以外，最重要的是看能不能在公司内部落地、做出一番成绩来，当然升职加薪那都是后话了。

回望过去

首先定义一下我说的“过去”是 2019 年及以前。

以史为镜，可以知兴替。回望一下过去，有利于我们对未来做出更好的判断。我们先细数一下过去的几年间大厂的前端都在做什么。

前端工程化

这个应该是前几年社区讨论的最多、面试问到最多的一个名词，那么什么是前端工程化呢？我觉得需要从以下几个概念开始讲起。

模块化

先说 JavaScript 的模块化。

从 ES6 开始，JavaScript 语言有了自己原生支持的模块化方案——ES6 Module，这样有个好处，前端们不用去使用社区定制的模块加载方案，直接使用统一的就好。统一模块方案之后，既可以不用额外引入模块化解决方案的代码，又可以为后面的自动化统一处理做好准备。

再说 CSS 的模块化。

CSS 模块化主要是解决的 CSS 类名冲突的问题，比如常见的 BEM 约定以及社区丰富的 CSS module 解决方案，有了这些东西，前端工程多人开发就可以优雅的解决类名冲突的问题。

组件化

随着 React 生态和 Vue 生态在国内各大前端团队的落地，组件化开发已经是标配了，并且开源社区也沉淀出了以 Element 、Ant Design 为代表的优秀组件库。

大厂的程序员们在组件的概念上又做了一层抽象和封装，比如以业务组件和业务区块为抽象的中后台前端解决方案 Ant Design Pro，并且它还在前端工具库、前端 UI 设计语言等等方案做了统一。

自动化

首先是开发的自动化。

webpack 和 nodejs 在开发的自动化上起了很大的作用。前端项目本地化开发的 server 由 nodejs （常用，也不一定非得是 nodejs ）提供，开发过程中的各种辅助性 plugin 和 loader 都由 webpack 生态提供，上线前的代码打包、代码分割、资源处理也由 webpack 操作，可以说过去几年间很多前端在职业晋升上都吃了引入 webpack 和 nodejs 的红利。

再说 babel，有了 babel 的配合，前端可以写高版本的 JavaScript 方法，配合 webpack loader，自动编译成低版本 JavaScript，前端能力再次得到提升。

其次是部署发布的自动化。

这个应该是很多大厂前端基建团队做的事情，比如持续发布、版本控制、内部 cdn 建设等等。

大前端

这也是个在过去几年炒的很热的词，不过这个词不仅仅是炒作，它也实实在在的扩展了前端的能力以及现有的公司组织架构，比如据我所知有的公司移动端和前端就会划分到同一个团队管理，统称大前端团队。

nodejs

这个在前端工程化部分已经说过一些，这里再次提起是因为在工程化中 nodejs 扮演的角色是提供 nodejs 环境以及部分后端能力，而在大前端团队里是实实在在的存在 nodejs 工程师角色和 nodejs 项目的。比如说在前后端分离的过程中，部分公司（比如阿里淘宝）会发展出一个中间层的东西，这可以理解为是一个大前端团队维护的业务接口聚合层，前端写接口肯定是使用 nodejs 最顺手，而且 nodejs 生态也在蓬勃发展，比如早些年的 TJ 大神一人之力扛起半个 nodejs 生态圈，涌现了 koa 、express 这样的基于中间件的开发库，再到后来阿里巴巴的 egg，再到 Nest.js ，现在基本已经没有裸写 nodejs api 的了。

跨端

先说说手机端

首先，最直接的跨端就是在 APP 壳子里面套 HTML 页面来开发，这种方案也催生了很多 hybrid 解决方案，前端也需要去了解客户端的知识以及 JavaScript Bridge 的设计，同时也减少了 APP 客户端工程师的岗位😂

然后，随着 React 生态蓬勃发展，Facebook 开源了一个跨平台移动应用开发框架——ReactNative，它可以让你以 React 的前端语法来开发移动应用，本质就是虚拟 DOM 映射原生 UI 元素、通过 bridge 调用原生 API，这种思路让前端的触手伸到了移动开发，也促成了大前端团队的建设。Vue 生态也有阿里发起的 Weex 移动开发框架，原理类似。

再后来，Flutter 出现了，它也是一个跨端的开发框架，准确来说它和 JavaScript 生态关系不大，使用 Dart 语言开发 APP，并且有自己的跨平台自绘引擎来保证多端 UI 表现一致，但因为也是一种跨端的解决方案，所以也受到了大量前端工程师的关注和学习。

最后，还是要提一嘴小程序，这个技术方案其实是商业的产物，各个公司都想把内容和生态留在自家的 APP 里，所以从微信小程序开始（微信不是最早，但是发展的最好），阿里、百度、字节跳动等等这些公司都有了自家的小程序。

再说说桌面端

桌面端据我了解使用的比较多的是 Electron，它可以让前端以 JavaScript 来开发出桌面应用，比如字节跳动的飞书桌面端就是使用 Electron 来做的。

总结过去

从过去这些发展的技术可以看出来，前端主要是在做统一化、工程化、生态化的事情，从早些年间的刀耕火种跨越到比较完善的工程化开发，前端的能力范围也得到了扩展，以前不能做的事情现在可以做了。

很多互联网公司的前端高 p 也是在这一波浪潮中晋升，得到了更好的职业发展。

分析现在

首先定义一下我说的“现在”是 2020 年左右。

现在基本上各大公司的前端工程化改造大体完成，各种改造方案、组件库都层出不穷，所以前端又有新玩法了。

Serverless

准确来说，Serverless 并不是前端的技术领域，因为它解决的是让开发者不用关心服务器底层架构和运维工作，形成一种“无服务器”的假象。

那为什么这个技术在前端领域会受到追捧呢？

因为这个技术刚好解决了整个开发链条中前端缺失的能力，即服务端底层和运维能力。各个大公司的前端团队也都在尝试把 Serverless 落地，比如在知乎上就可以看到很多关于 Serverless 的布道。

NoCode 和 LowCode

在我看来，低代码（ LowCode ）和零代码（ NoCode ）产品，是前端对现有能力整合之后，对其他领域的一种扩张和赋能。其实各大公司在某些特定业务场景中早已经有相关的产品落地了，比如广告业务、电商运营的繁多的落地页需求可以使用零代码产品来解决，全程不需要代码参与。

那既然之前有，现在为什么又提起低代码和零代码呢？我觉得原因有两个：

之前解决的只是某些特定业务场景的问题，现在想把这种能力逐渐扩展到更多的业务场景，比如扩展到公司外部，来做 toC 的使用。
之前解决的只是页面级的问题，现在想解决应用级的问题。

总结现在

当然了，现在的讨论的比较多的、正在进行中的技术和解决方案肯定不止我说到的这两种，欢迎大家补充。

目前大公司的前端们也在结合业务在做这方面的事情，如果你所在的团队在做相关的事情，不如加入进去，不管是技术或职业发展，都会有比较好的收获。

展望未来

React Server Component

这个目前还在提案中，未来成熟之后极有可能改变前端的开发方式，前端 React 生态的范围又向服务度端扩展了，一波新的基础建设、技术方案可以考虑了。

Serverless 大规模落地

按照现在社区以及各大公司内部的发展，Serverless 应该会在 2021 有大规模的落地，运维岗位会进一步减少😸

NoCode 和 LowCode 持续发展

低代码这个概念在 2021 年初因为钉钉发布会被再次带火，因为钉钉的使用量以及 toB 端市场有很多内部应用的搭建需求，所以它强调这个概念也不奇怪。

相信有像阿里钉钉这样的企业的推动，低代码和零代码会发展的更好。

不用焦虑

说了这么多，是不是更焦虑了？其实不用。

React 核心成员 Dan Abramov 都大方承认了他并不了解 Flex 、Webpack 等等技术，没试过 Serverless 等等“时髦”技术，很多你会的技术他不会，照很多招聘标准来看他还评不上阿里 P7，但是这并不影响他能成为 React 核心成员，以及他在他自己擅长的领域的造诣。

所以，不用都会，选定一个自己喜欢的、能做出成绩的技术，深入下去吧！

2021 前端会有什么新变化？