云計算開源產業聯盟：2023前端技術及開源發展研究報告（29頁）.pdf

《云計算開源產業聯盟：2023前端技術及開源發展研究報告（29頁）.pdf》由會員分享，可在線閱讀，更多相關《云計算開源產業聯盟：2023前端技術及開源發展研究報告（29頁）.pdf（29頁珍藏版）》請在三個皮匠報告上搜索。

1、 前端技術及開源發展前端技術及開源發展 研究報告研究報告 云計算開源產業聯盟云計算開源產業聯盟 2022023 3年年5 5月月 編制說明編制說明 本報告由云計算開源產業聯盟撰寫，限于撰寫組時間、知識局限等因素，內容恐有疏漏，煩請各位讀者不吝指正。在編寫過程中得到多家單位的大力支持，在此特別致謝中國信息通信研究院、華為技術有限公司、北京京東世紀貿易有限公司、深圳市騰訊計算機系統有限公司、上海浦東發展銀行股份有限公司、建信金融科技有限責任公司、中原銀行股份有限公司、蘇州棱鏡七彩信息科技有限公司、浪潮云信息技術股份公司、中興通訊股份有限公司、中國農業銀行軟件研發中心、東軟集團股份有限公司、深圳開源

2、互聯網安全技術有限公司、中國工商銀行股份有限公司、北京小桔科技有限公司、中國聯合網絡通信有限公司軟件研究院等單位的各位專家，感謝各位秉承開源精神，協同共創，從多個視角提出了對于前端技術的理解，最終完成本報告的撰寫工作。本報告核心編寫者：張燕、俊哲、張毅、李一昂、王澤增、賈武林、林琳、焦穎。本報告貢獻者：吳海鑫、馬劍、蘇昊欣、胡雄偉、黃立、黃小然、謝釗、吳鑫、孫超、孫亞楠，丁濤、陳旭、丁濤、馬琳琳、高楊、徐志亮、趙群、李鑫、梁銳、孟繁貴、李迎輝、牟寧波、李佩芳、楊鳴，趙赫、陳蓮、王頡、賀文軒、易煥騰、謝家興、王媛媛。前前 言言 前端即網站或應用程序的用戶界面部分，作為視覺和功能連接的核心，其通過

3、程序語言整合文字、圖片、視頻等內容信息，呈現給用戶，從而與用戶建立溝通渠道。前端技術也即用于構建網站和應用程序用戶界面的各種技術。在前端技術的發展軌跡中，開源貫穿始終，逐漸成為推動前端技術全面升級的中堅力量。隨著數字化轉型的不斷深入，市場需求日益豐富，終端種類和數量高速增長，前端正在通過持續的技術革新和融合不斷突破自身邊界，進而重新定義自身價值。無論是前端低代碼平臺建設，還是前端智能化落地，抑或是微前端體系構建，都已成為前端技術發展的重點方向。在這種大變革的時代背景下，云計算開源產業聯盟聯合產業界共同發布前端技術及開源發展研究報告，聚焦前端技術領域不斷涌現的新技術、新模式，分析總結全球和我國發

4、展的總體態勢，并重點針對我國前端開源技術的創新趨勢和應用狀況進行探討，最后對我國前端技術的未來發展方向進行展望與研判。希望本報告為社會各界深入了解前端開源技術提供有價值的參考。目目 錄錄 一、前端發展總體態勢.1（一）開源持續推動前端技術快速迭代，賦能產業全面升級.1（二）軟件供應鏈趨于復雜化和多樣化，前端開源風險不斷加劇.2 二、前端技術創新趨勢.4（一）開源語言和工具基礎設施為前端技術發展奠定堅實基礎.4 1.開源語言 TypeScript 成為新一代前端標準.4 2.Rust 工具融入前端生態，成為 JS 基礎設施的未來.5 3.開源工具基礎設施推動前端向前發展.7（二）前端技術應用領域

5、不斷拓展.8 1.前端開源框架深耕全棧領域.8 2.WebRTC 在音視頻技術中獨放異彩.9（三）新技術驅動業界開始研發模式變革.10 1.低代碼支撐大前端工程體系構建.10 2.前端智能化方興未艾.12 3.微前端極大提升前端生產力.13 4.前端“邊緣渲染”成為大勢所趨.14 三、我國前端技術發展現狀調研.15（一）三大主流開源框架穩居前列，黑馬開源框架 Svelte 異軍突起.16（二）開源前端庫 Axios 成為“事實標準”，AntDesign 取得廣泛應用.17（三）TS 采用率穩健增長.19（四）微前端成為不可輕視的一環.20（五）前端技術未來發展趨勢調研.20 四、我國前端技術發

6、展機遇.22 五、附錄.23（一）前端開源技術評價方法.23 前端技術及開源發展研究報告 一、一、前端發展總體態勢（一）（一）開源持續推動前端技術快速迭代，賦能產業全開源持續推動前端技術快速迭代，賦能產業全面升級面升級 開源推動前端技術持續迭代?；ヂ摼W發展早期，萬維網（WWW）、瀏覽器、開源語言 JavaScript（以下簡稱“JS”）相繼誕生，前端界面以純靜態的文本和圖片為主，前端開發工作低級單一。Ajax 的誕生助力前端技術成功邁向 2.0 時代，動態網頁逐漸成為主流。與此同時，jQuery 的誕生，推動了開發者注重前后端分離。jQuery 的流行降低了前端門檻，使得前端工程師的隊伍越來越

