聚焦大前端領域，幫助你精準掌握核心發展脈絡！

本文聚焦在大前端領域在2021 年的重要進展、動態，希望能幫助你準確掌握2021 年大前端領域的核心發展脈絡，在業界始終保持足夠的技術敏銳度。

這篇文章伊始，先讓我們對大前端領域整體有個知覺。大前端發展至今，到底處在一個怎樣的階段？

1、大前端：趨於穩定，未來可期

總結來說，目前的大前端領域本身趨於穩定階段，框架特性變少，各種輪子變少，很少出現能夠讓人眼睛一亮的東西。

目前的前端階段屬於從標準化向成熟探索的初期

這個階段更多的是向著精細化探索，注重討論如何將之前的東西做細、效果做得更好，很多技術方向開始進行細分，例如視覺化、工程化等更垂類的領域在目前備受關注。在此過程中，各個方向仍需要進一步做技術突破和完善，並且相較從 0 到 1 的過程，從 1 到 100 的過程更加關山難越。當然從另一方面來看，持續的精細化探索過程中也帶來了更多未知，所以前端整體來說還是一個讓人憧憬的領域。

接下來，本文將圍繞著目前大前端領域關注度比較高的幾個方向來逐一展開本年度的趨勢解讀。

2、重點技術方向盤點

#跨端技術：Flutter 或成主流方案

對於跨端技術，需要分成兩部分來談，一方面是“端”，另一方面則是“技術”。

第一，在「端」的方面，今年我們需要感知兩個變化：

• #鴻蒙2.0 於今年6 月正式發布，Taro 跨端框架已發布新版支持適配鴻蒙系統，未來，鴻蒙適配需引起重點關注；

• #今年6 月份，Facebook 宣布改為「Meta」將「元宇宙」推上一個新高度，同時再次推動了VR/AR 等配套設施的建設，因此對於大前端領域來說，愈來愈普及的VR/AR 設備的端技術也需引起重點關注。

第二，對於「技術」方面，跨端技術層出不窮，但不可否認的是面對複雜的業務場景時，跨端框架在效能和體驗上仍然無法達到與Native 等同的效果。不過，在降本增效的大前提下，跨端技術還是目前的重點關注方向之一。

今年，比較需要重點關注的是：

• Flutter 2.0 正式支援 Web 端。 Flutter 近年來在國內關注度越來越高，許多大廠都有相關實踐，甚至今年來看勢頭已經趕超React Native，或將成為跨端技術的主流方案，因此它的相關新特性需要重點關注;

• 今年，各大廠商加速小程式端的佈局，小程式可能成為下一個廠商互相追逐的市場。因為目前App 的流量已經基本見頂，再去開發一個「國民級」的App 已經不太可能，所以將App 作為作業系統，以小程式去帶動用戶，形成用戶閉環，可能會成為下一步各家搶佔流量的關鍵。不過目前小程式還不算特別成熟，沒有一個完善的標準成為其面臨的最大問題，這一點又是否會在即將到來的 2022 年解決呢？

框架：三架馬車仍占主導

#根據Stackoverflow 的2021 年開發者調查，JavaScript 已連續第八年成為使用最多的語言，有67.7% 的受訪者選擇它，不誇張地說，JavaScript 目前依舊稱霸web前端。基於這個大背景，我們已經習慣看到 React、Angular 和 Vue 等 JavaScript 框架佔據主導地位。三大框架今年需要關注的新特性或新動態如下：

• React：今年討論比較多的是React 18，目前已進入RC 階段，預計在2022 年初發布正式版本。 18 帶來了一些新的特性，如：Suspense SSR 正式發布，實現基於並發的渲染。另外 React 在年初發布了 react server component，目前看還沒大規模普及使用，價值需要進一步驗證。

