如今的前端早已不再拘泥于滿足頁面展示，而是開始延展到通過全棧來閉環(huán)產(chǎn)品。這表明前端

已經(jīng)有能力透過業(yè)務(wù)深入產(chǎn)業(yè)，繼而影響商業(yè)結(jié)果。這種表象的改變背后是本質(zhì)的轉(zhuǎn)變，從更

為宏觀的角度來說，前端正在通過持續(xù)的技術(shù)革新和技術(shù)融合不斷突破自身邊界，進而重新定

義自身價值。在這種大變革的時代背景下，廣州藍景前端團隊也正在與時俱進得進行著技術(shù)更

新、優(yōu)化與升級，結(jié)合自身這一年的快速發(fā)展，廣州藍景前端團隊為大家?guī)?022年上半年

大前端技術(shù)趨勢解讀。

回顧2022年上半年的技術(shù)趨勢

前端相對于其他it來說，目前形勢還是不錯的。前端現(xiàn)在的觸手已經(jīng)延伸的十分廣泛，服務(wù)

端，計算機視覺，瀏覽器內(nèi)核，圖形渲染，數(shù)據(jù)可視化，移動端，游戲，VR，甚至現(xiàn)在風(fēng)頭

正盛的鴻蒙開發(fā)。 都有前端的一席之地。

前端早已由單純工具解決問題的屬性逐步轉(zhuǎn)變?yōu)樯钊氘a(chǎn)品機制解決商業(yè)問題的角色。前端開發(fā)

者的關(guān)注點也早已不是如何使資源利用效率更高，頁面體驗更優(yōu)以及保證業(yè)務(wù)的穩(wěn)定輸出，而

是更為關(guān)注產(chǎn)品能力、產(chǎn)業(yè)模式、數(shù)據(jù)建設(shè)以及商業(yè)轉(zhuǎn)化。

開源站點bestofjs.org收錄了Github上1500個開源項目，基于Bestofjs去年的2021年JavaScript

明星項目報告和近一年Trending排行 數(shù)據(jù)，下面展示了Top10的前端重點項目，可以看到，有

非常多的老面孔，但也出現(xiàn)了很多新面孔，例如Tauri替代Electron，解決后者的大而慢的問題

基于 Rust開發(fā)，近期發(fā)布了 1.0版本，又例如vite，大有超越webpack的趨勢，借助esbuild的

優(yōu)秀性能構(gòu)建速度和更開箱易用的特性，而被多個開源項目所使用。

同樣的，我們還基于?GithubTrending API?的公開數(shù)據(jù)，更新統(tǒng)計這些項目的Stars新增趨勢。

相比于去年，學(xué)習(xí)資源越來越豐富了，Top100?內(nèi)有14個項目是與前端基礎(chǔ)學(xué)習(xí)相關(guān)的，側(cè)面

可以看出前端行業(yè)的繁榮；同時也反映出知識和人才的迭代速度是非常快的。Javascript算法

與數(shù)據(jù)結(jié)構(gòu)是過去一年Star增長最快的開源項目，打破了Vue.js連續(xù)4年登頂?shù)膲艛?。還記得

當年Deno的出現(xiàn)，出現(xiàn)的那句經(jīng)典的“求不要更新了，老子學(xué)不動了”。

事實證明“學(xué)不動的時代” 并沒有到來，而是更發(fā)的引起了學(xué)習(xí)的浪潮。除了跟學(xué)習(xí)相關(guān)的項

目，倘若只關(guān)注垂直領(lǐng)域的技術(shù)項目，我們會驚喜地發(fā)現(xiàn)以下這9點：

1. TypeScript持續(xù)升溫，依舊保持著高速成長的狀態(tài)，未來的潛力不可限量；

2. 構(gòu)建工具方面，今年絕對是Vite的爆發(fā)之年，不管是大廠的支持，還是排名上，都是穩(wěn)穩(wěn)的第一名，力壓第6位的webpack和第9位的rollup;

3. 通過項目分布的情況，明顯能看到React生態(tài)圈>> Vue?生態(tài)圈>> Angular?生態(tài)圈,但vue的優(yōu)勢并不明顯；

