WEB前端技术发展及大前端前沿技术分享

大前端方向有Web开发、NodeJS、多端、IoT、硬件开发、智能化等领域的发展，为大家梳理出一些值得大家关注的大前端热点技术。

1 Web领域

主要指的是传统PC端应用或中后台系统的前端相关技术，包括HTML/CSS/JS这前端三大基础技能、React及Vue等现代前端开发框架、在线IDE及插件以及中后台低代码开发平台等。

PC端的大型Web应用一直都是很多企业的命脉，如今随着浏览器性能的提升，都逐渐开始了Web化，由C/S架构改成B/S架构，比如PS提供了在线版、各种IDE也开始web化、很多大型桌面游戏借助WebAssembly<支持C/C++/Go/Rust等语言>技术进行了web化。

1.1 HTML/CSS/JS

结构：从2014年，发布HTML5以来，各浏览器对新标准的支持热度也越来越高，但HTML并不止于此，一些新增特性将以HTML6进行命名，主要有：支持原生模式、没有JS的单页应用程序、自定义菜单、用户隐私增强、集成摄像头等。

表现：2021年CSS新增了很多特性，比如CSS容器查询、CSS父选择器、CSS层叠控制规则、CSS子网格等；CSS是Web开发中不可或缺的一部分，在前端工程化的不断进步的今天，一方面在 CSS 特性随着规范的升级越来越丰富，另一方面，前端业务复杂性的增加带来的工程愈加庞大，驱使者开发者不断寻找CSS工程化的最佳实践；Tailwind是CSS工程化领域极为耀眼的新星，是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，21年12月发布的v3.0，内置了Just-in-Time模式。

行为：JavaScript 每隔 10 年就会发生一次变化，JS的第一个时代，从1997-2007年，ES4 努力在在 Flash/Actionscript 等封闭生态系统的激烈竞争中步履蹒跚；JS的第二个时代，从2009-2019年，npm、Node.js、ES5及ES6诞生了；当前已经进入JS的第三个时代，TypeScript 将成为很长一段时间的主流，大型前端开源项目大都已经或正在全面拥抱 TS，同时JS和TS的核心基建Rust化，例如swc、rome、deno。

1.2 框架-Angular & react & Vue & Svelte

Angular是一个孤傲的变革者，曾经与React和Vue一起被称为“前端三驾马车”，它喜欢引入和传播思想层面的概念，将那些被公认为正确优雅且有助于工程实践的事物带给前端；但随着技术的迭代发展，它在国内前端技术圈中的存在感变得越来越低；21年11月发布了Angular13，不再支持旧编译和渲染引擎 View Engine，全面支持新编译和渲染引擎 lvy，以及不再支持 IE11，除此之外还有包括对 APF 以及 Angular CLI 等方面的更新和修改。

React18 已进入Beta阶段，发布时，它将包含开箱即用的改进（如 automatic batching)，全新的 API（如 startTransition）以及内置支持了 React.lazy 的 全新 SSR 架构)；这些功能之所以能够实现，要归功于React18中新加入的 “并发渲染（concurrent rendering）” 机制，使得 React可以同时准备多个版本的 UI。

Vue3发布后，vue团队已经不甘于只做渲染框架了，似乎有全面重塑前端基础设施的想法，先搞了vite打包工具，近期又搞了 vitest 测试工具；精力有限，所以框架上21年主要发布了vue3.2，主要提升了响应式性能和支持setup语法糖，尤雨溪官宣时表示：script setup + TS + Volar = 真香；同时由于vuex4 对 typescript 的支持让人感到难过，所以官方推荐的状态管理弃用了vuex而采取了pinia，作者是Vue核心团队成员。

Svelte的作者是前端界的轮子哥Rich Harris(开发了Ractive, Rollup等)，核心思想在于『通过静态编译减少框架运行时的代码量』，不像React或Vue，需要『引入』框架本身(所谓的运行时runtime);Svelte 和 Vue 的确都是走的模板编译的路线，只不过 Svelte 是直接将模板编译成了原生 DOM，而 Vue3 则仍然将模板编译为虚拟 DOM;Svelte 很适合写简单页面，打出的包小，加载速度很快，代码写着也舒服，几乎是写web component组件的最好选择；未来不一定是svelte的，但它一定能占到一席之地。