• Vue：Vue 在去年九月發布了3.0 版本，在開發之初尤雨溪原本計劃在穩定之初後兼容IE11，然而隨著IE 11 全球使用率逐步下降，在今年年初，尤雨溪宣布Vue 3 將不再支援IE11。從中，也不難推斷 IE 瀏覽器或將在 2022 年退出歷史舞台，未來前端相容負擔將會減少。

• Angular：Angular 一般每半年左右發布一個大版本，今年發布的大版本為 Angular 12 和 Angular 13。 Angular 12 的新特性包括空值合以及棄用 View Engine 等；Angular 13 的新特性包括全面啟用新編譯和渲染引擎 Ivy 以及宣布不再支援 IE11。

當然，一些有潛力的框架同樣值得關注，這裡舉個例子：Svelte。之所以推薦它，是因為它位居某乎高讚回答，諸多大佬對於 Svelte 的實踐進行了熱烈討論，今年它的關注度不可謂不高，值得大家學習。

這裡也引用尤雨溪等諸位大佬的回答為大家做總結。 Svelte 是一個元件框架，核心思想在於“透過靜態編譯來減少框架運行時的程式碼量”，相較於React 以及Vue 等它最大的區別是編譯時與運行時，在建置時會將元件轉換成高效率執行的命令程式碼，使得更新Dom 更有效率，提供了更好的使用者體驗。 Svelte 可以單獨使用，也可以與其他框架結合使用來產生 Web 應用程式。

當然，目前看來Svelte 也有潛在問題：

• 雖然在簡單的DEMO 裡面程式碼量確實非常小，但同樣的元件模板，操作產生的程式碼量會比VDOM 渲染函數大，多個元件中會有很多重複的程式碼。

• Svelte 在大型應用程式中的效能仍有待觀察，尤其是在大量動態內容和嵌套元件的情況下。

• Svelte 的編譯策略決定了它跟著 VDOM 絕緣。

微前端：逐漸普及

所謂微前端的概念，其實類似於微服務之於後端，前端業務在發展到在一定規模之後，也需要一種用來分解複雜度的架構模式，於是出現了微服務思想在前端領域的應用，也就是微前端。它將前端應用拆分成一個更小、更簡單的能夠獨立開發、測試、部署的小塊，並明確它們之間的依賴關係。

今年整體看微前端的話，已經算得上普及。在 single-spa、qiankun 這些老牌的微前端解決方案之外，國內有很多新的微前端解決方案開源出來。

這主要得益於 Webpack 5 支援 Module Federation 特性，讓 JavaScript 應用程式在執行時從另一個應用程式動態導入程式碼，而這個特性讓微前端架構具備巨大的潛力。還有基於 ESM、WebComponent 這些從 Web 標準層面著手，提供開發者實現微前端架構。

也因為實現微前端的方案很多，所以各大廠均推出了各自的微前端解決方案，如京東的 MicroApp 、字節的 Garfish 、歡聚時代的 EMP2.0 等。

Serverless：建構基底建置是重點

Serverless，全名為Serverless Computing（無伺服器運算），又稱為FaaS（Function-as-a-Service，函數即服務），是雲端運算的一種模式。在 Serverless 概念下， 運算資源以服務而非伺服器的形式出現。對於開發者而言，基於 Serverless 的應用程式部署可以在服務層級實現，而無需過度關心伺服器的問題，這也增加了軟體開發、軟體迭代效率。

Serverless 並不是近幾年才開始興起的新概念。 2006 年，Zimki 公司便創立了第一個「按照實際呼叫付費」提供服務端JavaScript 應用的平台，發展到目前，Serverless 還是在穩步推進中，今年的重點在構建基建，基於Serverless 的前後端一體化將是大勢所趨。

這裡重點介紹一個開源框架 Midway Serverless ，開源框架 Midway Serverless 是 Midway 產出的一套面向 Serverless 雲端平台的開發方案，在今年三月發布了第二個大版本 2.0。在

