大前端2020年前瞻：有哪些你不能錯過的技術趨勢？

作者｜張曉楠

文章連結：

https://mp.weixin.qq.com/s/wxGul8muHeFSiaRCKi-NHA

提起大前端，總會有人抱怨“學不動”了，因為新東西實在太多。2019 年的大前端領域雖然并沒有出現什麼颠覆性技術，但是 Flutter、WebAssembly、Serverless 的火爆發展還是超乎我們預期，也讓我們進一步看到大前端的融合趨勢。在即将到來的 2020 年，大前端領域又有哪些你不能錯過的技術趨勢呢？正值 GMTC2019 全球大前端技術大會召開之際，我們采訪了大會四位專題出品人：PayPal Senior Software Engineer 于航，騰訊前端技術專家 / 總監、IVWEB 團隊負責人劉恒兵（河伯），騰訊 QQ 小程式前端負責人黃佳琳，阿裡巴巴前端技術專家桑世龍（狼叔），請他們對 2020 年進行展望，同時也闡述 2020 年前端從業者可能将要面臨的挑戰。

InfoQ：2019 年即将過去，在今年大前端領域，您印象最深刻（或者認為最重要）的一件事情是什麼？

于航： 我印象最深的要屬 WebAssembly 在 2019 年的飛速發展了。從 3 月份 Mozilla提出 WASI （WebAssembly 系統接口，WebAssembly System Interface）的概念到後來成立 ByteCode Alliance 聯盟（位元組碼聯盟），再到最近 WebAssembly 進入 W3C 成為正式推薦标準，Wasm 在 “out-of-web” 領域的發展着實迅速。不僅如此，伴随着谷歌和 Mozilla 強有力的推廣和在 Chrome 以及 Firefox 上對 MVP 标準的快速實作，Wasm 目前已經或者正準備逐漸取代 PNaCl、SIMD.js 甚至 ASM.js 等昔日的流行技術。

劉恒兵（河伯）： 2019 年我認為相對重要的是 TypeScript 的大規模普及和流行，至少在我們團隊，TypeScript 已經跟 JavaScript 并行成為我們的重要選擇了。當然選這個的原因還在于 TypeScript 的普及會反向推動 ES6（ECMAScript 6.0）的進步和發展。我們知道在最近 Node.js 13.2.0 版本中，正式支援了 ECMAScript modules，這些新特性的逐漸支援其實也源于社群内先行者們的探索和實踐，正因為這樣的努力才最後推動了 JavaScript 的進一步發展。

黃佳琳： 2019 年印象最深的是小程式的發展，以及各大主流 App 紛紛推出小程式平台。小程式發展至今，熱度不斷攀升，目前小程式平台越來越多，這也促使各種跨平台的小程式架構不斷湧現。已有的架構在性能和相容性方面也在持續優化（例如 taro 和 uni-app 都會在本次 GMTC 大會上有相關的分享），同時也出現了像 kbone 這樣的新思路。結合小程式雲的開發能力，越來越低的開發門檻将持續刺激小程式的發展。

InfoQ：在今年年初您對大前端領域的趨勢預測中，如今看來跟您預測最相符的一個技術趨勢是什麼？最超乎您預期的一個技術趨勢是什麼？

桑世龍（狼叔）： 在我看來，今年大前端增速放緩，并沒有出現很多颠覆性的技術，反而在細分領域厮殺得非常厲害，我想這是好事，意味着前端正在走向成熟。這點從架構、語言，甚至是前後端分工上都有展現。比如 Flutter，跨端能力進一步增強；比如小程式，不斷湧現出各種轉譯實作，例如 Wepy、Taro 等， ReactReconciler 出現之後，出現了 Remax 架構，通過 Remax 把生成的「虛拟 DOM」渲染到視圖層，進而做到了使用真正的 React 去建構小程式；比如 React，能講的新特性并不多，在 Create-React-App 火爆之後，類似的支付寶的 Umi 架構也正在悄然興起，尤其值得一提的是 Umi UI，在可視化輔助程式設計領域可謂一個新的突破。但無論怎麼看，這些都不算是颠覆性的變革，而是在深度上更精進一步。