1.3 工程化

通过某种基于 Node.js 的构建工具（如 webpack）运行 JavaScript 和 TypeScript 一直是常见做法，这些工具是用它们编译成的相同语言编写的——即 JavaScript 或 TypeScript。

由于前端项目的复杂化，我们通常需要webpack的插件打包我们的代码同时又需要不少babel的插件来编译我们的代码，这就造成了我们的编译时间变长，其次由于babel是由javaScript语言所开发，所以存在一些性能问题。

Vite号称是下一代的前端开发和构建工具，可以被认为是一个开发服务器 + Rollup，主要利用现代浏览器原生支持ESM的特性，提供通用的 Web 模式、全局导入、热更新 API、底层的服务端渲染、构建优化等能力，目前已经在前端社区里逐步开始流行起来了；在 Vite2 的第二次大规模发布之后，尤雨溪成立了一个 Vite 团队来对该项目进行维护，有超过400名贡献者，GitHub 中有超过 7万5千 个项目都在使用 Vite，并且 Vite 每月的 npm 下载量超过了 130 万次。

1. npm: 是 nodejs 自带的包管理工具

2. cnpm npm的默认官方下载源是 https://registry.npmjs.org/，国内访问经常掉线。因此淘宝推出了淘宝源https://registry.npm.taobao.org

3. yarn 是Google 和 Facebook 等国际大公司开发新的包管理工具
   npm的缺陷比如：

   1. 下载速度慢
   2. 安装速度慢
   3. 没有统一的版本控制，各成员之间的包版本经常不一致

   yarn 下载和管理包的方式 发生了重大的变化

   1. 通过并行下载提高了包的下载速度
   2. 引入了 yarn.lock 文件，存储包之间的依赖关系，保证成员之间的包版本一致
   3. 有了 yarn.lock 文件，不用每次计算各个包之间的版本依赖，安装速度更快等等

4. pnpm 它采用了一种巧妙的方法，利用硬链接和符号链接来避免复制所有本地缓存源文件，这是 yarn 的最大的性能弱点之一

以前旧的构建工具：fis3、gulp…

1.4 在线IDE

虽然WebIDE本身还未流行，但随着国内云计算的发展, 各大云计算服务厂商都在部署自己的WEB IDE, 而且已经有非常成熟的落地方案；所以WEB IDE谈不上一个比较新的技术，而其实现方案，也基本明确并且成熟，各大WebIDE的方案，基本都是基于容器的方案。

theia是其中比较流行的方案，一部分功能复用vscode，但是设计初衷便是为了扩展，所以私有化部署和定制功能极其方便；目前基于theia产品有：gitpod、阿里系ide、华为云ide、google云ide、美团MMP小程序开发工具及webIDE等；其在扩展能力上，远超vscode，同时具备全开源、社区活跃度较高、接入改造成本低、不收费的优点。

stackblitz 移植了很多 VS Code 的特性与功能，非常的方便易用；它推出了web container的概念，提供了非容器化方案的纯前端node环境，目前该方案不开源；猜测较多的是service worker实现请求拦截，webassembly提供了node的环境，从而实现不需要远程机器，全部都跑在浏览器的一个IDE。

JetBrains Projector 是 JetBrains 提出的“远程开发”解决方案，基于 Client + Server 架构，对标的是微软 VSCode 的Remote Development方案，可以直接使用浏览器访问安装在服务器上的 IDEA，原理是把 JVM 里的 Swing 绘制层换掉，改成是向浏览器发送些渲染指令。

随着JetBrains 大力支持原有的离线IDE进行web化，基于 WebIDE 打通研发链路的上下游，将会成为未来几年研发提效的重要热点方向。

1. theia：https://try.theia-cloud.io/
2. stackblitz: https://stackblitz.com/

