2021前端发展方向

转载至：https://www.cnblogs.com/qianduanpiaoge/p/14300390.html

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客户端工程师的岗位

然后，随着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核心成员，以及他在他自己擅长的领域的造诣。

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

最后

前端学习是一条漫长的道路，我们要学习的东西不仅仅只有表面的 技术，还要深入底层，弄明白下面的原理，只有这样，我们才能够提高自己的竞争力，在当今这个竞争激烈的世界里立足。

千里之行始于足下，愿你我共勉。

金三银四快到了，送给大家一个小福利，下面是我在工作之余整理的一些面试题，包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、react等等。

HTML 篇

• 图片中 title 和 alt 区别？
• Html5 有哪些新特性、移除了哪些元素
• 浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢
• 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
• canvas在标签上设置宽高 和在style中设置宽高有什么区别
• 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

CSS 篇

• CSS中link与@import的区别：
• position的absolute与fixed共同点与不同点：
• BFC 有什么用
• 清除浮动的几种方式
• Css3 新增伪类 - 伪元素
• IE盒子模型 、W3C盒子模型
• display:inline-block 什么时候不会显示间隙？
• 行内元素float:left后是否变为块级元素？

由于内容较多，为了避免阅读体验仅展示部分面试题，完整版的面试题+解析，【点击我】免费获取。

image

JavaScript篇

• js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
• js拖拽功能的实现
• 异步加载js的方法
• js的防抖
• 绕不过去的闭包
• 说说你对作用域链的理解
• JavaScript原型，原型链 ? 有什么特点？
• 请解释什么是事件委托/事件代理
• Javascript如何实现继承？

Vue

• vue中 key 值的作用
• Vue 组件中 data 为什么必须是函数？
• vuex的State特性是？
• 介绍一下Vue的响应式系统
• computed与watch的区别
• 介绍一下Vue的生命周期
• 为什么组件的data必须是一个函数
• 组件之间是怎么通信的

由于篇幅有限，只能分享部分面试题，更多面试题及答案可以【点击我】阅读下载哦~无偿分享给大家，算是一个感恩回馈吧

image

React

• 介绍Redux，主要解决什么问题？数据流程是怎么样的？多个组件使用相同状态如何进行管理？
• React-Redux到react组件的连接过
• Redux中间件是什么东西，接受几个参数
• redux请求中间件如何处理并发
• 如何配置React-Router
• 路由的动态加载模块
• React生命周期及自己的理解，以及V16对生命周期的修改
• 为什么使用虚拟dom？

浏览器

• 跨标签页通讯
• 浏览器架构
• 浏览器下事件循环(Event Loop)
• 从输入 url 到展示的过程
• 重绘与回流
• 存储
• Web Worker
• V8垃圾回收机制
• 内存泄露
• reflow(回流)和repaint(重绘)优化
• 如何减少重绘和回流?
• 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
• localStorage 与 sessionStorage 与cookie的区别总结

image

更多面试题及答案可以【点击我】阅读下载哦~