2.0 版本中，其新特性為應用函數一體、前端和後端一體，使開發效率更高，可以預見未來隨著Midway Serverless 更好地適配各雲廠商，其將會是這個領域的領導者。

Node.js：平穩發展，查缺補

Node.js 是2009 年的時候由大神Ryan Dahl 開發，它的誕生給前端帶來了一個大驚喜，畢竟它直接讓JavaScript 可以前後「通吃」。所以今天 Node.js 也成為了 Web前端開發 必備的基礎設施。

今年在 Node.js 原始碼更新內容上來看，整體上處於平穩發展、查缺補漏階段，並沒有大的變更，但在易用性和好用性上有很大提升。

其社群在今年也並無太多動態，這裡我們簡單回顧近兩年值得關注的兩件大事：

Node.js 基金會和JS 基金會合併為OpenJS 基金會

#

2019 年 3 月，Node 基金會在 Medium 上宣布，Node.js 基金會和 JS 基金會合併為 OpenJS 基金會。 OpenJS 基金會旨在提供一個中立的組織來託管專案並協助資助有益於整個生態系統的活動，從而促進 JavaScript 和 Web 生態系統的健康發展。

官方表示，一方面，透過增加JavaScript 生態系統和附屬標準組織之間的協作，OpenJS 基金會可以更有效地為JavaScript 生態中的任意專案創建更具活力的家，滿足他們的基礎架構、技術和行銷需求。

另一方面，兩個組織的合併將有助於簡化基金會的日常運營，在努力實現互補目標的同時盡量減少冗餘。這也將提供一個改善成員參與的機會，並避免潛在成員在做選擇時糾結和混淆。

在成立之初，OpenJS 基金會包含 29 個開源 JavaScript 項目，包括 jQuery、Node.js、Appium、Dojo 和 Webpack 等。 2020 年，Electron 宣布正式成為 OpenJS 基金會的 Impact 計畫。

社群有多個活躍工作小組

工作小組由 Technical Steering Committee (TSC) 創建，目前一共有 10 個工作小組。

當然，提到 Node.js 就必須提號稱要取代它的 Deno。

Deno 很好地克服了Node.js 的主要缺點，如安全漏洞和套件管理問題，也整合了許多工具，可以方便開發人員進行測試、調試，所以Deno 的前景還是相當不錯的，但目前來看其取代Node.js 在三到五年內看不到希望。原因在於一方面 Node.js 的佔有率太高，生態也夠完善，基本上屬於想要什麼功能都能在社群中找到。

另一方面，Deno 雖然打著解決去node_module 模組的旗號，但是感覺用力過猛，這種不相容的方式直接放棄了Node.js 豐富的生態體系，使得Deno 短期內幾乎不可能代替Node.js。

前端工程化：降本增效是大方向

前端工程化是使用軟體工程的技術與方法來進行前端的開發流程、技術、工具、經驗等規範化、標準化，其主要目的為了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重複工作時間，從本質上來說，前端工程是軟體工程的一種。

前端工程化是個很大的概念，這篇只細化到其中的編譯構建環節，這個環節今年有兩點需要重點關注：

一是 Vite。 Vite 是 Vue 的作者尤雨溪在開發 Vue3.0 的時候開發的一個基於原生 ES-Module 的前端建置工具。其本人在後來對 Vue3 的宣傳中對自己的新作品 Vite 讚不絕口，並表示自己 」再也回不去 Webpack 了「 。目前來看，Vite 的確有望成為最好、最快的前端開發建置工具。

今年二月Vite 2.0 發布，帶來了大量改進：

• 多框架支援

• 全新插件機制和API

• 基於esbuild 的依賴預打包

• #更好的CSS 支援

• 服務端渲染(SSR) 支援

• 舊瀏覽器支援

二是Rust 在前端工具鏈的影響越來越大。目前可以看到 Next.js 在 Rust 上“重倉”，包括其招攬了大量人才，包括 SWC 作者、Rollup 作者等。

