React

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

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

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

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

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

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

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

Dan Abramov 推動的另外一件事是 Service Component，它允許你在服務(wù)器渲染組件，然后 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 兩個庫，但是如果放到服務(wù)端渲染，就只需要加載渲染后的 html 就行了，速度會快上許多，這個我覺得是前端成為全棧工程師的又一個入口。

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

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

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

Vite

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

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

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

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

import lodash from 'lodash' 

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

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

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

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

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

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

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

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

Vue

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

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

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

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

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

sveltejs

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

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

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

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

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

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

在編譯之后會轉(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. 沒有虛擬 DOM 成本：

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

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

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

低代碼

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

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

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

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

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

元宇宙

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

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

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

WebXR 是個標(biāo)準(zhǔn)，制定了一些 Api 規(guī)范，通過這些 Api 是個可以讓你通過 web 技術(shù)來實(shí)現(xiàn)一些 VR 、AR 的應(yīng)用，簡單來說就像開發(fā)網(wǎng)頁一樣開發(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，這個是3d引擎three.js 的 ar 版本，是一個用來在 WEB 上開發(fā) AR 應(yīng)用的庫：

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

多了解元宇宙，成為這個領(lǐng)域?qū)＜?，才能在它到來的時候發(fā)揮一些作用。

總結(jié)

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