1.5 低代码

低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。

另一方面，低代码能够让不懂代码的人，通过“拖拉拽”开发组件，就能完成应用搭建。从意义上讲，低代码可以弥补日益扩大的专业技术人才缺口，同时促成业务与技术深度协作的终极敏捷形态。

低代码从“可用”到“好用”的进化，也是需要在实际场景中摸爬滚打中历练进化。

案例：

1. 易企秀：https://www.eqxiu.com/
2. 泛微：https://e-builder.weaver.com.cn/
3. 清流：https://qingflow.com/

1.6 Web3D技术

AR、VR、WebGL等领域开始进入发热期，这也是元宇宙的基础；不管是 IOT 下的实屏还是 VR、AR 下的虚屏，当下已经相当完备和标准化的绘图 API 最有机会被新「屏」优先支持和采用，在这基础上利用图形技术实现一套新的 UI 基础设施甚至语言都是有可能的。

3D网站将用户交互游戏化，提高了用户的参与度，在营销和销售领域有巨大潜力；但制作3D网站并非易事，需要熟练掌握WebGL和Three.js等库；随着元宇宙的推出，这个行业也应该会蓬勃发展，使3D 网站的开发比以往任何时候都更容易。

AR: 常见的AR在支付宝扫“福”中见过
VR: https://www.720yun.com/
WebGL: 游戏、地图、数字孪生…

1.7 模块化开发

模块化编译给本地开发带来巨大收益，无论你的项目模块文件有多少，实际上就是一个模块的量级。网上真实案例：模块数已经达到60多个了，npm run serve 一次编译大概是3850多个文件，大改40s-60s多之间。采用模块化编译的方案，基本上能达到一次编译只需13s-18s之间。而且不会因为项目模块的多少，影响编译性能。

1.8 微前端

什么是微前端？

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。

微前端的方案目前有以下几种类型：

1. 基于 iframe 完全隔离的方案
    作为前端开发，我们对 iframe 已经非常熟悉了，在一个应用中可以独立运行另一个应用。它具有显著的优点：
    
    非常简单，无需任何改造
    完美隔离，JS、CSS 都是独立的运行环境
    不限制使用，页面上可以放多个 iframe 来组合业务
    当然，缺点也非常突出：
    
    无法保持路由状态，刷新后路由状态就丢失
    完全的隔离导致与子应用的交互变得极其困难，只能采用postMessage方式。
    iframe 中的弹窗无法突破其本身
    整个应用全量资源加载，加载太慢
    这些显著的缺点也催生了其他方案的产生。
    
2. 阿里 qiankun
    qiankun 可以用于任意 js 框架，微应用接入像嵌入一个 iframe 系统一样简单。qiankun@2.0 将跳出 route-based 的微前端场景。
    优点
    阿里团队开发维护，文档多。
    基于single-spa 封装，提供了更加开箱即用的 API。
    HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
    样式隔离，确保微应用之间样式互相不干扰。
    JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
    资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
    umi 插件，提供了@umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。
    兼容IE11
    缺点
    上线部署文档较少
    qiankun 只能解决子项目之间的样式相互污染，不能解决子项目的样式污染主项目的样式
    
3. 京东 micro-app 方案
    京东 micro-app 是借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 webComponents 组件，从而实现微前端的组件化渲染。

1.9 浏览器赋能

1. web worker 在浏览器开启多线程。 https://mp.weixin.qq.com/s/3ClucFm7vKeroGA4gCRrtw
2. indexDB 本地数据库，类似mongodb。
3. webSql 本地数据库，类似mysql。
4. PWA 渐进式Web APP https://blog.csdn.net/weixin_44135121/article/details/105528430
5. Server Push 服务器推送 https://www.jianshu.com/p/d1eb370d0247
6. File System Access API 是一项 Web API，允许 Web 应用程序从用户设备的本地文件系统中读取和写入文件。 https://mp.weixin.qq.com/s/Rtei0zXBQ5hre_EBB1rWEA
7. WebAssembly 简称wasm，是一个虚拟微处理器。https://www.jianshu.com/p/e4d002780cf8
   …