7、壯大。而 jQuery 的廣泛應用所帶來的白屏和全局污染問題又進一步加速了前端模塊化階段的到來。2009 年開源技術 Node.js 誕生，并催生了前端工程化。Svelte、React、Vue、Angular 等開源框架的流行驅動了前端產業高速發展。前端開源賦能產業全面升級。在開源技術的持續加持下，前端早已跳脫出頁面展示的技術局限和功能分工，在跨平臺融合技術、音視頻技術以及前端整體工程效率提升技術等領域都占有一席之地。在跨平臺融合技術上，React Native、WEEX、Flutter、Kraken 等一系列優秀的開源技術解決方案的出現，成功實現了邏輯跨端和渲染跨端，保障了異構終端研發的一致

8、性，從而使得 Web 端、移動端、及各類 IoT設備的統一前端展現成為可能。在音視頻技術上，隨著直播帶貨、在線會議、在線教育等遠程實時場景的興起，音視頻技術也得到廣泛關注和使用，其中 WebRTC、WebAssembly 等開源技術可幫助用戶在使用音視頻時獲得更加理想的用戶體驗。隨著 WebRTC 在云和端上技前端技術及開源發展研究報告 術體系的成熟，視頻工程開發領域的門檻也將大幅度降低。在持續的技術革新和技術融合中，前端不斷自我突破、自我演進，推進產業高速發展和全面升級。在工程效率上，前端 DevOps 技術生態正持續完善，新的工具鏈及方法論的引入顯著提升了工程研發及運維效率。低代碼和無代碼

9、領域的發展仍在升溫，作為一種全新的開發范式，低代碼方案基于可視化和模型驅動的理念，可大幅降低業務交付成本，各家企業正在積極布局該領域，促進技術和業務深度合作。目前，國內各大互聯網廠商已經開始布局低代碼開源社區，積極引導低代碼生態建設。（二）（二）軟件供應鏈趨于復雜化和多樣化，前端開源風軟件供應鏈趨于復雜化和多樣化，前端開源風險不斷加劇險不斷加劇 軟件供應關系日趨復雜多元，供應網絡安全風險不斷升級。伴隨著產業發展，軟件開發的規?；瘏f作模式已逐漸取代單體模式，軟件各組件間連接日益緊密，從而共同形成一個包含眾多節點的供應關系網絡，即軟件供應鏈。規?；瘏f作模式盛行之下，開源模式的優勢日益彰顯。而引入開

10、源軟件，便為軟件供應鏈路再度引入開源軟件的上游社區、基金會、開發者、維護者以及源碼包、二進制包、包管理器和存儲倉庫等諸多節點，因此軟件供應鏈復雜度全面升級、多樣性顯著增強。另一方面，開源供應鏈產品更新迭代速度快、軟件模塊數量多、生產線上化、供應全球化、倉儲集中化、用戶多樣化等特點1，也加劇了軟件供應鏈的安全風險。1 https:/ 前端技術及開源發展研究報告 前端開源風險加劇，開源使用問題凸顯。由于前端開源技術往往迭代更新迅速，同時缺乏相應安全機制，因此前端開源風險也隨著開源在前端領域的持續滲透而有不斷加劇之勢。常見的開源前端軟件風險主要包括三大方面。一是安全風險，包括開源軟件本身安全漏洞所導

11、致的風險，以及因依賴開源軟件而產生的安全漏洞風險。前端開源軟件具有漏洞數量多、漏洞影響范圍大的特點。根據新思科技發布的2023 開源安全和風險分析報告2，審計代碼庫發現的排名前十的大漏洞中與前端相關的漏洞高達 7 個。其中排名前三的漏洞組件分別是 jQuery（47%的被審計代碼庫中包含）、Lodash（31%的被審計代碼庫中包含）、Bootstrap（23%的被審計代碼庫中包含），前端項目依賴的復雜性也增加了引入漏洞的風險。根據 Snyk 與 Linux 基金會聯合發布的 2022 年開源安全報告3，JavaScript 項目的平均依賴數為 174個，是所有技術生態中最高的（Java 項目平

12、均 40 個依賴）。二是供應鏈風險，前端開源供應鏈風險大有加劇之勢。前端 npm 由于管控薄弱、攻擊成本低而成為軟件供應鏈攻擊的重災區，近年來已出現多起嚴重的前端開源供應鏈投毒事件。2022 年 3 月，開源組件 node-ipc 作者出于個人政治立場在代碼中進行 npm 供應鏈投毒，作者通過添加惡意 JS 文件在用戶桌面創建標語，甚至還曾計劃刪除特定區域用戶的本地磁盤文件，vue-cli、unity-hub 等工具都因此受到了不同程度影響。三是合規風險，包括開源許可協議、版權和出口管制等方面的合 2 Synopsys 2022 開源安全與風險分析報告 https:/ 3 State of O

