2021 前端会有什么新变化?
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 客户端工程师的岗位