2 Node领域

这几年全栈工程师被炒的非常火热，而发展最快的所属Web前端转全栈，因为前端的基础语言是JavaScript，而后端Node的基础也是JS语言，这就为前端研发人员创造了得天独厚的优势。

去年Node.js主要是使用Node12，21年Node14占比将近一半，更新还是较快的；今年企业级框架变多，尤其是大而全的框架更受欢迎；Egg在国内普及率很高，而Midway和Nest都增长较快，这和TS普及有一定关系。

理论上ESM以后，一份 TypeScript 代码同时支持 Node.js、deno、browser 变得简单了；从业经验越高则越关注性能，Serverless的出现，使得很多非专业Node研发，也能轻松搞定Node.js各种服务端场景。

2.1 Deno

Deno 是一个简单、现代、安全的 JavaScript、TypeScript、Webassembly运行时环境，发布于 Node.js 创始人 Ryan Dahl 的演讲Design Mistakes in Node。

不难发现 Deno 其实和 RN、Flutter 这些框架很类似，因为它本质上也是跑了个 JS 引擎，只是这个 JS 引擎是 V8，不负责 UI 的 binding 而已。

Deno 的底层是用 Rust 开发，而 Node 是用 C++；Deno 的事件机制是基于 Tokio，而 Node 是基于 libuv；Deno运行 TypeScript 代码不需要编译步骤以及繁琐的配置文件。

Deno 看起来为了一些很小的益处承担了巨大的责任和代价，包括转移现有的 NPM 模块和代码库的诸多债务，目前的这些特性和性能提升，还不足以替代 node。

但Deno还是引领了一些创新的方向，比如import-http、esm.run、CJS to ESM等，可以说都是Deno探索间接或直接作用的结果。

3 云开发

云开发（CloudBase）是云端一体化的后端云服务 ，采用 serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

1. 微信云开发：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

2. 阿里云开发：https://workbench.aliyun.com/

3. uniCloud：是 DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。
   官网：https://uniapp.dcloud.net.cn/uniCloud/

4 一码多端

随着前端构建技术的告诉发展，优秀的构建框架如雨后春笋涌现，Web应用在跨端方面表现的能力越来越强。一套代码多端通用带来的人效提升尤为明显。并且越来越多的需求被前端技术占据，原生移动开发将越来越少。

以Electron为代表的前端桌面应用技术的出现，意味着前端技术也出现在桌面端了；尽管它可能不会成为桌面开发的主流，但它意味着一个极具性价比的可选方案出现，会越来越多的出现使用这种方案的桌面应用；知名的阿里云盘、飞书、vscode（专业级）、Slack、Thiea等都是基于Electron前端技术开发的。

https://www.electronjs.org/zh/

跨平台开发对开发人员来说变得越来越容易，幸运的是，像Electron这样的老牌玩家正在受到Flutter和Tauri等新玩家的挑战，它们提供了经过优化的应用程序构建。

混合开发的Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，是一个完全由Dart语言构建的SDK，它实现了一整套自底而上的基础库，是近两年最火的跨端技术，同时具备Electron的桌面跨端和RN的移动端跨端。
React Native是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台；

Weex集成了 WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用，Vue 和 Rax 是最广泛应用于 Weex 开发的前端框架，也是目前功能最全、最稳定的方案。

多端覆盖uni-app 是DCloud公司使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台; 小程序和H5主要基于mpvue，原生APP则依赖Weex的能力。

多端运行Taro是由京东凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架，通过编译将源代码分别编译出可以在不同端（微信小程序、支付宝小程序、字节系列、快应用等）运行的代码(原生APP则依赖RN的能力)。
鸿蒙系统APP开发…

鸿蒙APP开发、智能手表开发…

5 IoT

物联网就是互联网+智能终端，物联网的基础是成熟的互联网体系，核心是信息传递与交互控制，在互联网的基础上延伸并扩展到任何人与物之间、物与物之间，进行载体间信息的智能化处理和通信控制。

