从2020看2021前端发展趋势

前言

又到了年底，想简单谈谈这一年前端的发展，以及21年可能会出现的一些趋势。毋庸置疑，2020年确实是不平凡的一年，对前端来说，私以为可以用“大前端持续深耕，泛前端兼容并包”这十四个字来形容。这里需要明确一下我对“大前端”以及“泛前端”这两个概念的理解：首先大前端可以分为广义的“大前端”和狭义的“大前端”，市面上常说的大前端主要分为这两类，所谓广义的“大前端”是指以前端技术解决所有本属于其他领域问题的前端技术，这里其实是包含了后边所说的泛前端的概念，也就是说只要是使用前端技术去解决的都可以定义为“大前端”；而狭义的“大前端”是仅指垂直到后端领域的前端技术，其代表是以node.js为主的扩展的去解决后端领域的技术，如出现了诸如express、koa、egg、nest等等配套的后端技术框架，甚至出现了node的微服务框架，我这里不做说明仅指狭义的“大前端”概念。对于“泛前端”，这个概念没有歧义，通常指的都是跨端技术，比如客户端、桌面端，甚至HUB等等，上图中所示的仅仅指一部分框架，并未收录完全，毕竟js/ts的社区实在太太太太活跃了，下面简单分说一下“大前端”和“泛前端”个人的一些见解，是以前端三大框架Vue、React、Angular为核心进行横向和纵向的框架探讨

泛前端技术框架探讨

	Vue	React	Angular
web端	Vue全家桶	React全家桶	Angular全家桶
桌面端	Electron/Nw	Electron/Nw	Electron/Nw/Cordova/Ionic
原生移动端	Weex	React Native	Cordova/Ionic
小程序端	uniapp/mpvue/mapx	taro/Rax	无

大前端技术框架探讨

	Vue	React	Angular
web端	Vue全家桶	React全家桶	Angular全家桶
SSR	Nuxt	Next	Universal
服务端	无特定	无特定	可配合Nest

今年阿里前端练习生计划将前端领域划分了七大方向，分别是工程化方向、前端中后台方向、Node.js方向、跨端技术方向、互动技术方向、可视化技术方向、前端智能化方向，个人认为Node.js是一个整体的前端基础，并不能单算做一个方向，因而我将其替换为音视频方向，私以为可将前端方向划分为以下几种，下面我将在这几个不同的方向维度进行个人的一些阐述和拙见：

• 中后台方向：微前端
• 可视化方向：antv
• 智能化方向：imgcook
• 互动方向：Eva
• 音视频方向：wasm
• 工程化方向：severless、全链路工程
• 跨端方向：kbone、rax

中后台方向

1. 对于中后台方向，这是传统web方向，对于前端来说，2020年对于微前端的落地应用已有很多实践。因此，私以为微前端会作为未来前端大型应用的一种趋势，对于不同团队的不同技术栈的汇总整合是一个比较好的方案，虽然不同于服务端的那种微服务可以微的很彻底，但是前端加持着ts等的特性也是可以实现微化的效果，从而优化工时，提升效率，避免重复劳作；
2. 既然第一点提到了ts，那这里我想说一说关于ts的问题，在19年我对ts的态度尚存观望，但在今年，我认为ts可以作为一种必备技能来考察和实践，并不是因为大家都在用，而是因为随着时间的发展，现在前端要承载的能力越来越重，项目也越来越大，ts可以很好的约定，对于后期的维护以及修改都可以很好的限制，对于大型团队、大型项目来说，ts是不二之选；另外，如果有团队真的要去开发服务端，那我真的建议你去用ts，如果你用过nest.js，你会发现和写java真的没什么区别，而且服务端的很多理念也可以通过ts的各种特性来使用，比如泛型、抽象类等。当然，如果是小团队，而且需要快速开发，对于小而美的应用，个人认为还是js适合，毕竟js是一门灵活的语言，哈哈哈

可视化方向

1. 可视化这里，今年其实没有做多少实践，但是个人认为，这七个大方向而言，最容易出成果，或者说最能出大佬的，可能还真是可视化领域，如果能在可视化领域做到了前5%，那么我相信各大厂肯定会花钱养着你，毕竟我拥有你不一定重要，但是对手不拥有你对我很重要，你的技术壁垒就呈现了出来，也就在这个内卷的江湖获得了一些领先和优势，最起码裁员的优先级也不会那么靠前，哈哈哈
2. 第一点说的有点儿远，说说实在的，个人觉得可以将阿里的antv作为可视化领域的一个标杆，针对各种特定领域进行展开，比如gis等，当然，其实可视化领域研究的深的话还是挺冷门的，这其实也会有一些机会，webGL/webAR/webVR等等都可以作为切入点，配合着下面的音视频领域，这两个的相互结合，确实还是能做出些东西的

智能化方向