4. 伴隨著WebAssembly核心規(guī)范成為瀏覽器的標準，繼HTML、CSS和JS之后，像C/C++、Rust、Go等語言編寫的高性能模塊也在瀏覽器上運行。相信在不久的將來，Web應(yīng)用的桌面客戶端化，也將成為一種趨勢；

5. Strapi位列Nodejs相關(guān)領(lǐng)域的第三名側(cè)面反應(yīng)了低代碼的趨勢還在持續(xù)升溫，各家都在研制自己的低代碼平臺來提升開發(fā)效率；

6. JS Framework?相關(guān)的領(lǐng)域，Next.js超越Nest成為了今年的冠軍。在強大的React體系的影響下，業(yè)務(wù)越來越多的人選擇使用同構(gòu)和直出的方案來構(gòu)建Web應(yīng)用；

7. Serverless Framework?也進入了前Top100，雖然排名不高，但是已經(jīng)開始慢慢展示出了可持續(xù)發(fā)展的勢頭。且能在各大云廠商中廣泛應(yīng)用，也算是對其前景的肯定;

8. 大前端生態(tài)系統(tǒng)已經(jīng)逐步完善，前端工程化逐步完善，DevOps已經(jīng)走向了系統(tǒng)化的發(fā)展方向，前端技術(shù)已經(jīng)進入深水區(qū)；

9. 由于直播行業(yè)的火熱，以及疫情的影響，音視頻領(lǐng)域在過去的一年也有著蓬勃的發(fā)展。在前端領(lǐng)域WebRTC的技術(shù)在持續(xù)升溫。

總結(jié)2022年上半年度趨勢

1. Typescript爆發(fā)增長

從2019年開始，社區(qū)內(nèi)掀起了學(xué)習(xí)使用TypeScript的浪潮，從npm的下載量來看，近幾年

TypeScript呈現(xiàn)爆發(fā)式增長，甚至在2022年在Github語言的排行榜上躍居到了第三位。

在最新的2022Stack Overflow Survey?中，TS受大家喜愛程度排名第五，力壓后臺大哥Java：

? ? ? ?

相比于同類型工具，如ClosureScript、CoffeeScript等，TypeScript可謂是一馬當先，且上升

趨勢非?？欤?/p>

? ? ? ?

相比于同類型工具，如ClosureScript、CoffeeScript等，TypeScript可謂是一馬當先，且上升

趨勢非?？欤?/p>

? ? ? ?

? ? ? ?

2. 亞洲開發(fā)者數(shù)量逼近北美體量

? ? ? ?

? ? ? ?

側(cè)面反映出，IT從業(yè)人員的持續(xù)性增加和該行業(yè)的活躍度和規(guī)?；⑶医衲暌廊粫幸粋€持

續(xù)增長的態(tài)勢。

3. 三大框架Vue當先

前端界的三大主流框架：React、Angular和Vue.js，今年仍是炙手可熱。此外，在過去一年，

這三大主流框架還迭代了許多版本。在三大框架之中，根據(jù)過去一年的NPM下載量，React仍

然穩(wěn)居首位。

react的生態(tài)：

隨著今年React 18的發(fā)布，期待已久的并發(fā)渲染器、對?Suspense?的更新，還有服務(wù)器組件

等，現(xiàn)在的React正在發(fā)力于瀏覽器和服務(wù)端，它會變得無處不在。

vue的生態(tài)：

在 Vue 3 正式發(fā)布一年多后，我們看到這個生態(tài)系統(tǒng)正伴隨著許多偉大的創(chuàng)新迅速發(fā)展。也

為 TypeScript 的開發(fā)帶來一波紅利；以 Composition API 為基礎(chǔ)建立的新狀態(tài)管理器?Pinia?成

為 Vuex 的繼承者。

并且隨著?Vite?成為 Vue 新的默認工具，Nuxt 3、Quasar?和?VitePress?等元框架現(xiàn)在都使用

?Vite 作為其默認引擎。讓開發(fā)者體驗有了巨大的改進，并為創(chuàng)新打開了許多新的大門。