在今年十月份，Next.js 團隊宣布 12 版本發布。其新功能如下：

• 採用Rust 編譯器：重新整理速度提升3 倍、建置速度提升約5 倍

• Middleware (beta) ：透過設定程式碼在Next.js 中實現完全的靈活性

• React 18 支援：支援Suspense 、 React Server Components 等新特性

• #AVIF 支援：選擇縮小20% 的圖片

• Bot-aware ISR Fallback ：為網路爬蟲最佳化SEO

• # #原生ES 模組支援：與標準化的模組系統保持一致

• URL Imports (alpha) ：支援從任何URL 匯入套件（例如CDN），無需透過npm 安裝

Next.js 12 開始全面使用SWC 和Rust 取代Babel，這使它大概提高了3 倍的刷新速度和5 倍的建置速度。可以預見的是未來將會有越來越多的工具基於 Rust 重寫，以獲得更快的建置打包速度。

低程式碼：價值已獲認可

低程式碼同樣也是近兩年非常熱的一個概念，今年可以看到的國內雲廠商都在發力低程式碼，如宜搭、AppCube 低程式碼平台、微搭等。

就宜搭舉例來說，其在特定場景是能夠解決問題的，據說某 PD 就是用宜搭完成所有產品功能。這說明，低程式碼本身的價值還是被大家認可的，並且能夠真正得以運用，不過低程式碼到底有多大的用處？至少從現在看來，對專業開發者來說成效並不大。

對於低程式碼來說，搭建在業務域裡是複雜的。但從技術上說，其實並不復雜，拖曳僅限於模組級別，核心就三個難點：

• 隨便哪個DnD 拖曳模組都能搞定，例如Fabric；

• 營運可設定的Schema 如何配置，這塊有開源的Formly 和Form-Render；

• 模組的載入器和頁面渲染機制，如果只是單一技術堆疊的話，其這點其實也是很好解決的。

所以目前看來搭建的成本很低，還只是前端編寫程式碼的模組生產方式，接下來視覺化產生模組，解決邏輯視覺化(imove)、狀態視覺化（xstate）和多狀態視圖（stateview）問題，做到真正的低程式碼產生模組才是接下來的趨勢。

即時音視頻：5G 時代前景廣闊

實時音視頻是比較垂類的一個方向，之所以與大家分享，是因為在5G 的廣泛應用下，影音技術得以快速發展，影音即時互動在多個領域中都得到了廣泛的應用，如線上會議、線上教育等等。

那麼今年來看，即時音視訊方面有哪些值得關注的動態呢？這裡為大家分享兩點：

一是早在去年，聲網就注意到以 Apple 為代表的工業界就已經開始在佈局空間音訊的基礎設施建設。從擷取側的雙聲道擷取的能力，到播放側的多聲道播放能力，再到結合 AirPods Pro 系列的 world-locked 能力，似乎在 Apple 的生態系統中，空間音訊的舞台已經搭建完成。今年，Apple 進一步開放相關空間音訊介面給開發者，部分廠商也陸續開發了空間音訊能力來提供更強的沉浸感。

二是在今年年初業界首發的語音 AI codec lyra 給沉寂已久的編解碼圈帶來了一股新的潮流。後續各家陸續發布語音 AI coedc 也從不同的底層技術視角驗證了使用算力換取碼率的可行性。

在今年年中發布的 SoundStream 也在 Demo 級別證明了超低碼率音訊編解碼的路看起來是通的。畢竟在今年年初，絕大多數音訊從業者都無法相信 3kbps 能夠編碼出「可以聽」的音樂訊號。

3、低頭拉車，抬頭看路

#回望今年整年，科技圈發生的幾件大事同樣也對大前端領域產生或多或少的影響。

