React

自從上一年發(fā)布了 React17 之后，團(tuán)隊(duì)貌似就有些劃水的嫌疑，2021 年主要和其他貢獻(xiàn)者進(jìn)行了一些友好碰面，比如在布宜諾斯艾利斯（阿根廷首都）的聚會(huì)：

以及給字節(jié)跳動(dòng)做直播分享：

工作上主要是在修復(fù) React17 的 bug，但其實(shí)修復(fù)的也不是很多，目前只發(fā)了兩個(gè)修補(bǔ)版本號(hào)，最新版本是 V17.0.2，一年只發(fā)了兩個(gè) patch 版本，工作量顯然不足，年終績(jī)效就很為他們感到擔(dān)心。

抱著懷疑的態(tài)度，比較優(yōu)秀的人總是自驅(qū)的，怎么會(huì)劃水呢？于是翻了下 Dan Abramov 的牌子（gitHub 提交記錄），這哥們是 React 的核心成員，在 React 也待了 5 年之久，很具有代表性，他今年的工作主要是推進(jìn) Reac18。

React18 提供了很多 Concurrent 特性能力，可以對(duì)頁(yè)面的渲染任務(wù)的優(yōu)先級(jí)進(jìn)行管理，使頁(yè)面的交互更友好，舉個(gè)例子，比如頁(yè)面上有個(gè)搜索框，某一次搜索時(shí)加載了過(guò)多的數(shù)據(jù)，那在渲染的時(shí)候，頁(yè)面會(huì)被卡住，你點(diǎn)擊頁(yè)面上搜索框就會(huì)沒(méi)反應(yīng)。

這時(shí)，你可以利用 Concurrent 提供的一些能力，把點(diǎn)擊的事件處理優(yōu)先級(jí)調(diào)高一些，然后渲染就會(huì)被中斷，會(huì)優(yōu)先處理點(diǎn)擊事件，給用戶反應(yīng)就是：看，它動(dòng)了！

React18 在上個(gè)月（十一月）16號(hào)終于發(fā)布了 beta 版本，相信在 2022 年初大家就有新東西可以學(xué)習(xí)了，真替大家感到開心！

Dan Abramov 推動(dòng)的另外一件事是 Service Component，它允許你在服務(wù)器渲染組件，然后 Client 端加載顯示：

這個(gè)的主要好處是可以減少 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 兩個(gè)庫(kù)，但是如果放到服務(wù)端渲染，就只需要加載渲染后的 html 就行了，速度會(huì)快上許多，這個(gè)我覺(jué)得是前端成為全棧工程師的又一個(gè)入口。

另外的一個(gè)好處就是組件在服務(wù)端調(diào)用接口也會(huì)快很多，畢竟走的是內(nèi)網(wǎng)。

我們可以預(yù)測(cè)，未來(lái)大概率會(huì)出現(xiàn)一個(gè)公共的 Service Component 服務(wù)，來(lái)統(tǒng)一提供各種組件資源：

有興趣的同學(xué)可以提前規(guī)劃建設(shè)，等到 Service Component 正式發(fā)布之后，就可以開門接客了。

Vite

尤雨溪在 2 月 17 號(hào)發(fā)布了 Vite2：

熱愛(ài)學(xué)習(xí)的網(wǎng)友喜大普奔：

Vite2 可以說(shuō)是又給 bundless 打了一針雞血，目前各大公司都踴躍跟進(jìn)中，比如阿里巴巴的 icejs 和 字節(jié)跳動(dòng)的  eden 兩大框架就同時(shí)支持了  webpack 和  ice 模式。

另外，像 vite 的這種 bundless 打包方式，主要依靠的是瀏覽器對(duì) esm 的導(dǎo)入導(dǎo)出方式的支持，形如：

import lodash from 'lodash' 

在實(shí)際運(yùn)行時(shí)，會(huì)發(fā)送一個(gè)請(qǐng)求加載 lodash 資源，既然如此，那就可以搭建一個(gè) CDN 將所有的第三方資源存放在上面，供互聯(lián)網(wǎng)所有的網(wǎng)頁(yè)使用：

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

2021 年發(fā)展比較迅猛的 CDN 是 Skypack：

目前前端項(xiàng)目的發(fā)布過(guò)程如下：

如果使用 skypack，依賴包安裝階段未來(lái)可能將不需要，同時(shí)編譯也會(huì)快很多，因?yàn)椴恍枰獙⒁蕾嚢幾g進(jìn)去。