在 Node.js 領域，今年新東西也不多。最新已經釋出到 v13，lts 是 v12，Egg.js 的生态持續完善，進度也不如前兩年，成熟之後的創新就少了。在很多架構上加入 TypeScript 似乎已經大緻正确，比如自身是基于 TypeScript 的 Nest 架構，比如阿裡也開源了基于 Egg 生态的 Midway 架構。另外，GraphQL 也有很強的應用落地場景，尤其是 Apollo 項目帶來的改變最大，極大地降低了落地成本。已經用 Rust 重寫的 Deno 在穩步發展中，沒有火起來，但也有很高的關注度，它不會替代 Node.js，而會是基于 Node 之上的一種更好的嘗試。

大家可能會感覺 Node.js 熱度不夠，但事實上很多做 Node.js 的人已經投身到研發模式更新上了。對于今天的 Node.js 來說，會用很容易，但用好很難，比如高可用、性能調優，這些還是非常有挑戰的。我們可以假想一下，流量打網關，網關根據流量來執行個體化容器，加載 FaaS 運作時環境，然後執行對應函數提供服務。在整個過程中，不許關心伺服器和運維工作，不用擔心高可用問題，是不是前端可以更加輕松地接入 Node.js？這其實就是目前大廠在前端做的基于 Serverless 的實踐，比如基于 FaaS 如何做服務編排、頁面渲染、網關等。接入 Serverless 不是目的，目的是讓前端能夠借助 Serverless 創造更多業務價值。

于航：最相符的可能就是 WebAssembly 将會在 2020 年底成為 Web 新技術浪潮的主角，不過現在來看這個時間可能要提前了。Wasm 技術自 2015 年被提出後經過四年多的發展，現在逐漸從規範制定轉向到了技術實施的層面。但實際上相較于規範制定所花費的時間，今年以來，技術實施的進度是以肉眼可見的速度在發展。是以伴随着各類基礎設施的完善和落地，相信 Wasm 被真正應用到各類實際項目中的日子并不會太遙遠。

劉恒兵（河伯）：相對符合我的預測的技術趨勢應該是工程提效。提效對于企業研發來說非常重要，是以大前端領域建設中如何更好地提效也是最值得關注的重點之一。無論是 React Native 還是 Flutter，其實都是在提效（大前端跨端研發）的基礎之上兼顧性能。另外，同構、元件、智能研發、Serverless 等等都離不開企業提效。

讓人驚喜的大前端領域的技術趨勢應該就是 Wasm 逐漸看到了商業化的可能，我們目前在播放器場景下通過 Wasm 來解決浏覽器不支援 H.265 編解碼的問題。可以看到随着浏覽器逐漸完善其基礎能力，大前端的空間也越來越大。

黃佳琳：與我預測相符的是 Flutter 的爆炸性發展和 Flutter for Web 的釋出。此外，小程式平台也在嘗試和 Flutter 技術結合，提升小程式的渲染性能。

最超乎我預期的一個技術趨勢是 Docker 在前端領域的快速發展。Docker 在過去一年裡改變了我們團隊的建構方式和部署方式，在效率提升上十分明顯。

InfoQ：預測 2020 年的大前端領域，您認為最值得關注的技術趨勢是什麼？

于航：伴随着 WebAssembly Post-MVP 标準的逐漸完善，Wasm 在 Web 領域能夠擦出怎樣的火花？這是我比較關注的事情。Wasm 能否真正享受到與 JavaScript 一樣的浏覽器控制能力？是否能夠直接操縱 DOM 進而以更低的成本來操作和建構前端 UI 元件 / 頁面？

谷歌和 Mozilla 對 WebAssembly 的大力推廣可見其對該技術的重視程度，但在此之前 Wasm 真正落地的項目其實并不多，是以 2020 年可能會是一個 Wasm 應用百花齊放的年份。不僅如此，在建構 AI 以及區塊鍊應用上，基于 WebAssembly 技術建構的 SSVM 虛拟機可能也将會在 2020 年得到大規模使用，此舉将會把 Wasm 技術的應用場景拓寬到更多領域。

