Categories
程式開發

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


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

大前端2020年前瞻:有哪些你不能錯過的技術趨勢? 1

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 可以帶來前端研發模式上的顛覆,只有簡化前後端開發的難度,才能更好地放大前端的業務價值。最後,引用我常說的一句話送給大家:”少抱怨,多思考,未來更美好。“

活動推薦:

前端技術的發展日新月異,Flutter、WebAssembly、Serverless 等框架技術的熱度也是只增不減,在即將到來的GMTC 全球大前端技術大會上,你將看到由PayPal Senior Software Engineer 於航、騰訊IVWEB 團隊負責人劉恆兵、騰訊QQ 小程序前端負責人黃佳琳、阿里巴巴前端技術專家桑世龍帶來的難點解析和一線大廠優秀案例分享。

除了上述分享之外,本次GMTC 還設置了小程序挑戰與應對、音視頻技術、Serverless 實踐、前端測試與安全、大前端工程化、Flutter 實戰、新興編程語言、團隊建設與管理等熱門技術專場。目前大會 9 折購票,點擊「閱讀原文」了解大會日程。有任何問題歡迎聯繫票務魚丸:13269078023(微信同號)。