最近，字節(jié)跳動(dòng)技術(shù)團(tuán)隊(duì)公布了一份關(guān)于 2022 年前端技術(shù)的發(fā)展趨勢(shì)預(yù)測(cè)，總結(jié)了新的一年前端技術(shù)可能產(chǎn)生的6個(gè)變化，讓我們一起來(lái)借鑒參考一下吧。
2014 年 10 月 28 日，W3C 正式發(fā)布 HTML5.0 推薦標(biāo)準(zhǔn)讓前端技術(shù)蓬勃發(fā)展。雖然?HTML6.0?目前處于提案階段，但是社區(qū)已經(jīng)開(kāi)始有了一些零星的討論，所以可能它離我們并不太遠(yuǎn)。2022 年，可能 HTML6 并不會(huì)推出，但是可能會(huì)有更多利于用戶體驗(yàn)的提案出現(xiàn)。Facebook 改名 Meta 后，元宇宙話題很火熱，但突然一夜之間，討論似乎又從元宇宙過(guò)渡到了 Web3.0。Web1.0到2.0的轉(zhuǎn)變，極大地改變了前端技術(shù)，Web3.0時(shí)代，可能是去中心化，可能是物聯(lián)網(wǎng)，可能是人工智能，值得每個(gè)前端開(kāi)發(fā)去關(guān)注。
在 StackOverflow 的“最受歡迎的 Web 框架”調(diào)查中，除去 SSR 渲染框架和 jQuery，上榜的前端框架共有 5 個(gè)：React，Vue，Angular 依然是強(qiáng)勢(shì)鐵三角向前發(fā)展。在 2022 年 Vue3 會(huì)成為 Vue 的默認(rèn)版本，React 18 也會(huì)發(fā)布正式版本，從目前社區(qū)關(guān)注度來(lái)看， Vue3 源碼 Github star 27k+， React 18 WG Github star 3.9k+，且在 npm 的下載量上，新版本下載數(shù)目都比較可觀，所以很有可能今年嘗試和使用的人會(huì)變得更多。打包器大概可以分為傳統(tǒng)編譯和ESM 混合編譯，而由于 ESM 混合編譯類打包器依賴于其他打包器，所以理論上 NPM 下載量永遠(yuǎn)不可能超過(guò)其依賴。同時(shí) ESM 混合編譯今年整體表現(xiàn)平平。由于模塊化 CSS、搖樹(shù)、MVVM 的流行，UI 框架的選擇其實(shí)沒(méi)有那么舉足輕重了，針對(duì)自己選用的框架選擇一個(gè)符合項(xiàng)目風(fēng)格的 UI 即可。預(yù)計(jì)今年也不會(huì)有黑馬闖入和變動(dòng)。2021 年開(kāi)年以來(lái)，低代碼行業(yè)被不斷關(guān)注，也引發(fā)了眾多企業(yè)的熱議與調(diào)研。低代碼發(fā)展初期，廠商的類型多樣化，傳統(tǒng)軟件廠商、互聯(lián)網(wǎng)大廠均涉及低代碼領(lǐng)域，通用型廠商相對(duì)垂直型廠商應(yīng)用場(chǎng)景更加廣泛，因此廠商數(shù)量更多。但隨著市場(chǎng)成熟，通用類型廠商競(jìng)爭(zhēng)加劇，垂直型廠商在細(xì)分的領(lǐng)域?qū)?huì)呈現(xiàn)優(yōu)勢(shì)明顯趨勢(shì)，可以進(jìn)一步挖掘用戶場(chǎng)景，提升產(chǎn)品能力和用戶滿意度。及早布局低代碼產(chǎn)業(yè)生態(tài)，多維度拓展廠商優(yōu)勢(shì)，才能在未來(lái)占據(jù)高地。人工智能作為跨時(shí)代技術(shù)在各個(gè)領(lǐng)域大放異彩，近些年 AI 能力在前端領(lǐng)域的嘗試與應(yīng)用帶來(lái)新一輪的技術(shù)革命。阿里的 imgcook 可以通過(guò)識(shí)別設(shè)計(jì)稿（Sketch / PSD /圖片）智能生成 React、Vue、Flutter、小程序等不同種類的代碼，并在同年雙 11 大促中自動(dòng)生成了 79.34% 的前端代碼，智能生成代碼不再只是一個(gè)線下實(shí)驗(yàn)產(chǎn)品，而是真正產(chǎn)生了價(jià)值。2022 年隨著低代碼和圖形化技術(shù)的逐步完善，二者會(huì)相互完善和成就彼此。使用者通過(guò) AI 實(shí)現(xiàn)頁(yè)面的還原然后再通過(guò)低代碼平臺(tái)對(duì)頁(yè)面進(jìn)行調(diào)整，整個(gè)過(guò)程基本上不寫(xiě)什么代碼就可以完成整個(gè)頁(yè)面的搭建，搭建頁(yè)面真的會(huì)變得特別簡(jiǎn)單。跨平臺(tái)技術(shù)撬開(kāi)多「端」世界的大門(mén)隨著從 PC 時(shí)代向移動(dòng)互聯(lián)網(wǎng)時(shí)代演進(jìn)，原生客戶端因?yàn)樽陨硖旎ò宓脑蛞苍谥饾u向跨平臺(tái)方案傾斜，當(dāng)然這得益于跨平臺(tái)方案的明顯優(yōu)勢(shì)。對(duì)于開(kāi)發(fā)者而言，可以做到一次開(kāi)發(fā)多端復(fù)用，這在很大程度上能夠降低研發(fā)成本，提高產(chǎn)品效能。但是，移動(dòng)端的跨平臺(tái)技術(shù)并不是僅僅考慮一套代碼能夠運(yùn)行在不同場(chǎng)景即可，還需要解決性能、動(dòng)態(tài)性、研發(fā)效率以及一致性的問(wèn)題。React Native 是以 Web 技術(shù)開(kāi)發(fā)原生應(yīng)用的典型框架。但是與眾多基于 html 的跨平臺(tái)框架相比，F(xiàn)lutter 絕對(duì)是體驗(yàn)最好，性能與構(gòu)建思路幾乎最接近原生開(kāi)發(fā)的框架。?Flutter 目前雖然有著跨端最好的性能和體驗(yàn)但是關(guān)注人數(shù)和 React Native 不相上下。React Native 由于先出優(yōu)勢(shì)加上 React 的影響力導(dǎo)致目前很多 APP 都已經(jīng)進(jìn)入存量階段，少有新的 APP 出現(xiàn)，所以在沒(méi)有足夠的收益情況下，大部分 APP 是不會(huì)進(jìn)行技術(shù)變更的。所以在 2022 年，如果兩者都無(wú)重大的技術(shù)變更，除了對(duì) Flutter 關(guān)注的人會(huì)逐漸變多，兩者大概不會(huì)有什么比較大的轉(zhuǎn)變。目前主流小程序平臺(tái)有 10 多家，包括騰訊的微信小程序、QQ 小程序；阿里的支付寶小程序、淘寶輕店鋪；字節(jié)跳動(dòng)的頭條小程序、抖音小程序；百度小程序等；不同平臺(tái)的實(shí)現(xiàn)標(biāo)準(zhǔn)各不相同，開(kāi)發(fā)者需要學(xué)習(xí)不同平臺(tái)的開(kāi)發(fā)規(guī)范做定制化開(kāi)發(fā)。所以在 2019 年 9 月 12 日阿里巴巴主導(dǎo)發(fā)起并聯(lián)合 W3C 中國(guó)及國(guó)內(nèi)外廠商起草了 MiniApp 標(biāo)準(zhǔn)化白皮書(shū)（MiniApp Standardization White Paper），旨在制定共同標(biāo)準(zhǔn)減少平臺(tái)差異，并成立了相關(guān)工作組。截至目前產(chǎn)出了 lifecycle，manifest，packaging 等幾篇文檔，但從目前來(lái)看各平臺(tái)對(duì)這些標(biāo)準(zhǔn)的實(shí)現(xiàn)度還很低，并未實(shí)現(xiàn)統(tǒng)一，所以這么來(lái)看標(biāo)準(zhǔn)化的路看著還很長(zhǎng)。在當(dāng)下要解決跨平臺(tái)開(kāi)發(fā)問(wèn)題可以采用框架轉(zhuǎn)換。隨著一些跨端框架（Uniapp、Taro）的出現(xiàn)部分跨端轉(zhuǎn)換器基本已不再維護(hù)，這邊僅作補(bǔ)充。我們接下來(lái)了解一些跨端轉(zhuǎn)換器相關(guān)的內(nèi)容：wept: 微信小程序?qū)崟r(shí)運(yùn)行工具，目前支持 Web、iOS 兩端的運(yùn)行環(huán)境；
hera-cli: 用小程序方式來(lái)寫(xiě)跨平臺(tái)應(yīng)用的開(kāi)發(fā)框架，可以打包成 Android 、 iOS 應(yīng)用，以及 H5；
weweb-cli: 兼容小程序語(yǔ)法的前端框架，可以用小程序的寫(xiě)法，來(lái)寫(xiě) web 應(yīng)用
跨端這項(xiàng)技術(shù)并非為了完全替代原生開(kāi)發(fā)，針對(duì)每個(gè)場(chǎng)景我們都可以用原生寫(xiě)出性能最佳的代碼。但是這樣做工作量太大，實(shí)際項(xiàng)目開(kāi)發(fā)中需要掌握效率與優(yōu)化之間的平衡，跨端的使用場(chǎng)景并不一定是項(xiàng)目級(jí)別的，可以是業(yè)務(wù)級(jí)甚至是頁(yè)面級(jí)的。跨端的優(yōu)勢(shì)在于能讓我們?cè)跁?shū)寫(xiě)更有效率的代碼、擁有更豐富的生態(tài)的同時(shí)，還帶來(lái)了不錯(cuò)的性能。“前端開(kāi)發(fā)”的發(fā)展歷史像是一直在找尋自己的定位；從切圖仔、寫(xiě) HTML 模板的“石器時(shí)代”，到前后端分離、大前端的“工業(yè)時(shí)代”，再到現(xiàn)在跨端技術(shù)、低代碼的“電氣時(shí)代”。前端研發(fā)的職責(zé)一直在改變，同時(shí)前端研發(fā)需要掌握的技術(shù)也在迭代更新。對(duì)比傳統(tǒng)的服務(wù)器托管方式，使用 serverless 架構(gòu)開(kāi)發(fā)，開(kāi)發(fā)者無(wú)需多關(guān)注可用性、擴(kuò)縮容、監(jiān)控告警以及安全漏洞等等問(wèn)題，只需要負(fù)責(zé) Faas 層的代碼來(lái)處理業(yè)務(wù)邏輯即可。“全棧開(kāi)發(fā)者”是指“同時(shí)掌握前端、后端以及其他網(wǎng)站開(kāi)發(fā)相關(guān)技能的開(kāi)發(fā)者”。全棧開(kāi)發(fā)者能夠勝任產(chǎn)品開(kāi)發(fā)的全流程，從前端到后端，從架構(gòu)設(shè)計(jì)到代碼落地，從自動(dòng)化測(cè)試到運(yùn)維等。對(duì)于公司來(lái)說(shuō)，全棧工程師可以減小公司的用人成本，減少項(xiàng)目溝通成本；對(duì)于個(gè)人來(lái)說(shuō)，擁有全鏈路技術(shù)有益于技術(shù)的閉環(huán)，擴(kuò)展全局思維，提升個(gè)人能力和價(jià)值。DevOps（Development 和 Operations 的組合詞）是一種重視“軟件開(kāi)發(fā)人員（Dev）”和“IT 運(yùn)維技術(shù)人員（OPS）”之間溝通合作的文化、運(yùn)動(dòng)或慣例。透過(guò)自動(dòng)化“軟件交付”和“架構(gòu)變更”的流程，來(lái)使得構(gòu)建、測(cè)試、發(fā)布軟件能夠更加地快捷、頻繁和可靠。可以把 DevOps 理解為一個(gè)過(guò)程、方法與系統(tǒng)的總稱。5G 的到來(lái)對(duì)于技術(shù)研發(fā)工作者的我們而言意味深遠(yuǎn)。它的出現(xiàn)是數(shù)據(jù)傳輸速度、響應(yīng)速度和連接性的一次巨大飛躍。5G 將與超高清視頻、VR、AR、消費(fèi)級(jí)云計(jì)算、智能家居、智慧城市、車(chē)聯(lián)網(wǎng)、物聯(lián)網(wǎng)、智能制造等產(chǎn)生深度融合，這些都將為前端技術(shù)的發(fā)展帶來(lái)新的增長(zhǎng)和機(jī)遇。元宇宙概念火爆全球，目前的 WebAR 和 WebVR 技術(shù)距離實(shí)現(xiàn)元宇宙的愿景似乎還很遙遠(yuǎn)，但借助于以 URL 的格式進(jìn)行傳播的優(yōu)勢(shì)，通過(guò)社交媒體分享形式進(jìn)行推廣，WebAR 和 WebVR 無(wú)疑是用戶接觸到元宇宙門(mén)檻的最便捷的方式，不需要購(gòu)買(mǎi)昂貴的 VR 設(shè)備，不需要安裝 APP，通過(guò)手機(jī)網(wǎng)頁(yè)就可以進(jìn)行體驗(yàn)。在 5G 技術(shù)逐漸普及的當(dāng)今，現(xiàn)有的一些體驗(yàn)問(wèn)題，例如：3D 模型體積較大，初次資源加載耗時(shí)長(zhǎng)之類的問(wèn)題也能夠得到一些緩解。前端人在這塊能夠做些什么？從技術(shù)上來(lái)講，需要我們通過(guò)機(jī)器學(xué)習(xí)算法，實(shí)時(shí)地將虛擬圖像覆蓋到用戶屏幕，并且和真實(shí)世界中的位置進(jìn)行對(duì)齊，結(jié)合 WebRTC 技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)瀏覽器實(shí)時(shí)獲取和展示視頻流，再利用 WebGL 的能力，進(jìn)行 3D 人物模型加載，渲染和播放動(dòng)畫(huà)。隨著 5G 技術(shù)發(fā)展，視頻加載速度會(huì)非常快，簡(jiǎn)單的實(shí)時(shí)渲染會(huì)被視頻直接替代。復(fù)雜的可以通過(guò)服務(wù)器渲染，將畫(huà)面?zhèn)骰鼐W(wǎng)頁(yè)中，只要傳輸夠快，手機(jī)的性能就不再是問(wèn)題。降低 web 3D 研發(fā)成本應(yīng)該是將來(lái)的一個(gè)重要發(fā)展路線，隨著技術(shù)門(mén)檻的降低，會(huì)吸引更多感興趣的人加入促使其正向發(fā)展。所以 Web 3D 可能會(huì)朝著平臺(tái)化的方向發(fā)展，能提供簡(jiǎn)單高效的工具將成為核心競(jìng)爭(zhēng)力。WebRTC ( Web Real-Time Communications )WebRTC 是一項(xiàng)實(shí)時(shí)通訊技術(shù)，它為前端打開(kāi)了信息傳遞的新世界大門(mén)，對(duì)于絕大多數(shù)前端開(kāi)發(fā)者來(lái)說(shuō)，對(duì)于信息的傳遞還局限于 XMLHttpRequest，升級(jí)到全雙工大家會(huì)用到 WebSocket ，對(duì)于能力閉塞的前端來(lái)說(shuō)，WebRTC 無(wú)疑是打破了前端“楚門(mén)的世界”。
?「全棧架構(gòu)社區(qū)」建立了讀者架構(gòu)師交流群，大家可以添加小編微信進(jìn)行加群。歡迎有想法、樂(lè)于分享的朋友們一起交流學(xué)習(xí)。
掃描添加好友邀你進(jìn)架構(gòu)師群，加我時(shí)注明【姓名+公司+職位】看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多人
往期資源：