随着网络技术的提升，比如web3.0等技术的发展，物联网关键传感器，网络节点等技术的发展，那么前端就不仅单指与人面对的这部分前端了，至少是指系统与系统交互的前端部分，这里的系统可以是人为设计系统也可以是人。

作为离用户和物联网设备最近的前端，这两年来腾讯云物联网探索出了“腾讯连连”小程序，提供了一系列开源的开放能力，和更多的物联网开发商和爱好者一起打造生态。

阿里云物联网平台：致力于实现万物互联的美好世界，为生态合作伙伴提供基于云计算、大数据、人工智能、云端一体化、安全的物联网基础平台和内容服务平台。

配合 AliOS Things 的 TinyEngine 引擎和 Link Develop 的 Bone.js 框架，互联网开发者无需掌握其他编程语言，即可无缝快速切入物联网开发。

首先，申请阿里云账号，并开通登陆 Link Develop 一站式开发平台：https://linkdevelop.aliyun.com

Web App 开发：https://bone.aliyun.com/bone-web/bonewebsdk.html?name=wpgl7p

IoT硬件开发平台：https://ruff.io/zh-cn/

6 前端智能化

从最初的脚手架工具、组件库、持续集成体系、自动化测试、多端适配到现在的全面的低代码平台、前端智能化、在线 IDE，大家都在为未来的新的且高效率的方式做着努力。

效率工具永远是开发者的朋友，这些工具和技术可以把我们从重复工作的泥潭中解脱出来，分配更多的精力到创造性的工作中来。

前端近年来一直尝试提升效率，可视化研发、搭建体系、工程&工具、端多解决方案等都是为了解决效率，但天花板已然出现，下一步必然会引入智能化能力。

狭义的智能化利用深度学习技术，在图像、NlP等方向，通过模型训练、预测的方式的智能化， 广义前端智能化可以从输入到输出的角度思考。

前端开发人才紧缺已经是业内的共识，提高研发效能离不开工具和平台; 在开发的细分领域，前端开发也是 AI 瞄准的目标之一，AI + 前端近几年已经进行了很多的探索和实践。

在原来的技术体系&产品上，注入自然语言识别、图像识别的能力，使得效能的发生一系列质的变化，来突破这个天花板;更大层面上，运用智能化能力来解决工作中的问题，会逐步成为前端的必备能力和思考方式。

近些年出现的代码分析工具 DeepCode，基于 GPT-3 的代码生成工具 Copilot，还有野心非常大的从自然语言到代码生产的 NL2Code 方向，都扩展了我们对于前端智能化的认知。

低代码平台和前端智能化可以不是一道选择题，后管类系统更适合用低代码平台搭建，而对于需要设计师参与、对 UI 要求较高的项目，前端智能化可以通过 D2C 的方式助力开发提效。

人机协同编程是效能提高的具体呈现形式之一，它是基于AI构建系统的训练模型，能进行代码生成、自动构建、测试发布，将传统编程、传统设计、代码生成、智能设计有机结合在一起。

输入输出确定，中间过程自动化， 是AI最擅长干的事。输入输出严格确定，不是自由人喜欢干的事。矛盾就是这个。泛化性是一直研究的核心方向。但前端范式未定，AI短期产研链路上，不会有大突破。

前端智能化的内涵会随着时间的推进不断外延，一切基于人工智能和特定算法的可以提升研发效率和质量的工具平台会不断出现，这个领域也会吸引越来越多的关注。

业界阿里在前端智能化上探索得较早，不仅取得了较多成果，而且界定了前端智能化的分级，为前端智能化的发展指明了方向：

目前阿里 imgcook 的能力处于 D2C 的 L3 级别，智能生成的代码还需要可视化干预或人工兜底开发后验证上线；未来期望达到 L4 级别，需要对 UI 信息架构进行拆解，对从 UI 信息自动生成代码的智能化能力进行细分。

官网：https://www.imgcook.com