13、pen Source Security 2022 https:/snyk.io/reports/open-source-security/前端技術及開源發展研究報告 規風險。雖然大部分前端開源項目會采用比較寬松的 MIT、Apache License 等許可協議，但由于前端依賴的復雜性，需要特別注意依賴軟件引入的許可協議和版權合規風險。例如 React-Native 本身采用MIT 協議，但其中部分代碼卻采用了 Creative Commons Attribution ShareAlike 3.0 進行授權許可，從而導致了潛在的許可證沖突。此外，前端開源軟件的許可證種類也可能發生變更。例如 R

14、eact 曾經在開源許可協議 BSD 的基礎上添加附加專利條款，要求使用 React 者不可做任何與 Facebook 構成競爭的事情。然而，由于社區的強烈反對以及 Apache 基金會強制要求禁用，Facebook 又將許可證更新為了 MIT協議。二、前端技術創新趨勢（一）（一）開源語言開源語言和工具基礎設施為前端技術發展奠定和工具基礎設施為前端技術發展奠定堅實基礎堅實基礎 1.開源語言 TypeScript 成為新一代前端標準 TypeScript 直擊 JS 痛點。JS 作為前端技術的核心語言奠定了前端技術的發展基礎，但當業務應用的代碼量過大或邏輯過于復雜時，動態化極高的 JS 代碼的維

15、護成本和難度便會迅速爬升，甚至到達一個不可能維護的程度。而 TypeScript（下文簡稱“TS”）憑借其強大的類型系統以及完善的 OOP（面向對象編程）實現，在大型、復雜業務應用的開發中更具優越性。TS 成新一代前端行業標準。由于當前幾乎所有瀏覽器內核都將JS 作為其唯一的默認內置腳本語言，而 TS 是基于 JS 的一個超集，前端技術及開源發展研究報告 故在前端開發中使用 TS 無需轉化編譯，此外，對于 JS 程序員而言，TS 的使用門檻也極低，無需進行系統學習便可應用于實際開發，故TS 頗受前端開發人員的青睞。據軟件開發與設計公司 The Software House 2022 年就前端市

16、場狀態所進行的市場調查，TS 使用人數的年增長率超 7%，目前已達 84%，并且約 43%的受訪者認為 TS 將超越JS 成為前端開發的主要解決方案。4另外，GitHub 2022 年調查報告顯示，自 2014 年以來，TS 在主流編程語言的排名中穩步提升，當前已躍居第四。5 圖 1 GitHub 近七年開發語言排名變化 來源：GitHub，2022 年 3 月 2.Rust 工具融入前端生態，成為 JS 基礎設施的未來 Rust 逐步融入前端生態，或成 JS 工具化未來。在對基礎設施性能要求極高的前端領域，核心語言 JS 卻在該點上一直飽受詬病。而開源項目 Rust 自誕生以來，便以優于其他

17、腳本語言的高可靠性和高性能吸引了大批前端開發者。自 2009 年 Rust 開源以來，社區歷經十 4 https:/tsh.io/state-of-frontend/#report 5 https:/ 0123456789101120142015201620172018201920202021JavaScriptPythonJavaTypeScriptC#PHPC+ShellCRuby前端技術及開源發展研究報告 余年的發展，目前 Rust 開源社區已有超過 6000 名貢獻者6，和 1300萬開發者7。另根據 Stack Overflow 2021 年開發者調查，Rust 已連續六年成為最受開

18、發者喜愛的編程語言8。此外，在前端領域也出現了眾多由 Rust 編寫的項目，如 2021 年的 swc 就是通過 Rust 編寫的構建工具，具有編譯、壓縮、打包等功能，目前該工具已被一些知名項目采用，并顯示出了強大的功效，如 Next.js 12 在以 swc 替代 babel 后，熱更新速度提升到原來的 3 倍，構建速度提升到原來的 5 倍9。dprint，Parcel 在使用 Rust 改寫后，性能也出現顯著提升。前端全家桶目前已經有了一整套 Rust 實現，可見 Rust 對于 JS 的基建支持已相當完備。隨著工具層邏輯覆蓋率問題的逐步解決，Rust 將成為 JS 基礎設施的未來。Rus

19、t 語言學習或成前端行業重要趨勢。前端領域專家 Dan Abramov 認為 Rust 是未來三年最值得學習的語言。10Rust 的學習路線雖陡峭，但其與某些經典的前端開發工具也存在相似的地方。如在工具鏈上，Rust 的 rustup 的使用和實現原理就類似 nvm，cargo 類似 node的 npm。另外，在語法上，Rust 保留了函數式編程、結構化語言的特點，如 JavaScript 的箭頭函數以及 map、reduce、filter 等方法皆在 Rust語言中有所體現。隨著 Rust 的廣泛運用，未來 Rust 語言學習或將成為大勢所趨，而得益于 Rust 更現代化的依賴管理、語法和工

20、具鏈，6 thanks-https:/thanks.rust-lang.org/7 State of the Developer Nation 20th Edition-Slash Data https:/www.slashdata.co/free-resources/developer-economics-state-of-the-developer-nation-20th-edition?8 https:/ 9 https:/ 10 https:/ 前端技術及開源發展研究報告 Rust 的入門相對 C+等語言而言也更為容易。3.開源工具基礎設施推動前端向前發展 前端工具基礎設施持續優化。語