劉恒兵（河伯）：我基于 2019 年大前端技術趨勢的發展再進行一下延展，我認為企業效率以及大前端性能可能會是 2020 年最值得關注的大前端趨勢。針對企業提效這點，未來 Serverless、基于 AI 的智能研發、高效的全鍊路監控等都能在大前端中扮演更多的角色和戲份；在性能方面，除了浏覽器逐漸提升基礎能力之外，跨端研發這樣能讓大前端更為一體的技術，将會逐漸被更多團隊所選擇。

黃佳琳：2020 年的大前端領域，随着跨平台架構、Serverless 等技術的不斷成熟，端的邊界會變得越來越模糊，大前端将進一步走向融合。在小程式方面，我認為值得關注的是小程式的工程化趨勢。Web 項目的工程化在 2019 年日趨規範，而小程式項目的工程化目前還不夠完善，我們在這方面則做出了嘗試，提供了官方的 CI 建構方案。随着小程式項目的複雜化，小程式工程化方面的更新值得大家在 2020 年去重點關注。

InfoQ：您認為對于前端從業者來說，2020 年可能面臨的最大挑戰是什麼？

于航：前端技術逐漸開始不再局限于 Web，或者說不再局限于我們所熟知的 JavaScript + CSS + HTML 這三種技術了。随着前端應用體積的逐漸增大，更多用于提高應用性能、解決大型應用工程化建構問題的解決方案開始逐漸湧現。

不僅如此，近年來，依賴于 Node.js、Chromium 等前端相關的成熟技術或底層基礎設施，Electron/NW.js 也讓我們可以将前端技術應用在本地桌面建構領域，類似的還有 React Native 在移動應用開發領域所占有的一席之地。

除了應用開發領域，基于 Serverless 的 BFF 層也開始将後端的“部分控制權”移交到了前端開發者的手中。而 2020 年，我相信随着 WebAssembly 技術及其相關基礎元件的逐漸成熟和完善，其在“ on-web ”和“ out-of-web ”這兩個領域内，都會開始不斷湧現出更多的、在各類新技術領域和場景下的嘗試，Web 技術逐漸開始向多領域融合。再借助 WebAssembly 本身的高性能、高可移植性以及可大量複用曆史代碼庫等特性，相信類似 Chrome OS 的“浏覽器作業系統”又會席卷而來。

為了迎接前端技術的快速發展，前端開發者需要不斷學習、快速橫向擴充所了解的知識領域，這樣才能夠在遇到問題時找到最合适的解決方案，然後再進行對該知識領域縱向而深入地了解。

劉恒兵（河伯）：我認為 2020 年最大的挑戰是前端技能模型的擴充（無邊界化）。以前做前端，懂 HTML+JS+CSS 就好了，但現在不同，Serverless 的發展讓前端更多參與到中背景建設中，如果要做得更專業，就要掌握更多的 Server 知識。在端上也如此，React Native、小程式、Flutter 等跨端技術要求我們更多地去掌握 Native 上的技能知識。是以如何快速适應變化和發展、快速普及知識 / 能力模型變得尤為重要。

黃佳琳：如果說 2020 年大前端融合是趨勢所在，那麼對前端從業者來說既是機遇，也是挑戰。機遇在于前端開發的天花闆越來越高，想象空間越來越大；挑戰在于對優秀前端開發人員的要求越來越高。前端發展方向趨于多元化，而真正的全能型人才比較稀缺，我們要在關注領域動态、擴大知識面的同時，找準自己專精的方向去鑽研，忌淺嘗辄止。

桑世龍（狼叔）：不可否認，這依然是大前端最好的時代。對于前端從業者來說，證明自己的最好辦法不是看你獲得多少資源，而是看你可以創造多少業務價值。雖然在垂直領域的深耕可以讓我們有更多生存空間，但我更願意認為 Serverless 可以帶來前端研發模式上的颠覆，隻有簡化前後端開發的難度，才能更好地放大前端的業務價值。最後，引用我常說的一句話送給大家：”少抱怨，多思考，未來更美好。“