你知道2021年大前端的發展趨勢是什麼嗎（詳解）

快速發展的前端開發，在每年，都為開發者帶來了新的關鍵字。 2021 年前端發展的關鍵字將有哪些呢？發展的方向又會是什麼呢？參考2019年大前端的發展，不出意外，前端依舊會圍繞小程式、超級APP、跨端開發、前端⼯程化以及新技術運用等幾個面向進行展開（可以參考2019年大前端技術趨勢深度解讀）。

小程式

小程式開發，今年仍是小程式突非猛進的一年，各大主流的App 都上線了小程式功能，各前端團隊也都有了專⻔的小程式開發團隊，以適應更快的小程式開發需求。同時App 中許多關鍵的功能都被小程式取代，甚至有些 App 已經變成 Native小程式殼，上層的應該實作全部都是小程式。

在微信小程式出現以前，大家在談 Hybird、ReactNative，但終歸只是技術層面的狂歡，始終沒有業務屬性的注入。小程式的出現，一方面告訴業界在目前裝置上 Webview 也沒差到哪去，另一方面告訴業界如何讓有能力的商家在超級 APP上進行私域運作。

另一方面，從技術角度說，在上層DSL 的嚴格限制下，超級APP 就可定義符合自己訴求的Web 標準，彌補當前Web 標準的不足，最後和客戶端配合，結合離線、預先載入、客製化Webview 能產出類似NSR 等各種酷炫的技術模型，讓Web 在端內低成本達到Native 版的體驗，端外也不會像Weex 一樣有點小彆扭。

不過由於需要依賴超級APP（微信、支付寶、百度、美團、頭條等），由於各家平台採用的具體方案的差異，造成目前小程式的落地方案也不一樣，有時候需要開發多套程式碼。

跨端開發

跨端開發，RN 態已經非常成熟，或者說看不到太多發展前景，因為目前還停留在0.61版本，似乎1.0版本仍然遙遙無期。因此，今年許多團隊轉戰 Flutter，特別是 Flutter for Web 的 Release，讓 Web 前端重燃希望、躍躍欲試。

同時，蘋果也發布了全新的 UI 系統－SwiftUI，同時，開源社群中 SwiftUI for Web已經在路上了，SwiftUI for Android 還會遠嗎？

跨端開發，Flutter 仍會快速發展，並且會有更多的開發者，Flutter on JS、SwiftUIfor Web&Android 也將是開源態值得期待的事情，畢竟跨端仍沒有一個完美的解決⽅案。

前端工程化

在前端⼯程化，開發者最重要的基本素養就是透過⼯具提升效率，前端開發者在這⽅⾯會持續迭代和優化。

曾經我們談 Yoman，談 CLI 等系列建立工具，但在團隊大了之後始終覺得差點什麼。反觀 Java 同學，從來沒聽過 Spring Boot 配置工程師。

今年許多團隊都在建立完整的前端DevOps 流程具集，這些團隊之間也開始協作共建，不管是Web 還是小程序，從新建專案、開發、聯調（tiao）、部署、測試、發布、維運到監控統計，都有完善的⼯具做保障和提效，今後前端工程也會越來越標準化。

展望2020年前端的發展，前端工程體系一定會更加閉環，不再是一個鷹架這麼簡單，而是會結合IDE，打通業務屬性，從專案初始化、到編寫程式碼、到CI、到灰階、到發布形成一個完成的閉環。

Serverless

Serverless 的爆火幾乎可以歸功於前端。因為 Serverless 能夠較完美的支援Node.js，讓 Serverless 幫助前端開發者解決了使Node.js 過程中的諸多問題。

目前的前端工程師大多都是科班出身，雖不能和正宗的服務端開發同學比，但也可寫很多服務端層的業務邏輯。目前已經有很多公司在做 BFF 層，來滿足這部分訴求，但依舊擺脫不掉運維、機器分配 這條攔路虎。