第一，反壟斷。前邊說道，反壟斷帶來的影響：首先，對小程式來說，它會促使各大廠商進一步加速小程式的佈局，同時推進小程式相關標準等製定；其次，裝置的API 未來可能會有很強的管控策略。目前其實很多公司都在做這件事，也就是 API 的梳理、權限的治理，這是否會促使這個方向未來制定相關標準呢？並非沒有可能。最後，國內網路流量見頂，佈局全球化成為必然。例如印度等國家，相對來說基礎建設與我們還是有一定差距的，因此，到國外掘金或將成為未來一個大趨勢。

第二，國際化。國際化帶來的影響很簡單，無論是大小公司，在技術棧確定之初，就需要考慮語言問題、合規的問題以及不同市場發布等問題，為將來進入國際市場做好相關準備。

第三，元宇宙。雖然目前看來還很虛，但畢竟再次也帶動了 VR/AR 相關配套設施的發展，VR/AR 這次是否會大量普及並且走向成熟？這一點並不能妄下推論說一定不會，反而我們需要考慮到適配 VR/AR 等各種新興設備也許正是端技術下一個新突破所在。

4、寫在最後

提起大前端，時常看到很多技術人吐槽太「卷」了，究其原因，無外乎還是說前端入門門檻低，技術更新頻率快，再加之市面上初級前端工程師一波一波湧進，難免導致許多技術人感覺「學不動」。

針對大家通常會有的這個困惑，InfoQ 在本次盤點中也特別採訪了幾位大佬的看法，然英雄所見略同，幾位大佬給到的答案竟出奇一致：前端確實很“卷”，但“卷”未必是壞事。

詳細說來，前端領域的「卷」來自於以上老生常談的幾個方面，這的確也是事實，但凡事最怕換個角度來看，大家可以試著想一想難道不做前端，就不用學習了嗎？答案必然是否定的，所以對於每個工作或職業來說，學習都應成為一種常態，尤其在技術領域，一旦投身其中，更要用一種持續不斷的精神來為自己建立技術壁壘。說直白些，也正是「卷」讓大家擺脫收入低的、天花板低的「頁面仔」定位，也正是「卷」成就了今天令人刮目相看的「大前端」。

所以對於前端技術人來說，擺正心態是大前提，我們要真正理解，前端越變化才越有挑戰趣味，抱怨對於解決問題於事無補，多多參與進去，才能體現自我價值。

再回歸到本文的主題，本文透過對「大前端」領域關注度比較高的幾個部分為大家展現了相關動態，當然，大前端領域技術遠不止於此，需要學習和了解的還有很多很多，但本文的初衷並不是想激發大家「卷」的心理，畢竟對於每個工程師來說並不意味著一定要掌握應用所有技術才是成功，但如果想在大前端領域持續深耕，了解最新的技術動態對每個人的職業發展來說都必不可少。

最後，希望本文能對各位正在淘沙的前端人以啟示，再次對各位老師表示感謝。

訪談來賓：

• #華宇果：華為雲端前端技術委員會主任，華為雲端Web 能力中心團隊Leader。負責華為雲端的 Web 基礎建設能力建設，包括 UI 元件庫、研發效率工具、DevOps 流程與平台、體驗門禁、低碼系統、控制台框架等。此前，曾任職於阿里巴巴、京東、騰訊，在前端架構、前端工程化、Node.js 全端、行動端 H5 等方面有豐富的實戰經驗。

• 狼叔：網名i5ting，阿里巴巴前端技術專家，淘系技術部- 前端組，Node.js 技術佈道者，Node 全棧公眾號運營者，曾就職於去哪裡、新浪、網秦，做過前端、後端、數據分析，是一名全端技術的實踐者。已出版《狼書 (卷 1) ：更了不起的 Node.js》《狼書 (卷 2) ：Node.js Web 應用開發》，即將出版《狼書 (卷 3) Node.js 高級技術》。

• 趙小涵：聲音網音訊演算法工程師，WFH 支持者。