2021 年已經過去，這一年前端發生了很多的事情，有些事情還是值得回味一下，甚至可以發現一些新的東西，那下面我們就幫大家圈了 2021 年前端行業的重點，溫故而知新，更加從容的迎接新一年的挑戰！
React
自從上一年釋出了 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 正式釋出之後，就可以開門接客了。
Vite
尤雨溪在 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 服務呢：
這樣就可以在聯調和測試環境，享受到極速的編譯，部署起來就會很快。
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. 頁面執行時不需要載入框架本身：
可以這麼做的原因是它會在編譯時將元件所需要的執行時程式碼打包在元件內部（會剔除掉絕大部分無用的），因此元件可以獨立的執行不需要藉助外部模組，比如如下的模板：
<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 服務，有興趣的同學可以加入我們一起來創造未來！
位元組跳動資料平臺前端團隊，在公司內負責大資料相關產品的研發。我們在前端技術上保持著非常強的熱情，除了資料產品相關的研發外，在資料視覺化、海量資料處理優化、web excel、WebIDE、私有化部署、工程工具都方面都有很多的探索和積累，有興趣可以與我們聯絡。
加入我們請投遞簡歷：https://job.toutiao.com/s/8hXRvjY