社區(qū)還在調(diào)整 Vue2 到 Vue3 的開發(fā)者體驗上的問題,使遷移過程更加順利。對于 Vue 開發(fā)者

來說，這是偉大的一年，他們的應(yīng)用在開發(fā)者體驗和性能方面都得到了巨大的改善。

4. Low-Code恰逢其時

從2014年Forrester的研究報告提出“l(fā)ow-code”一詞到今天，低代碼領(lǐng)域持續(xù)升溫。從低代碼領(lǐng)

域的行業(yè)角度看，2017年后，微軟、甲骨文等各大廠家紛紛加入了低代碼賽道的競爭。近年

來，獲得3.6億美元融資的Outsystems更是成為低代碼領(lǐng)域海外市場的一只獨角獸。國內(nèi)方

面，也不乏云鳳蝶、點石、iVX、輕流、積木等平臺的誕生，低代碼產(chǎn)品領(lǐng)域的蓬勃發(fā)展，正

成為特定場景軟件開發(fā)的重要趨勢。

5. 全棧開發(fā)持續(xù)深耕

從DevOps到NoOps的路徑之一，便是目前大家都在嘗試的Serverless了。自從2012年有了

Serverless的概念開始，至今已經(jīng)10年頭了。近年來隨著國內(nèi)的云廠商，如騰訊云、阿里云、

華為云對Serverless的支持，并且伴隨著小程序云開發(fā)的普及，國內(nèi)的開發(fā)者對Serverless的

使用已經(jīng)非常熟悉了。

今年9月CodingSans?聯(lián)合其9個合作伙伴，發(fā)布了Serverless2022?年度狀態(tài)報告。調(diào)查結(jié)果顯

示：有75%的開發(fā)者會在公司使用這項技術(shù)。如此高的Yes也基本反映出了這樣的技術(shù)已經(jīng)被

大眾普遍接受并使用。

我們可以看到開發(fā)者選擇應(yīng)用Serverless的場景有很多，比如：為小程序、Web、Mobile提供

基礎(chǔ)性的API服務(wù)，大規(guī)模批處理任務(wù)處理，Web站點、DevOps的工具以及GraphQLAPI能

力。

與其說Serverless是一項技術(shù)，不如說Serverless是一種理想的工作模式，是一種專注于業(yè)務(wù)

價值的思考。單純的通過函數(shù)進行業(yè)務(wù)交付，而不再需要關(guān)心解決業(yè)務(wù)問題之外的事情，比

如：那些非常繁瑣的基礎(chǔ)設(shè)施。托管服務(wù)可以讓開發(fā)者更專注于編寫業(yè)務(wù)函數(shù)，從而減少對機

器資源、降低運維成本的考慮，可以讓開發(fā)者更專注的為產(chǎn)品和用戶創(chuàng)造價值。隨著云廠商對

于Serverless的支持，后續(xù)會有越來越多的開發(fā)者，可以體會到云時代給大家?guī)淼谋憷?/p>

6. DevOps漸進增強

研發(fā)效能是2022年提到的比較多的一個熱詞，特別是在大廠，提到效能不得不提到近幾年非

常火熱的DevOps，開發(fā)運維一體化流程，CI/CD流程的串聯(lián)，幫助業(yè)務(wù)提升研發(fā)效能。

不過，想要完全達到DevOps的效果，難度是很大的，DevOps鏈路涉及到非常多的工具鏈，

使用學(xué)習(xí)成本較高,但好在現(xiàn)在主流的云廠商，如騰訊云、阿里云，亞馬遜云等，都提供了很

多完整的DevOps解決方案，只要我們系統(tǒng)學(xué)習(xí)后，就可以快速運用起來。

7. WebRTC持續(xù)升溫

隨著互聯(lián)網(wǎng)的不斷加速和音視頻技術(shù)的不斷發(fā)展，許多以音視頻技術(shù)為依托的產(chǎn)品相繼面世，

比如：直播、短視頻等等。從3G到4G，再到即將到來的5G時代，移動網(wǎng)絡(luò)的帶寬和質(zhì)量越來