那這樣的一個(gè) CDN，對(duì)于大公司而言，考慮到安全、穩(wěn)定以及方便維護(hù)等等原因，更可能的是會(huì)搭建自己搭建一套，所以妥妥的是個(gè)基建風(fēng)口。

目前 Vite 已經(jīng)有 130 萬(wàn)的月下載量，一些原本依賴 webpack 尤其是新的框架也在擁抱 Vite，vue3 也會(huì)將 Vite 作為模式配置，所以很看好 Vite 的未來(lái)，不過(guò) Vite 有個(gè)弊端，就是他的后臺(tái)服務(wù)是啟動(dòng)在本地的，所以只能在本地享受到比較快的編譯速度，不過(guò)，為啥我們不搭建一個(gè)公共的 Vite 服務(wù)呢：

這樣就可以在聯(lián)調(diào)和測(cè)試環(huán)境，享受到極速的編譯，部署起來(lái)就會(huì)很快。

Vue

Vue3 是上一年發(fā)布的，那今年主要就是瘋狂的修復(fù) bug 和發(fā)新版本，目前 Vue3 的最新版是：V3.2.26，一年間發(fā)了將近 60 個(gè)版本，平均每周發(fā)一點(diǎn)幾個(gè)版本，從尤雨溪的 gitHub 提交記錄可以看到：

這個(gè)人工作非常的勤勉，而且在周六日也經(jīng)常提交代碼，而這一切，都是為了讓大家在 2022 年有新東西學(xué)習(xí)！