21、言的流行離不開豐富完善的基礎庫及工具集的賦能，前端的發展亦然。在前端程序體量和復雜度不斷提升的過程中，基礎庫或者工具對于前端的助推作用不可忽視。早期前端偏向于MVC開發模式，基礎庫旨在提供便捷好用的工具類函數，如早期的開源項目 jQuery 和 YUI，皆聚焦于提升開發者效率。ES6 版本的發布開辟了前端發展新局面，該版本不僅對原有對象進行大幅擴展，同時還新增了很多語法特性。在 Babel 誕生之前，沒有任何一款瀏覽器引擎可實現對 ES6 全部標準的支持，但 2014 年 6to5 的庫實現了 ES6 至 ES5 的轉化，并在 2015 年 2 月正式更名為 Babel11。Babel完美實現

22、了 ES6，尤其是模塊的引入，使得很多優秀的設計思想（如MVVM）和理念得以實現，后續涌現了 webpack、Rollup 和 Parcel、Esbuild 等開源工具，極大地改善了前端開發者的開發體驗。開源模式助力基礎庫生態體系完善發展。隨著前端工程的日漸龐大和復雜，需要處理的代碼量也呈指數級增長，包含數千個模塊的大型項目如今已相當普遍?；?Babel、Webpack 等開發的構建打包工具便開始遇到性能瓶頸。ECMAScript 已經發布到了 ECMAScript 2022版本，各大瀏覽器引擎幾乎已經完全實現了 ECMAScript 2015，因此Babel 的轉換功能不再被需要，甚至成為

23、負累。為解決該問題，2021年構建工具 Vite 發布，使用該工具的瀏覽器可運行原生 ES 模塊。Vite 11 https:/babeljs.io/blog/2015/02/15/not-born-to-die 前端技術及開源發展研究報告 開源短短一年多來已經獲得 46k star，并在 2021 年 state of js 的調查中獲得最受歡迎和最滿意的技術獎項12。開源社區也開始出現從Webpack 遷移至 Vite 的相關工具，如 webpack-to-vite13。依托于開源社區，越來越多的開發者開始參與基礎工具的建設，同時更多智慧和想法的碰撞和匯聚，使得前端基礎庫功能更加豐富和強大

24、，如 plugin-vue 和 plugin-react 插件可使得 Vite 同時兼容 Vue 和 React，originjs 的commonjs和require-context插件可使Vite同時支持ESM和CommonJS兩種規范，從而降低歷史項目的遷移成本。（二）（二）前端前端技術應用領域不斷拓展技術應用領域不斷拓展 1.前端開源框架深耕全棧領域 前端邊界面臨不斷突破，Serverless 賦予全?；療o限可能。前后端分離依然是當前主流的開發模式，但對于絕大多數并不十分復雜的業務場景而言，前后端聯調工作所需耗費的開發成本和運維成本過于高昂。因此，無需搭建開發環境，在瀏覽器中完成項目部署

25、、代碼開發、配置測試以及運行管理等整套項目流程便成為現實需求。Serverless 以“無服務器”為終極理念，將提供服務資源的基礎設施抽象成各種服務，供用戶通過接口按需調用，開啟了前端全?；臒o限可能?；?Serverless 的頁面交互、業務邏輯、數據處理的前端實現，再度突破了前端發展的技術邊界。12 https:/ 13 https:/ 前端技術及開源發展研究報告 圖 2 全棧項目基本框架圖 來源：CSDN 網站，云計算開源產業聯盟 開源賦能 Serverless 高速迭代，成行業共同選擇。IBM 早在 2016年便將 OpenWhisk 項目捐獻開源，隨著開源模式的持續賦能，OpenW

26、hisk 已日趨完善，并逐漸成長為一個功能完備的 Serverless FaaS 平臺，頗受開發人員的關注和青睞。2018 年，谷歌開源 KNative架構方案，以期實現 Serverless 的標準化，伴隨著 KNative 項目的迅速迭代，大型應用項目的順利落地也將指日可待。除此之外，Openfass、Kubeless、Fn 等系列開源項目的蓬勃發展也正印證了開源具有賦能Serverless 發展的不竭動力和無限可能。2.WebRTC 在音視頻技術中獨放異彩 開源項目 WebRTC 已成為瀏覽器音視頻應用熱門解決方案。為改善在線服務質量，2010 年 Google 公司收購 Global

27、IP Solutions 公司以獲得 WebRTC 項目，并于 2011 年 6 月 1 日將其開源，后該項目又在 Google、Mozilla、Opera 的支持下被納入萬維網聯盟的 W3C 推薦標準。2021 年 1 月 26 日，W3C 和 IETF 同時宣布 WebRTC 發布為正前端技術及開源發展研究報告 式標準。14WebRTC 項目匯集了音視頻編解碼器（Opus 和 VP8/9）、強制加密協議（SRTP 和 DTLS）和網絡地址轉換器（ICESTUN）等先進的實時通信技術，使得無需下載安裝任何瀏覽器，便可實現多互聯網瀏覽器間健壯的實時通信。而更為重要的是，開源項目 WebRTC開

