React

好景不长前两年正式发布了 React17 后，项目组虽说就很多助跑的前科，2021 年主要就和其它COBOL展开了许多亲善碰头，比如说在墨西哥城（乌拉圭伊斯坦布尔）的家庭聚会：

和给二进制颤动做现场直播撷取：

组织工作上主要是在复原 React17 的 bug，但只不过复原的也并非许多，现阶段Applause了三个修整版号，新一代版是 V17.0.2，两年Applause了三个 patch 版，组织工作效率或许严重不足，当年度考核制度就很为她们深感害怕。

抱着揣测的立场，较为杰出的人常常自驱的，怎么会助跑呢？只好翻了下 Dan Abramov 的牌匾（gitHub 递交历史记录），这哥们儿是 React 的核心人物，在 React 也待了 5 年半之久，很具备代表性，他去年的组织工作主要就是大力推进 Reac18。

React18 提供更多了许多 Concurrent 优点潜能，能对网页的图形各项任务的错误率展开管理工作，使网页的可视化更亲善，举个范例，比如说网页上有个搜寻框，某一场搜索时读取了过多的统计数据，那在图形的这时候，网页会被夹住，你点选网页上搜寻框就会没化学反应。

这时，你能利用 Concurrent 提供更多的许多潜能，把点选的事件处理错误率调高许多，然后图形就会被中断，会优先处理点选事件，给用户化学反应就是：看，它动了！

React18 在上个月（十一月）16号终于正式发布了 beta 版，相信在 2022 年初大家就有新东西能学习了，真替大家深感开心！

Dan Abramov 推动的另外一件事是 Service Component，它允许你在服务器图形组件，然后 Client 端读取显示：

这个的主要就好处是能减少 js 打包文件大小，例如下面的代码：

 // 35.9 k

; // 206 k