越高，海量低延遲直播、互動直播也成為了可能。音頻技術(shù)發(fā)展到今天，實際已經(jīng)非常成熟

了。從H264/H265、VP8/VP9以及后面的AV1編解碼器，解決了視頻壓縮率的問題；而5G的

商用，解決了帶寬的問題。這兩個問題解決后，各行各業(yè)都開始使用音視頻技術(shù)來實現(xiàn)更佳的

用戶體驗，比如：音視頻會議、直播帶貨、在線教育、遠程醫(yī)療、娛樂游戲等等。

2022年由于疫情的影響，大家更多地認識和了解到音視2頻相關(guān)的行業(yè)。音視頻技術(shù)底層離不

開編解碼標準的發(fā)展。而就在今年，新一代國際視頻編解碼標準（H.266/VVC）正式出爐，其

后續(xù)的落地實踐非常值得關(guān)注。從行業(yè)應(yīng)用的發(fā)展來看，圍繞音視頻直播一定會有三個發(fā)展方

向：更快、更便宜、更智能。之前音視頻領(lǐng)域有兩大技術(shù)路線：一類是RTC，它主要用于滿足

多人會議中的低延時互動；另一類是流媒體直播/點播，主要滿足于對延時要求不大的高并發(fā)

低成本場景。而端上的音視頻處理技術(shù)主要圍繞更智能，諸如人臉識別、美顏、降噪、超分等

處理優(yōu)化來展開,?行業(yè)中也有更多的實踐落地，從后端到前端都在探索更為極致的體驗。

WebRTC有個特別宏偉的愿景：可以在瀏覽器上快速開發(fā)出各種音視頻應(yīng)用。但這早已不再僅

僅是愿景，而是已經(jīng)在逐步成為現(xiàn)實。

從Chrome、Firefox到近幾年蘋果Safari的加入與支持，各個云服務(wù)廠商、騰訊云、阿里云、

網(wǎng)易云、七牛云以及諸如專門音視頻服務(wù)商（聲網(wǎng)和即構(gòu)科技等等），都將WebRTC納入瀏覽

器實時音視頻首選方案。

從StackOverflow Trends?和GoogleTrends來看：WebRTC的熱度不斷上升，而且由于2022年

疫情的影響，直播帶貨、在線會議和在線教育等遠程實時音視頻技術(shù)的也迎來了風(fēng)口，關(guān)注度

急劇上升。

8. WASM的廣泛應(yīng)用

WebAssembly源于Mozilla發(fā)起的Asm.js項目，也被稱為“設(shè)計補充?JavaScript”，其本解碼速度

比JS解析快得多，讓高性能的Web應(yīng)用在瀏覽器上運行成為可能。該模塊可在瀏覽器中的專

有虛擬機上執(zhí)行，與JavaScript虛擬機共享內(nèi)存和線程等資源。目前主流瀏覽器基本都支持了

WebAssembly。

在2019年12月15日WebAssembly正式成為WorldWide Web Consortium?(W3C) 的標準，加入

到了HTML、CSS和JavaScript的行列，繼而成為瀏覽器官方的標準的第四門語言。

WebAssembly也正式抵達了1.0版本，獲得了主流瀏覽器Firefox、Chrome、Safari和Edge的

支持。

據(jù)統(tǒng)計了解，例如騰訊視頻的直播播放器，字節(jié)、B站等帶直播能力的播放器，已經(jīng)在使用基

于WebKit的WebAssembly實現(xiàn)的編譯、啟動和運行時等benchmarking領(lǐng)域的技術(shù)。當然除了

音視頻領(lǐng)域，以后也會出現(xiàn)WebAssembly新型生態(tài)系統(tǒng)等應(yīng)用。

展望2022年下半年技術(shù)趨勢

技術(shù)的核心價值是為業(yè)務(wù)創(chuàng)造價值。那么，如何能快速滿足業(yè)務(wù)發(fā)展訴求呢？首先，我們始終

離不開解決成本、效率、質(zhì)量三者之間的平衡。因此，提升基礎(chǔ)物料的可用性、提升開發(fā)工具