28、放且可自由實施，在全球已安裝的瀏覽器中，超 85%客戶端可實現音視頻實時通信。15 實時音視頻技術迎來風口，WebRTC 熱度不斷上升。伴隨著移動互聯網的高速普及以及音視頻技術的飛速發展，越來越多的行業開始通過音視頻技術以實現更高質量的用戶體驗，音視頻會議、直播帶貨、在線教育、遠程醫療、娛樂游戲等服務產品紛紛面世。2019 年突發新冠疫情更是從根本上改變了人類社會的生活方式，網上購物、線上辦公、線上醫療、在線課堂一度成為特殊時期全人類的共同選擇，實時音視頻通訊的需求迅速爆發，從而使得 WebRTC 技術不斷升溫。WebRTC 讓數十億人跨越地域和設備，在新冠疫情期間也能保持聯絡。據統計，自 2

29、022 年 3 月開始，Chrome 瀏覽器中通過 WebRTC 接收的視頻流增加了 13 倍。16而在元宇宙、虛擬化時代到來之際，WebRTC也有望憑借開源所實現的持續技術創新，在未來的音視頻領域大放異彩。（三）（三）新技術新技術驅動業界驅動業界進行進行研發模式變革研發模式變革 1.低代碼支撐大前端工程體系構建 14 https:/ 15 https:/ 16 https:/ 前端技術及開源發展研究報告 數字化轉型火熱趨勢下，低代碼技術彰顯優越性。隨著數字經濟時代全面開啟，數字化轉型已成為各行各業的共同選擇。而如何聯通數字化轉型過程中所產生的大量數據以及信息化轉型下遺留的數據孤島，成為了尋求

30、數字化轉型企業不得不面對的共通難題。低代碼平臺則“授之以漁”，提供了有效解決該問題的開發能力。一方面，低代碼平臺使得不同企業可基于自身特定的數據編排需求，通過服務層的匯聚和分析，進而產生可直接服務于特定業務的新數據。另一方面，基于低代碼平臺拖拽而成的界面設計使得這些數據可被輕松使用，并顯示在 PC、手機等不同終端。圖 3 大前端架構圖 來源：CSDN 網站，云計算開源產業聯盟 低代碼支撐大前端工程體系構建，國內低代碼開源建設成效初顯。大前端面向一切負責展示的端，包括 web 端、移動端、微信公眾號、小程序等。大前端開發承擔的任務更多，所需實現的功能更強大更復雜，技術形態也更加多元化，因此，大前

31、端工程構建的工程化、自動化便勢在必行。而低代碼可視化配置、組件化以及多端適配等突出優勢正與大前端工程標準化、數據化、配置化構建需求完美適配，因而前端技術及開源發展研究報告 成為大前端工程體系構建的可靠解決方案。與此同時，各大國內互聯網廠商已經開始布局低代碼開源社區，引導低代碼物料生態建設。業務場景的多樣性決定了低代碼平臺對物料豐富度的強訴求，使得開源模式與低代碼模式天然契合，也正因如此，低代碼平臺在開源社區建設中更加注重標準與協議，并樂于對外開源設計器等核心項目。在國內外互聯網廠商的引領下，低代碼領域已陸續涌現不少優秀開源項目，例如頁面設計器 Lowcode Engine、表單設計器 Drip

32、Form、表格設計器 DripTable 等。借助低代碼開源項目，開發者可以更快構建大前端工程，同時也會按照開源標準開發出豐富的低代碼物料，從而實現低代碼廠商與開發者之間的良性互助。2.前端智能化方興未艾 前端智能化助力前端提效升級。2017 年論文 pix2Code 的提出，引發了前端開發工作者對于圖像生成代碼的思考，2018 年，微軟Sketch2Code 項目的開源進一步驗證了前端智能化方向的可行性?？v觀近年來國內外公司在前端智能化領域的持續深耕，以及在銜接設計和領域語言方面的不竭努力，已有不少成熟產品相繼上線，如 Anima、imgcook、Deco、Codefun 以及開源項目 Pi

33、casso 等。其中 imgcook 作為國內知名的前端智能化平臺，更是在 2021 年雙 11 會場中承擔了90.4%的新模塊開發，大大降低了前端開發的產研效率。前端技術及開源發展研究報告 圖 4 D2C 整體流程圖 來源：京東，云計算開源產業聯盟 D2C 優秀開源方案落地未來可期。D2C 實現的核心在于算法，基礎算法一般包括數據提取、結構布局、樣式計算、命名和 DSL 等。目前業界大部分產品依然處于策略算法階段，即如何讓生成的代碼更加符合開發者的預期，該過程需要進行手工策略調整，比如設計人員須參考某些規范，以提高代碼生成的準確性以及對于設計稿某個區域的算法策略進行控制等。在開源社區中，前端