const MarkdownView = () => {  

如果放在浏览器图形，就需要读取 marked 和 sanitizeHtml 三个库，但是如果放到服务端图形，就只需要读取图形后的 html 就行了，速度会快上许多，这个我觉得是前端成为全栈工程师的又一个入口。

另外的一个好处就是组件在服务端调用接口也会快许多，毕竟走的是内网。

我们能预测，未来大概率会出现一个公共的 Service Component 服务，来统一提供更多各种组件资源：

有兴趣的同学能提前规划建设，等到 Service Component 正式正式发布后，就能开门接客了。

Vite

尤雨溪在 2 月 17 号正式发布了 Vite2：

热爱学习的网友喜大普奔：

Vite2 能说是又给 bundless 打了一针鸡血，现阶段各大公司都踊跃跟进中，比如说阿里巴巴的 icejs 和 二进制颤动的 eden 两大框架就同时支持了 webpack 和 ice 模式。

另外，像 vite 的这种 bundless 打包方式，主要就依靠的是浏览器对 esm 的导入导出方式的支持，形如：

在实际运行时，会发送一个请求读取 lodash 资源，既然如此，那就能搭建一个 CDN 将所有的第三方资源存放在上面，供互联网所有的网页使用：

2021 年发展较为迅猛的 CDN 是 Skypack：

现阶段前端项目的正式发布过程如下：

如果使用 skypack，依赖包安装阶段未来可能将不需要，同时编译也会快许多，因为不需要将依赖包编译进去。

那这样的一个 CDN，对于大公司而言，考虑到安全、稳定和方便维护等等原因，更可能的是会搭建自己搭建一套，所以妥妥的是个基建风口。

现阶段 Vite 已经有 130 万的月下载量，许多原本依赖 webpack 尤其是新的框架也在拥抱 Vite，vue3 也会将 Vite 作为模式配置，所以很看好 Vite 的未来，不过 Vite 有个弊端，就是他的后台服务是启动在本地的，所以只能在本地享受到较为快的编译速度，不过，为啥我们不搭建一个公共的 Vite 服务呢：

这样就能在联调和测试环境，享受到极速的编译，部署起来就会很快。

Vue

Vue3 是前两年正式发布的，那去年主要就就是疯狂的复原 bug 和发新版，现阶段 Vue3 的新一代版是：V3.2.26，两年间发了将近 60 个版，平均每周发一点几个版，从尤雨溪的 gitHub 递交历史记录能看到：

这个人组织工作非常的勤勉，而且在周六日也经常递交代码，而这一切，都是为了让大家在 2022 年有新东西学习！

从上面的 Github 递交历史记录能看到，10 月和 11 月产量较为少，可能是因为作者移民到新加坡耽误的，为啥要移民新加坡呢，可能是因为新加坡的个人所得税较为低（最高20%）。

Vue3.2 主要就提供更多的功能是支持 Web Component，你能通过 Vue 写一个组件，经过编译后，能不依赖任何框架运行在浏览器中：

由于不依赖框架，相信网页的图形会快许多，这样大家就能省下许多时间学习新东西了。

sveltejs

sveltejs 作者是 Rich Harris，这个人同时也是 Ractive, Rollup 和 Buble 的作者，堪称前端界的轮子哥，那 2021 年他为他的新轮子 sveltejs 找了个大靠山。

Reactive 是 Rich 的第一个开源项目，运气不好的事是正式发布不久 React 就正式发布了，虽然很努力的维护，但无奈还是被 React 给拍死了，而且其残骸还为 Vue 做了嫁衣（Vue 借用了 Reactive 里面的许多思想）。

sveltejs 和 Vue、Angular、React 很类似，都是用来开发前端网页的框架，但是 sveltejs 通过两种方式让网页运行起来更快更流畅：

1. 网页运行时不需要读取框架本身：

能这么做的原因是它会在编译时将组件所需要的运行时代码打包在组件内部（会剔除掉绝大部分无用的），因此组件能独立的运行不需要借助外部模块，比如说如下的模板：

在编译后会转换为如下类似代码：

 render(root, parent) {   

);    

    a.innerText = root.msg;  

    parent.appendChild(a);  

 {    

update: root => a.innerText = root.msg;

    };

2. 没有虚拟 DOM 成本：

sveltejs 的所有操作都是直接处理真实 DOM，没有虚拟 DOM 的 diff 和 patch 成本。

sveltejs 现阶段的最大弊端是随着项目组件到达一定程度，项目代码会超过其它框架，对此 Rich 表示正在憋大招。

最后说下他的靠山，Guillermo Rauch（Vercel 创始人），号称前端网红收割机，除了 Rich，他还为 Vercel 分别招募到了 Tobias（前Webpack作者）、Donny（SWC）作者等等。很好奇，到底是什么样的方法，难道是钞潜能？

低代码

2021 年被称为低代码平台平台年，首先是有大量的资本涌入，比如说 OutSystems 在 2 月份的这时候拿到了新一轮的融资，高达 1.5 亿美元；明道云是在 7 月份也拿到了近亿元的投资，相当于一个小目标，他的创始人也非常的激动，写了一个近万字的感谢信；同时腾讯、阿里、致远、金蝶、用友等厂商纷纷入局。

为啥搞了那么多年不温不火的低代码，在 2021 年开始变热了呢？

有一个很重要的原因就是因为疫情的，原本线下的组织工作需要迁移到线上，需求一下子就井喷了，程序员开始不够用了。

疫情期间，实施入口管控，患者分流，防止院内交叉传染是医院防控组织工作的重中之重。内蒙古呼伦贝尔市人民医院信息科主任张布林仅用三天时间，就为医院开发了“预检分诊系统”，实现患者信息采集和预检分诊流程的数字化。

同样是疫情期间，斯科特·斯潘多利尼（Scott Spendolini）基于低代码平台，也仅用了两天时间就推出了基于Web的每日超市库存查询应用，帮助美国得州奥斯汀市那些焦虑不安的消费者了解周边商店的库存情况。

元银河系

最后，来聊一聊元银河系，2021 年觉得是元银河系的刷屏年，那对于前端来说，元银河系都有哪些机会呢？

1. 基于 WebXR 开发许多应用

WebXR 是个标准，制定了许多 Api 规范，通过这些 Api 是个能让你通过 web 技术来实现许多 VR 、AR 的应用，简单来说就像开发网页一样开发 VR、AR 应用，而不需要去下载专门的 App，注意 WebXR 中的「XR」表示 VR 和 AR。

现在 WebXR 应用还是一片蓝海，大家能在海边捡到许多贝壳。

2. 参与开源项目

比如说开源项目 three.ar.js，这个是3d引擎three.js 的 ar 版，是一个用来在 WEB 上开发 AR 应用的库：

有兴趣的同学能加入一起建设，现在投入的每行代码，未来可能都会影响上千万用户，但是收益会较为慢。

多了解元银河系，成为这个应用领域专家，才能在它到来的这时候发挥许多作用。

总结

我们帮大家回顾了下 2021 年前端的许多重点，但是我们回顾的目的并非为了去记忆这些重点，毕竟又没有这方面的期末考试，我们之所以回顾重点，是希望能够站在当下看未来。

– EOF –

1、W3C 成立元银河系组织工作组！

2、使用 Rust 编写更快的 React 组件

3、对话Svelte未来，Rust 编译器？构建大型应用?

觉得本文对你有帮助？请撷取给更多人

点赞和在看就是最大的支持❤️