的便捷性、完善動態(tài)運營的靈活性以及解決產(chǎn)品質(zhì)量的穩(wěn)定性，這些永遠都會在我們的日常工

作中持續(xù)進行，并且在追求極致的道路上永無止境！

正所謂分久必合，合久必分。無論是選擇極權(quán)式的中臺化解決方案，亦或是選擇去中心化的業(yè)

務(wù)自制模式，都可以提升技術(shù)在業(yè)務(wù)的影響力。當然選擇什么樣的方式，這與企業(yè)自身的基因

和團隊發(fā)展的階段有很大的關(guān)系。

在垂直領(lǐng)域的技術(shù)發(fā)展方面，我們對2022下半年年可以做一些展望：

• 三大框架的同質(zhì)化會越來越明顯，而周邊配套還在可持續(xù)的發(fā)展中。從開發(fā)者的基數(shù)上可以看到未來一年React還是會持續(xù)性地領(lǐng)先，但這并不妨礙Vue的優(yōu)秀；

• 由于可維護性和系統(tǒng)的復(fù)雜度上升，TS未來一年依舊會保持強勁的勢頭吞噬JS的版圖，未來會有更多的開源框架和基礎(chǔ)組件擁抱TS社區(qū)。

• 大前端領(lǐng)域的前端工程化如今已經(jīng)慢慢成熟和穩(wěn)定了，而在未來一段時間，更多是基于全棧開發(fā)的工程化體系的建設(shè)。前端開發(fā)者會更多的借鑒后臺開發(fā)的經(jīng)驗去加速這一歷史進程的速度，盡快完成全棧研發(fā)體系的升級和探索。

• 隨著WebAssembly持續(xù)性的發(fā)展，會有越來越多的產(chǎn)品在業(yè)務(wù)上落地WASM這項技術(shù)。而隨著WASM的發(fā)展瀏覽器桌面應(yīng)用化的趨勢也會越來越明顯。WebOS未來是否能夠落地，相信WASM在其中一定扮演了重要的角色。

• 小程序的標準化雖然提上了日程，但是由于有微信這樣超級APP的存在，標準化的道路注定不會平坦?？缍碎_發(fā)上最耀眼的明星還是Flutter，而蘋果公司發(fā)布的SwiftUI也在路上了。從開發(fā)者的角度來看，多端同構(gòu)是一種美好的愿望，但是任重道遠，仍然需要長期且持續(xù)性的攻堅克難；

• 與其說是Serverless不斷地持續(xù)升溫，不如說是泛前端的時代已經(jīng)到來。前端團隊尋求價值的渴望驅(qū)使著開發(fā)者們不斷突破著自己的工作范圍；前端服務(wù)化的工作模式已經(jīng)從萌芽階段發(fā)展到路人皆知的階段了，大前端服務(wù)化的趨勢已經(jīng)是這個時代不可逆轉(zhuǎn)的趨勢了。

• 隨著5G網(wǎng)絡(luò)的普及和手機硬件的不斷提升，流量瓶頸和渲染性能在未來一年會有質(zhì)的提升，這其中最大的受益者就是從事音視頻領(lǐng)域的開發(fā)者。相信在未來的一年里，音視頻領(lǐng)域一定是百花齊放的狀態(tài)。

• 低代碼的場景天然的靶場就是在B端業(yè)務(wù)中進行抽象和實現(xiàn)。而隨著產(chǎn)業(yè)互聯(lián)網(wǎng)的提出，整個行業(yè)進入了ToB的轉(zhuǎn)型期，未來的低代碼會越來越受到大廠的重視。當然，低代碼還是要持續(xù)解決三大問題：基礎(chǔ)平臺的能力完善、開發(fā)質(zhì)量更加可控，以及低代碼產(chǎn)物的可維護性提升。可以遇見的未來低代碼會火爆的表現(xiàn)，并且會在生產(chǎn)中綻放光彩。

今天的分享就到這里，如果今后有相關(guān)的前端學(xué)習(xí)或技術(shù)類的問題，歡迎在在評論區(qū)留言或私信我們，最后別忘記了點贊+關(guān)注哦！

? ? ? ?