34、智能化尚未出現具備足夠影響力的開源項目。但隨著越來越多公司的參與，以及開源事業的蓬勃發展，未來智能前端化領域百花齊放，出現行業通用解決方案以及優秀的開源方案指日可待。3.微前端極大提升前端生產力 微前端適配開發新特點，顯著提升前端生產力。隨著移動互聯網的高速發展，前端需求的爆發增長及日趨復雜，不僅使得前后端分離成為應用開發的大趨勢，也催生了微前端架構理念。微前端實質上是微服務理念在瀏覽器端的巧妙應用，即通過將單一的 Web 應用拆分為多個微型前端應用，各應用獨立開發部署、獨立運行。微前端架構的廣泛應用顯著提升了前端生產力。前端模塊化之下，各業務線可并行開發，各團隊獨立自治、互不干擾，研發、運維

35、效率因此大為提升，應用級功能復用還可有效降低交付成本；多技術棧并存使得技術選擇前端技術及開源發展研究報告 增多、復用性增強以及重構風險降低；成熟的微前端應用不僅有助于形成細粒度、可組合的前端產品形態，更是微前端應用生態建設的重要基石。圖 5 微前端結構圖 來源：稀土掘金，云計算開源產業聯盟 微前端應用場景全面豐富，開源發展欣欣向榮。微前端架構體系自提出以來，直擊前端開發痛點問題，在遺留項目的兼容、大型應用項目的聚合以及單體應用的拆解等場景中都發揮出了不可替代的作用。微前端架構體系的高速發展，離不開開源模式的持續賦能。2019年，阿里基于 single-spa 開發出了 qiankun 開源微前

36、端框架，當前在Github 平臺上，qiankun 的 Star 數已超 13.2k17。京東的微前端框架MicroApp 于 2021 年開源，該框架基于組件化思想構建，以降低使用門檻、提高開發效率為宗旨，目前是市面上接入成本最低的微前端框架。18 4.前端“邊緣渲染”成為大勢所趨 邊緣渲染成前端性能優化主流方案。根據 The Software House 于2022 年發布的前端開發市場狀態調查報告，邊緣渲染成為前端性能優化的重要趨勢。邊緣渲染即借助邊緣計算能力，將返回的內容進行 17 https:/ 18 https:/ 前端技術及開源發展研究報告 動、靜態拆分，靜態內容緩存在 CDN

37、中優先返回給用戶，同時在 CDN節點上繼續發起動態數據請求，拼接在靜態部分之后，繼續流式返回。邊緣渲染通過優化首屏加載，保障了邊緣地區和弱網地區的用戶體驗。開源框架賦能邊緣渲染全面升級。開源框架 Nuxt 3、Remix 等可直接在 CDN 級別支持按需渲染。19如 Nuxt 3 采用了全新的服務端渲染引擎 Nitro，適配瀏覽器、Node.js、Deno、Workers 等多種環境，因此支持在 CDN worker 中渲染 Nuxt 應用，讓用戶在訪問網站時感受到的網絡延遲更低，20從而進一步提升用戶體驗。三、我國前端技術發展現狀調研 本章內容梳理總結了來自我國互聯網、金融、通信、制造、汽車

38、等 8 大領域，超 50 個企業，200 名前端開發專業人士所填寫的調研報告，同時也融合了前端技術開發領域的多位專家觀點，從多個不同視角分析了我國前端發展態勢以及未來可能出現的重要趨勢與機遇?？傮w來說，前端技術發展到了一個較為穩定的階段，當前最突出的發展態勢可以概括為以下幾個關鍵詞，即：可視化、工程化、音視頻、跨端、原生等。發展特點可以劃分為兩類，一是聚焦化，即前端技術方向劃分較為細致，同時每個方向迭代到極致；二是統籌化，即打通整個前端技術上下游鏈路，擴展了前端的邊界。19 https:/ 20 https:/ 前端技術及開源發展研究報告 圖 6 前端技術關鍵詞調研 來源：云計算開源產業聯盟，

39、2022 年 8 月（一）（一）三大主流開源框架穩居前列，黑馬開源框架三大主流開源框架穩居前列，黑馬開源框架Svelte 異軍突起異軍突起 前端界的三大主流框架引領技術創新。由于React、Vue與Angular三大開源框架誕生日期較早，取得先發優勢，所以我國大部分企業內部已經具備完善的體系配套方案，市場占有度高。但相比于 React 和Vue 在技術期望值和滿意度方面的高評分，Angular 的評分較低。用戶觀點可以概括為以下幾個關鍵詞，即：“過于復雜”、“上手難度高”、“框架沉重”等。Svelte 成為前端開源框架中的黑馬。在眾多前端框架中，Svelte 在技術期望值和滿意度方面脫穎而出。

40、近一年來，Svelte不斷推陳出新，不僅支持了 TS，同時依托社區開發者不斷豐富單元測試、Web Components、SSR 等方面的實踐。通過調查，用戶喜愛Svelte 的原因包括：“更高的性能和開發效率”、“更小的體積”、“更優的 Component 分發策略”等。前端技術及開源發展研究報告 圖 7 我國前端開源框架應用發展態勢圖 來源：云計算開源產業聯盟，2022 年 8 月（二）（二）開源前端庫開源前端庫 Axios 成為“事實標準”，設計系統成為“事實標準”，設計系統AntDesign 取得廣泛應用取得廣泛應用 網絡請求庫 Axios 成為“事實標準”。Axios 是一個基于 Pr