隨著Serverless 的逐步落地，BFF 這層的代碼會擺脫運維、機器分配等複雜的問題，同時大概率會由前端同學寫這部分代碼，服務端同學專注中台系統的實現。從業務上說，業務的試錯成本也會大幅降低。

隨著 Node.js 成為前端開發者必備技能之後，雲端運算的不斷普及會讓Serverless 觸手可及。當越來越多的開發者嚐到研發的甜頭之後，Serverless 必將對前端的研發模式。

同時，使用Serverless的同學一定會使用 TS。這也意味著，2020 不寫 TS 可能真的就 Out 了。

WebAssembly

WebAssembly 是一種新的字節碼格式，目前主流瀏覽器都已經支WebAssembly。和 JS 需要解釋執行不同的是，WebAssembly 字節碼和底層機器碼很相似，可以快速裝載運行，因此性能相對於 JS 解釋執行而言有了極大的提升。

也就是說WebAssembly 並不是一門程式語言，而是一份字節碼標準，需要用高階程式語言編譯出字節碼放到WebAssembly 虛擬機中才能運行， 瀏覽器廠商需要做的就是根據WebAssembly 規格實現虛擬機器。

有了 WebAssembly，在瀏覽器上可以跑任何語言。從 Coffee 到 TypeScript，到 Babel，這些都是需要轉譯為 js 才能被執行的，而 WebAssembly 是在瀏覽器裡嵌入 vm，直接執行，不需要轉譯，執行效率自然高得多。

舉個例子，AutoCAD 軟體是由美國歐特克有限公司（Autodesk）出品的一款自動電腦輔助設計軟體，可以用來繪製二維製圖和基本三維設計。使用它時，無需懂得編程，即可自動製圖，因此它在全球被廣泛應用於土木建築、裝飾裝潢、工業製圖、工程製圖、電子工業、服裝加工等諸多領域。

AutoCAD 是由大量 C 程式碼編寫的軟體，經歷了非常多的技術變革，從桌面到行動裝置再到 web。之前，InfoQ 上有一個演講，題目是《AutoCAD & WebAssembly: Moving a 30 Year Code Base to the Web》，即透過 WebAssembly，讓很多年代久遠的 C 程式碼在 Web 上可以運行，並且保證了執行效率。

WebAssembly 的核心 JavaScript 引擎 V8 目前已經包含了 Liftoff 這套新款 WebAssembly baseline 編譯器。 Liftoff 簡單快速的程式碼產生器大大提升了 WebAssembly 應用程式的啟動速度。 2019年，很多的公司都開始投入人力進行WebAssembly的學習個改造，相信2020年WebAssembly會經歷爆發性期。

5G

2019年一個繞不開的話題就是5G。首先，5G 頻寬的⼤幅提升帶來傳統 Web 複雜度的進一步提升，如同 2G 到 4G 變化過程中從 WAP 的純文字超連結時代變到 4G 全圖影片時代。 5G 對於變⾰必將是巨大的，但肯定不會蹴就。因為相應的配套設施也需要逐步完善，如硬體效能和瀏覽器的處理速度。

服務端渲染（SSR）肯定是其中個捷徑，輕前端重後台，5G 是橋樑，把渲染放後台，不像同構那麼簡單，需要關注和優化渲染性能。 WebAssembly 或許會在這個機會下快速發展，因為它可以縫對接後台多種語言，後台渲染的最佳化也會帶來前端研發模式和技術架構的變化。

其次，5G 帶來的萬物互聯，將帶來有別於智慧⼿機和普通PC 的多樣化的應用場景，VR、穿戴式裝置、⻋載系統、智慧投影、智慧互動等都會把Web 帶入各種各樣的垂直領域，這也意味著前端將有更多開闊的空間。相信隨著5G的大規模商業，將會誕生一批新的網路巨頭。

感謝大家的閱讀，希望大家收益多多

本文轉自：https://xiangzhihong.blog.csdn.net/article/details/103233487

更多相關知識，請訪問PHP中文網！ ！

以上是你知道2021年大前端的發展趨勢是什麼嗎（詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！