1. 智能化领域，个人认为其实核心不在于前端，而在于人工智能，而人工智能领域就不仅仅前端那么些东西了，对于封装好的如TensorFlow.js，我们是直接拿来用的，但是对于领面的模型建立其实才是关键，如果有同学想在智能化领域有所发展，个人建议还是要深钻一下，最好可以深造一下，毕竟这个东西是真的需要学术研究+产业实践的
2. 在产业实践的前端领域，阿里还是比较领先的，比如imgcook，其核心目的是将图片转成前端代码，利用的机器视觉去识别图片中的不同的位置信息等，将其转成前端的代码，也就是所谓的D2C，即：Design to Code，今年的D2大会上又提出了P2C，即：Product to Code，但并不是真的将人类语言直接转换成code，而是对D2C的一个业务扩展，对于D2C某些业务代码利用一些特定的schema进行约定，让机器学习过程中多一些参数约束，从而提升代码实现度。虽然转化的代码还很冗余，但是对于一些初级的项目或页面，确实可以交给机器去实现，个人认为人工智能对低端重复的工作确实会进行替代，也算是对前端内卷做了一定的贡献，摊手...

互动方向

1. 互动方向，目前大头还是在游戏方向，但是我还是认为页游或前端实现游戏主要还是做一些开胃菜的功能，并不能真正的将用户带进沉浸式的体验，对于小游戏引擎，今年阿里好像出了一个eva的引擎，感兴趣的同学可以看看
2. 对于新体验方面，AR/VR/MR等可能在明年5g深化的时候会有一些落地实践，但可能还是不温不火，互动方向配合设计的新理念可能会是一个新的突破点

音视频方向

1. 这里想说一说WebAssembly，虽然都说wasm是会替代掉js，但目前看应该还不太现实，wasm目前主要还是配合音视频领域多一些，另外就是一些额外的优化措施，配合rust进行优化等，如果有志于音视频领域有所建树的同学，wasm确实可以储备起来
2. webrtc是音视频领域一个绕不开的技术，另外就是播放器的实现，video.js、flv.js等，对于一些视频播放的协议也要了解，如rtmp/rtsp等，今年疫情的关系，带动着直播领域的火热，前端音视频方向说不定会是一个风口

工程化方向

1. 工程化方向就不得不提serverless，这是今年前端最火热的一个话题了，私以为serverless不仅仅是前端领域的变化，它可能改变目前的开发模式，以后没有前后端之分（ps：目前确实是有合的趋势），只有云工程师和端工程师之分，那么对于目前的前端来说，我们就不能仅仅只关注前端领域的一些内容了，docker、k8s等属于传统后端或运维的部分，我们也需要掌握，对于一些后端的思维及名词也需要熟悉，如限流、削峰、服务降级等。当然serverless的前提其实是云原生，如果没有云化，那实现serverless的效果应该不如目前这样，当然个人认为这是一个必然的趋势，从今年的云栖大会以及运营商5g云化来看，云网融合、云边协同应该会是主流
2. 前端工程化另外一个方向就是全链路的工程化，从脚手架、low code、插件市场等全链路的提供，简化前端开发门槛，这里可以参考淘系的飞冰，对low code以及ide的插件提供都有涉及，以及ui组件库的提供等等，形成一个全链路的前端生态。这里可以说说low code和no code，no code是一个无需任何编码的现成的工具，就是完全没有编程的入口；low code是一个需要部分编码的工具，为了是给一些非专业人士但又有编程需要的人员使用，强调开发出来给别人用，常见的比如给运营人员用的h5编辑器，如易企秀、maka、ih5等

跨端方向

1. 跨端方向是一个老生常谈的问题，主流还是要write once，run anywhere，常见的无非就是利用各种框架将各个DSL进行来回转换，但其实这是一个伪命题，本质是不可能达到大一统的局面的，抽象就很难具象，这两者需要有一个平衡，需要对具体常见具体分析
2. 私以为小程序领域是端方向下一个各家大佬追逐的市场，因为app领域的跑马圈地都已基本形成，现在再去开发出一个现象级的app几乎很难很难了，但是将app作为操作系统，以小程序去带动用户，形成用户闭环，还是有很大市场的，类小程序应用，如pwa、快应用等都是这种承载方式的不同展现，对跨端来说，这个不失为一种发展选择。对于小程序的框架也出现了kbone、rax等，可能也会有一个类似w3c这样的一个小程序标准，但是像微信这种巨无霸应用，是否真的会遵守就是另一回事了，总之，其实也不失为一个选择

总结

回望2020，展望2021，总结如下：

1. 大前端持续深耕，泛前端兼容并包
2. 中后台微服务化，可视化行业细化
3. 智能侧算法深化，互娱侧形态变化
4. 音视频结构优化，工程侧全面转化
5. 跨端侧具体改化，前端更加内卷化

好了，2021到了，愿大家在这个内卷的时代，都有自己的一技之长，形成自己的核心竞争力，升职加薪，再创辉煌，共勉！！！