41、omise的 HTTP 客戶端，被廣泛地應用在大量的 Web 項目中。目前，Axios項目在 GitHub 上的 Star 數達到 95.4k，Fork 數達到 9.7k。與此同時，Axios 的市場份額、技術滿意度與技術期望值穩居第一，超過 70%的調研用戶認為 Axios 滿足企業內部的技術需求。Redux 被軟件公司廣泛使用。調研用戶反饋 Redux 適合需要復雜狀態管理的大型 Web 項目，然而 Redux 的學習門檻相當高，導致 Redux 的技術滿意度與期望值較低。Moment 的用戶正在轉向使用其他時間庫。Moment 團隊于 2020 年宣布 Moment.js 已進入維護狀態

42、，后續不會再為其增加新功能，并建議新項目不要使用 Moment.js，推薦使用 Date-FNS 等更現ReactVue.jsAngularSvelteNext.jsEmber.jsRemixNuxt.js66.577.588.599.510567891011技術期望值技術滿意度前端技術及開源發展研究報告 代的時間庫，所以 Moment 項目的技術期望值與滿意度是所有庫中最低。圖 8 我國前端開源庫應用發展態勢圖 來源：云計算開源產業聯盟，2022 年 8 月 設計系統 AntDesign 廣泛用于我國企業級中后臺產品。根據調研結果，我國 42%的企業優先選用 AntDesign 作為企業級產

43、品的設計系統。AntDesign 經過大量項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系，其優點在于可以通過組件化設計規范，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。圖 9 我國前端開源設計系統使用情況 AxiosLodashReduxMomentDate-FNSRamdaApolloRxJS55.566.577.588.599.510567891011技術期望值技術滿意度42.00%18.00%16.30%13.70%6.67%3.33%AntDesignElementUIBootstrap其他MaterialUI/MUIVuetify前端技術及開源發展研究報告 來源：云計

44、算開源產業聯盟，2022 年 8 月（三）（三）TS 采用率采用率穩健增長穩健增長 根據調研結果，我國 75.2%的企業已經使用 TS。從 2019 年開始，社區內掀起了學習使用 TS 的浪潮，從 npm 的下載量來看，近幾年 TS采用率呈現爆發式增長。在如此高漲的增長浪潮中，TS 必將給前端生態帶來新氣象，同時也會促使前端開發者更多地關注代碼設計、易用可維護、編碼原則及設計理念等方面的知識。圖 10 我國 TypeScript 使用情況 來源：云計算開源產業聯盟，2022 年 8 月 圖 11 TypeScript 發展預測情況 來源：云計算開源產業聯盟，2022 年 8 月 24.80%7

45、5.20%未使用使用JavaScript和TypeScript將同樣受歡迎TypeScript將新的前端標準JavaScript仍將是前端標準TypeScript將會沒落比例43.33%31.00%24.71%0.96%0.00%5.00%10.00%15.00%20.00%25.00%30.00%35.00%40.00%45.00%50.00%前端技術及開源發展研究報告 （四）（四）微前端成為不可輕視的一環微前端成為不可輕視的一環 如今，微型前端被各種公司所接受。根據調研結果，我國 65.2%的企業已經使用微前端。除此之外，國外頭部企業 Netflix、PayPal 和Amex 等已經在內部

46、系統中實施了這種架構方法。與此同時，成熟的開源微前端框架不斷涌現，如 Single SPA、qiankun 等。圖 12 我國微前端使用情況 來源：云計算開源產業聯盟，2022 年 8 月 圖 13 我國微前端使用情況 來源：云計算開源產業聯盟，2022 年 8 月（五）（五）前端技術未來發展趨勢調研前端技術未來發展趨勢調研 服務端渲染大有可為。根據調研結果，我國 76.7%的企業認為服34.80%65.20%未使用使用Single SPAqiankunModuleFederationWebcomponentsSystem js其他比例35.90%26.67%22.50%9.60%3.60%1

47、.73%0.00%5.00%10.00%15.00%20.00%25.00%30.00%35.00%40.00%前端技術及開源發展研究報告 務端渲染將獲得人氣。服務端渲染為降低渲染時間、提高用戶體驗開啟了一扇全新的大門。微前端值得期待。根據調研結果，我國 86.5%的企業認為微前端將獲得人氣。隨著業務發展，管理系統不斷增長以及大統一的趨勢下，巨石應用數量將不可避免的增多，微前端則是解決這一問題的絕佳方法?？缍碎_發逐漸升溫。根據調研結果，我國 80.8%的企業認為跨端開發將獲得人氣。近年來，依托Electron、React Native、Flutter 等應用框架，前端跨端開發桌面應用、移動端應

48、用的概念持續升溫，另外隨著“云游戲”的火熱，“云應用”也展示出了非凡的潛力。表 1 前端技術未來發展趨勢調研結果 技術技術 獲得人氣獲得人氣 沒有變化沒有變化 消亡消亡 沒有意見沒有意見 無障礙性(Accesibility)53.3%26.5%2.1%18.1%原子設計(atomic design)50.2%20.1%0%25.7%組件驅動開發(CDD)73.4%16.3%0%10.3%跨端應用 80.8%12.6%0%6.6%GraphQL 33.3%26.7%7.6%32.4%Headless CMS 26.6%6.7%6.5%60.2%JAMstack 23.5%33.3%0%43.2%

