浅谈2022年前端技术趋势

6,232 阅读7分钟

2022 年什么会火?什么该学?本文正在参与“聊聊 2022 技术趋势”征文活动

鄙人资历尚浅,不敢妄言前端发展大趋势,以下仅是鄙人拙见。

微前端:云时代的前端开发模式

image.png

什么是微前端?

微前端(Micro-Frontends)概念是2016年底提出,距今已有五年多时间的沉淀,目前在前端领域也有较为广泛地应用。微前端(Micro-Frontends)是一种类似于微服务的架构,是一种由独立交付的多个前端应用组成整体的架构风格,将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用,而在用户看来仍然是内聚的单个产品。

微前端为什么该学?

因为微前端很火,所以我们该学,当然这是前端er不能拒绝的理由,那至少我们能看出微前端的价值,给我们在项目实践中带来什么好处呢?从微前端概念中不难看出:

  1. 微前端的最佳应用场景是B端的管理系统(巨石应用),可以做到兼容老的系统版本,同时又能集成新系统,而且不影响用户的使用。
  2. 基座应用与微应用以及微应用与微应用之间可以做到独立部署、独立配置、独立监控,互不干扰。

目前成熟的微前端框架

single-spa:一个用于前端微服务的javascript框架,社区公认的主流微前端方案,可基于它二次开发。

qiankun:基于single-spa二次封装,阿里系开源框架,可能是你见过最完善的微前端解决方案🧐。

icestark:阿里飞冰团队开源框架,面向大型系统的微前端解决方案。

综合来看,微前端方案的确能解决我们日常开发过程中的一些痛点,伴随着开源框架在实践中走向成熟,可以做到无痛迁移巨型应用,不仅解决多个开发团队协同问题,还带来了安全的沙箱、优秀的性能体验。

微前端将在2022年甚至更远的时间内,都会是一种优秀的解决方案,也会被越来越多的前端团队采用!

Vite:下一代前端开发与构建工具

image.png

为什么是Vite?

Vite 是由尤大大(vue的作者-尤雨溪)开发的前端构建工具,它是一种新型前端构建工具,能够显著提升前端开发体验。

目前市面上主流的打包工具如webpack、rollup、parcel等在构建大型应用时,大家不难发现在随着我们项目的不断迭代构建、冷启动的时间越来越长,甚至几分钟的时间,心态直接爆炸,大大地影响开发者的效果及幸福感!

Vite 以浏览器原生ESM方式提供源码。这实际上是让浏览器接管了打包程序的部分工作:Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。

在 Vite 中,HMR 是在原生 ESM 上执行的。当编辑一个文件时,Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活,使得无论应用大小如何,HMR 始终能保持快速更新。

Vite 同时利用 HTTP 头来加速整个页面的重新加载(再次让浏览器为我们做更多事情):源码模块的请求会根据 304 Not Modified 进行协商缓存,而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存,因此一旦被缓存它们将不需要再次请求。

感受到Vite的神速构建,我们肯定是关心原生 ES 模块的兼容性问题,只有具备较好的兼容性,开发者才能放心大胆地使用,义无反顾地选择Vite,下图附上兼容性:

image.png

主流浏览器中除了IE(对,就是IE,开发者的噩梦)都已支持,如果你的受众群体是IE不过不用担心,尤大大已经给出兼容方案,提供官方的插件@vitejs/plugin-legacy,这个插件为不支持ESM的传统浏览器提供支持。

Vite 值得每个开发者期待

Vite 短时间内肯定是无法代替webpack,但是通过分析其启动链路及其原理,它具备极速的服务启动,轻量快速的热重载等特性,相信会被更多开发者团队应用落地。同时从社区的活跃程度来看,github已超过36.5k的star,2022年将会是一片繁荣,称此为下一代前端开发与构建工具,实至名归!

低代码:解放生产力

image.png

什么是低代码?

低代码是由英文Low-code翻译而来,Low-code其实一点也不low。低代码可以理解是一种软件设计模式,对于开发者来说就是用将公共能力抽象成一个组件或者模块,从而增加业务之间的复用性,而低代码平台正是提供一个可视化的方式,让更多无编码经验的人利用平台提供的能力,通过“拖,拉,拽”等简单的方式完成网站的搭建。

低代码平台的现状

首先我们可以从海比研究院“2021中国低代码/无代码行业研究报告”中分析目前低代码平台行业概状。大致可以分为以下几个维度:

  1. 低代码平台分类:目标人群、技术、企业性质
  2. 低代码需求侧分类:场景应用型、产品研发型、平台生态型和技术赋能型
  3. 市场环境分析:政策扶持,企业数字化建设需求逐年增长,新型技术成熟等促进行业高速发展
  4. 行业发展周期:低代码市场尚处于导入期到成长期的过渡阶段,低代码成熟度略高

以下是目前国内市场上成熟的低代码平台,有兴趣的可以移步平台官网了解详情:

image.png

低代码应用前景

  • 应用类型

应用类型主要还是以移动端为主,这与当下中国的互联网环境相关,移动设备普及率较高,更为详细的应用类型来看,小程序是现阶段开发需求的最高的类型,得益于腾讯云积极布局基于小程序低代码平台。纵观2021年的应用类型趋势及5G网络的普及,可以预测2022年应用类型还是以移动设备为主流发展趋势。

  • 业务类型 现阶段以数据、设备、协同办公和研发类为主,未来数据仓库类、人工智能和区块链等新技术方面需求显著增长。

  • 行业场景 从行业场景来看,低代码平台还是以互联网、专业服务、零售、金融以及教育等行业为主,相信低代码平台2022年在这些行业还会持续发力,将会引领行业进行数字化升级。

总结

技术本身就是在不断迭代中进步,新技术层出不穷,如何看待一个技术是否是未来的趋势,个人觉得能够解决开发过程的痛点,赋能业务,提高产能才是一个好技术。以上所提到的技术,都真切的满足着三个条件,个人认为在未来的前端领域必将广泛应用,低代码平台也会成为资本的新宠!