從上面的 Github 提交記錄可以看到，10 月和 11 月產(chǎn)量比較少，可能是因?yàn)樽髡咭泼竦叫录悠碌⒄`的，為啥要移民新加坡呢，可能是因?yàn)樾录悠碌膫€(gè)人所得稅比較低（最高20%）。

Vue3.2 主要提供的功能是支持 Web Component，你可以通過(guò) Vue 寫一個(gè)組件，經(jīng)過(guò)編譯之后，可以不依賴任何框架運(yùn)行在瀏覽器中：

由于不依賴框架，相信頁(yè)面的渲染會(huì)快很多，這樣大家就可以省下一些時(shí)間學(xué)習(xí)新東西了。

sveltejs

sveltejs 作者是 Rich Harris，這個(gè)人同時(shí)也是 Ractive, Rollup 和 Buble 的作者，堪稱前端界的輪子哥，那 2021 年他為他的新輪子 sveltejs 找了個(gè)大靠山。

Reactive 是 Rich 的第一個(gè)開源項(xiàng)目，運(yùn)氣不好的事是發(fā)布不久 React 就發(fā)布了，雖然很努力的維護(hù)，但無(wú)奈還是被 React 給拍死了，而且其殘骸還為 Vue 做了嫁衣（Vue 借用了 Reactive 里面的一些思想）。

sveltejs 和 Vue、Angular、React 很類似，都是用來(lái)開發(fā)前端頁(yè)面的框架，但是 sveltejs 通過(guò)兩種方式讓頁(yè)面運(yùn)行起來(lái)更快更流暢：

1. 頁(yè)面運(yùn)行時(shí)不需要加載框架本身：

可以這么做的原因是它會(huì)在編譯時(shí)將組件所需要的運(yùn)行時(shí)代碼打包在組件內(nèi)部（會(huì)剔除掉絕大部分無(wú)用的），因此組件可以獨(dú)立的運(yùn)行不需要借助外部模塊，比如如下的模板：

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

在編譯之后會(huì)轉(zhuǎn)換為如下類似代碼：

function render(root, parent) { 
 
var a = document.createElement('a'); 
 
a.innerText = root.msg; 
 
parent.appendChild(a); 
 
return { 
 
update: root => a.innerText = root.msg; 
 
}; 
 
} 

2. 沒(méi)有虛擬 DOM 成本：

sveltejs 的所有操作都是直接處理真實(shí) DOM，沒(méi)有虛擬 DOM 的 diff 和 patch 成本。

sveltejs 目前的最大弊端是隨著項(xiàng)目組件到達(dá)一定程度，項(xiàng)目代碼會(huì)超過(guò)其他框架，對(duì)此 Rich 表示正在憋大招。

最后說(shuō)下他的靠山，Guillermo Rauch（Vercel 創(chuàng)始人），號(hào)稱前端網(wǎng)紅收割機(jī)，除了 Rich，他還為 Vercel 分別招募到了 Tobias（前Webpack作者）、Donny（SWC）作者等等。很好奇，到底是什么樣的方法，難道是鈔能力？

低代碼

2021 年被稱為低代碼平臺(tái)平臺(tái)年，首先是有大量的資本涌入，比如 OutSystems 在 2 月份的時(shí)候拿到了新一輪的融資，高達(dá) 1.5 億美元；明道云是在 7 月份也拿到了近億元的投資，相當(dāng)于一個(gè)小目標(biāo)，他的創(chuàng)始人也非常的激動(dòng)，寫了一個(gè)近萬(wàn)字的感謝信；同時(shí)騰訊、阿里、致遠(yuǎn)、金蝶、用友等廠商紛紛入局。

為啥搞了那么多年不溫不火的低代碼，在 2021 年開始變熱了呢？

有一個(gè)很重要的原因就是因?yàn)橐咔榈?，原本線下的工作需要遷移到線上，需求一下子就井噴了，程序員開始不夠用了。

疫情期間，實(shí)施入口管控，患者分流，防止院內(nèi)交叉?zhèn)魅臼轻t(yī)院防控工作的重中之重。內(nèi)蒙古呼倫貝爾市人民醫(yī)院信息科主任張布林僅用三天時(shí)間，就為醫(yī)院開發(fā)了“預(yù)檢分診系統(tǒng)”，實(shí)現(xiàn)患者信息采集和預(yù)檢分診流程的數(shù)字化。

同樣是疫情期間，斯科特·斯潘多利尼（Scott Spendolini）基于低代碼平臺(tái)，也僅用了兩天時(shí)間就推出了基于Web的每日超市庫(kù)存查詢應(yīng)用，幫助美國(guó)得州奧斯汀市那些焦慮不安的消費(fèi)者了解周邊商店的庫(kù)存情況。

元宇宙

最后，來(lái)聊一聊元宇宙，2021 年覺(jué)得是元宇宙的刷屏年，當(dāng)然鄙人也靠著敏銳的投資嗅覺(jué)投資了元宇宙的相關(guān)行業(yè)，賺了一些生活費(fèi)：

慚愧，才勉強(qiáng)跑贏通貨膨脹，那對(duì)于前端來(lái)說(shuō)，元宇宙都有哪些機(jī)會(huì)呢？

1. 基于 WebXR 開發(fā)一些應(yīng)用

WebXR 是個(gè)標(biāo)準(zhǔn)，制定了一些 Api 規(guī)范，通過(guò)這些 Api 是個(gè)可以讓你通過(guò) web 技術(shù)來(lái)實(shí)現(xiàn)一些 VR 、AR 的應(yīng)用，簡(jiǎn)單來(lái)說(shuō)就像開發(fā)網(wǎng)頁(yè)一樣開發(fā) VR、AR 應(yīng)用，而不需要去下載專門的 App，注意 WebXR 中的「XR」表示 VR 和 AR。

現(xiàn)在 WebXR 應(yīng)用還是一片藍(lán)海，大家可以在海邊撿到很多貝殼。

2. 參與開源項(xiàng)目

比如開源項(xiàng)目 three.ar.js，這個(gè)是3d引擎three.js 的 ar 版本，是一個(gè)用來(lái)在 WEB 上開發(fā) AR 應(yīng)用的庫(kù)：

有興趣的同學(xué)可以加入一起建設(shè)，現(xiàn)在投入的每行代碼，未來(lái)可能都會(huì)影響上千萬(wàn)用戶，但是收益會(huì)比較慢。

多了解元宇宙，成為這個(gè)領(lǐng)域?qū)＜遥拍茉谒絹?lái)的時(shí)候發(fā)揮一些作用。

總結(jié)

我們幫大家回顧了下 2021 年前端的一些重點(diǎn)，但是我們回顧的目的不是為了去記憶這些重點(diǎn)，畢竟又沒(méi)有這方面的期末考試，我們之所以回顧重點(diǎn)，是希望能夠站在當(dāng)下看未來(lái)，文章提了我個(gè)人的一些想法，比如公共 Service Component 服務(wù)以及公共 Vite 服務(wù)，有興趣的同學(xué)可以加入我們一起來(lái)創(chuàng)造未來(lái)！