49、微前端 86.5%6.6%0%6.9%Progressive Web Apps 47.1%13.4%1.2%38.3%服務端渲染 76.7%20.2%0%3.1%WebAssembly 46.7%20.5%0%32.8%前端技術及開源發展研究報告 來源：云計算開源產業聯盟，2022 年 8 月 四、我國前端技術發展機遇 通過開源協作，持續提升我國前端技術產業活力。當前開源軟件已成為軟件供應鏈的關鍵組成部分，開源生態建設儼然成為全球軟件產業發展的共同選擇。2021 年，開源首次被列入我國“十四五”規劃。在國家政策的持續鼓勵下，我國前端開源技術也得到了長足的發展。如尤雨溪主導的 Vue 開源框架已

50、成為新一代前端開發的必備工具，以及我國主導的優秀前端開源項目 AntDesign、ElementUI 等，皆在國際上展現出不凡的影響力。開源模式的突出優勢正在前端建設甚至整個軟件產業中彰顯，我國未來堅持多樣性、包容性、可信的開源生態建設，依然是加速前端技術迭代創新、推動技術和產業協同穩定發展的必然選擇。參考大前端工程化理念，全面探索全棧式全自動開發方案。從軟件開發的整體流程來看，借鑒大前端工程化理念，推進軟件全棧式開發、測試、運維、管理的自動化和一體化將能從根本上突破軟件開發傳統模式的局限性，助力軟件產業迅速迭代、繁榮發展。在當前大前端跨端技術融合理念的持續驅動下，低代碼作為一種全新的開發范式

51、，已成為數字化轉型的重要利器。據 IDC 預測，2024 年低代碼開發將成為 65%的應用軟件的首選，2025 年通過低代碼/無代碼技術完成開發的應用軟件將達到 70%。21未來我國也應以低代碼技術為基點，持續全面探索全棧式全自動開發方案。21 https:/ 前端技術及開源發展研究報告 大力推進前端技術規范化、工業化、智能化發展。大前端跨端融合技術發展是多端開發的必然趨勢，而為進一步貫降本徹提效的大前端理念，技術規范化、工業化和智能化發展勢在必行。代碼風格及文檔的規范化是開發協作和運行維護效率的重要保障，因此大前端跨端融合應當注重源代碼的規范化，在技術產生之初，規范開發行為和技術標準，有方向

52、的引領技術積累和發展。工業化、智能化是提高前端開發效能、釋放前端產業活力的必由之路，因此大前端跨端融合應當以低代碼平臺、可視化工具為基，借助開源社區不斷孵化出更為智能的開發工具，同時制定和推廣大前端技術工業化、智能化標準，全面促進我國前端技術高質量發展。抓住我國 5G 網絡普及新機遇，前端音視頻發展迎來新契機。據工信部統計數據，截至 2021 年 11 月，中國已完成 139.6 萬座 5G 基站建設，占全球5G 基站總數量的70%，而全國所有的地級市城區中，已有超過 97%的縣城城區和 40%的鄉鎮鎮區實現了 5G 網絡覆蓋。隨著 5G 技術的成熟和普及，超高可靠低時延通信將成為可能，大大提

53、升了各行各業的工作效率。5G 普及和手機硬件提升為前端音視頻發展提供了基礎，而前端應用領域的持續拓展則是驅動音視頻技術發展的不竭動力。因此，在元宇宙、虛擬化時代到來之際，我國應深挖前端音視頻技術應用需求，通過開源促進前端音視頻技術的創新及沉淀，以推動整個產業的繁榮發展。五、附錄（一）前端開源技術評價方法（一）前端開源技術評價方法 前端技術及開源發展研究報告 報告針對我國互聯網、金融、通信、制造、汽車等 8 大領域開展前端開源技術應用發展態勢觀察，邀請各行業用戶、專家依據前端開源技術評價方法（表 4），對前端開源技術在各行業的使用情況進行客觀打分，綜合計算后形成我國前端開源技術應用發展態勢圖?！?/p>

54、圓圈大小”代表該技術的市場占比大??；圓圈越大，代表該技術市場占比越大?！皺M坐標”代表專家對該技術的滿意度，分值為 1-10 分；分值越高，代表該技術的滿意度越高?！翱v坐標”代表專家對該技術未來演進的期望值，分值為 1-10 分；分值越高，代表該技術的期望值越高。表 2 前端開源技術評價方法 一級指標一級指標 二級指標二級指標 三級指標三級指標 技術滿意度 喜愛度 用戶是否使用和喜愛該技術 服務滿足度 外部服務支持需求 系統版本長期維護，補丁修復及時 生態圈 技術生態圈項目數 技術期望值 技術演進趨勢 用戶認為該技術是否會越來越受歡迎 學習期望 用戶是否有意愿學習該技術 前端技術及開源發展研究報告 云計算開源產業聯盟 地址：北京市海淀區花園北路 52 號 郵箱： 電話：18900125677 網址：