从2020看2021前端发展趋势

3,360 阅读10分钟

前言

图片

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

泛前端技术框架探讨

VueReactAngular
web端Vue全家桶React全家桶Angular全家桶
桌面端Electron/NwElectron/NwElectron/Nw/Cordova/Ionic
原生移动端WeexReact NativeCordova/Ionic
小程序端uniapp/mpvue/mapxtaro/Rax

大前端技术框架探讨

VueReactAngular
web端Vue全家桶React全家桶Angular全家桶
SSRNuxtNextUniversal
服务端无特定无特定可配合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到了,愿大家在这个内卷的时代,都有自己的一技之长,形成自己的核心竞争力,升职加薪,再创辉煌,共勉!!!