关于前端:2021前端回顾

5次阅读

共计 3890 个字符，预计需要花费 10 分钟才能阅读完成。

昵称：前端大魔王
又到了一年的开始，2021 年曾经过来，这一年前端产生了很多的事件，有些事件还是值得回味一下，甚至能够发现一些新的货色，那上面咱们就帮大家圈了 2021 年前端行业的重点，温故而知新，更加从容的迎接新一年的挑战！

自从上一年公布了 React17 之后，团队貌似就有些划水的嫌疑，2021 年次要和其余贡献者进行了一些敌对碰面，比方在布宜诺斯艾利斯（阿根廷首都）的团聚：

以及给字节跳动做直播分享：

工作上次要是在修复 React17 的 bug，但其实修复的也不是很多，目前只发了两个修补版本号，最新版本是 V17.0.2，一年只发了两个 patch 版本，工作量显然有余，年初绩效就很为他们感到放心。

抱着狐疑的态度，比拟优良的人总是自驱的，怎么会划水呢？于是翻了下 Dan Abramov 的牌子（gitHub 提交记录），这哥们是 React 的核心成员，在 React 也待了 5 年之久，很具备代表性，他往年的工作次要是推动 Reac18。

React18 提供了很多 Concurrent 个性能力，能够对页面的渲染工作的优先级进行治理，使页面的交互更敌对，举个例子，比方页面上有个搜寻框，某一次搜寻时加载了过多的数据，那在渲染的时候，页面会被卡住，你点击页面上搜寻框就会没反馈。

这时，你能够利用 Concurrent 提供的一些能力，把点击的事件处理优先级调高一些，而后渲染就会被中断，会优先解决点击事件，给用户反馈就是：看，它动了！

React18 在上个月（十一月）16 号终于公布了 beta 版本，置信在 2022 年初大家就有新货色能够学习了，真替大家感到开心！

Dan Abramov 推动的另外一件事是 Service Component，它容许你在服务器渲染组件，而后 Client 端加载显示：

这个的次要益处是能够缩小 js 打包文件大小，例如上面的代码：

import marked from 'marked' // 35.9 k
import sanitizeHtml from 'sanitize-html'; // 206 k
const MarkdownView = () => {return <div>{sanitizeHtml(marked(text))}</div>
}

如果放在浏览器渲染，就须要加载 marked 和 sanitizeHtml 两个库，然而如果放到服务端渲染，就只须要加载渲染后的 html 就行了，速度会快上许多，这个我感觉是前端成为全栈工程师的又一个入口。

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

咱们能够预测，将来大概率会呈现一个公共的 Service Component 服务，来对立提供各种组件资源：

有趣味的同学能够提前布局建设，等到 Service Component 正式公布之后，就能够开门接客了。

尤雨溪在 2 月 17 号公布了 Vite2：

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

Vite2 能够说是又给 bundless 打了一针鸡血，目前各大公司都踊跃跟进中，比方阿里巴巴的 icejs 和字节跳动的 eden 两大框架就同时反对了 webpack 和 ice 模式。

另外，像 vite 的这种 bundless 打包形式，次要依附的是浏览器对 esm 的导入导出形式的反对，形如：

import lodash from 'lodash'

在理论运行时，会发送一个申请加载 lodash 资源，既然如此，那就能够搭建一个 CDN 将所有的第三方资源寄存在下面，供互联网所有的网页应用：

import lodash from 'https://xxx/lodash'

2021 年倒退比拟迅猛的 CDN 是 Skypack：

目前前端我的项目的公布过程如下：

如果应用 skypack，依赖包装置阶段将来可能将不须要，同时编译也会快很多，因为不须要将依赖包编译进去。

那这样的一个 CDN，对于大公司而言，思考到平安、稳固以及不便保护等等起因，更可能的是会搭建本人搭建一套，所以妥妥的是个基建风口。

目前 Vite 曾经有 130 万的月下载量，一些本来依赖 webpack 尤其是新的框架也在拥抱 Vite，vue3 也会将 Vite 作为模式配置，所以很看好 Vite 的将来，不过 Vite 有个弊病，就是他的后盾服务是启动在本地的，所以只能在本地享受到比拟快的编译速度，不过，为啥咱们不搭建一个公共的 Vite 服务呢：

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

Vue3 是上一年公布的，那往年次要就是疯狂的修复 bug 和发新版本，目前 Vue3 的最新版是：V3.2.26，一年间发了将近 60 个版本，均匀每周发一点几个版本，从尤雨溪的 gitHub 提交记录能够看到：

这个人工作十分的勤勉，而且在周六日也常常提交代码，而这所有，都是为了让大家在 2022 年有新货色学习！

从下面的 Github 提交记录能够看到，10 月和 11 月产量比拟少，可能是因为作者移民到新加坡耽搁的，为啥要移民新加坡呢，可能是因为新加坡的个人所得税比拟低（最高 20%）。

Vue3.2 次要提供的性能是反对 Web Component，你能够通过 Vue 写一个组件，通过编译之后，能够不依赖任何框架运行在浏览器中：

因为不依赖框架，置信页面的渲染会快很多，这样大家就能够省下一些工夫学习新货色了。

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

Reactive 是 Rich 的第一个开源我的项目，运气不好的事是公布不久 React 就公布了，尽管很致力的保护，但无奈还是被 React 给拍死了，而且其残骸还为 Vue 做了嫁衣（Vue 借用了 Reactive 外面的一些思维）。

sveltejs 和 Vue、Angular、React 很相似，都是用来开发前端页面的框架，然而 sveltejs 通过两种形式让页面运行起来更快更晦涩：

1. 页面运行时不须要加载框架自身：

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

<a>{{msg}}</a>

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

function render(root, parent) {var a = document.createElement('a');
    a.innerText = root.msg;
    parent.appendChild(a);
    return {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 年前端的一些重点，然而咱们回顾的目标不是为了去记忆这些重点，毕竟又没有这方面的期末考试，咱们之所以回顾重点，是心愿可能站在当下看将来，文章提了我集体的一些想法，比方公共 Service Component 服务以及公共 Vite 服务，有趣味的同学能够退出咱们一起来发明将来！

正文完