原文地址：https://developer.aliyun.com/article/739880?utm_content=g_1000094950

提起大前端爆雹，總會(huì)有人抱怨“學(xué)不動(dòng)”了撑柔，因?yàn)樾聳|西實(shí)在太多。2019 年的大前端領(lǐng)域雖然并沒(méi)有出現(xiàn)什么顛覆性技術(shù)域那，但是 Flutter咙边、WebAssembly猜煮、Serverless 的火爆發(fā)展還是超乎我們預(yù)期，也讓我們進(jìn)一步看到大前端的融合趨勢(shì)败许。在即將到來(lái)的 2020 年王带，大前端領(lǐng)域又有哪些你不能錯(cuò)過(guò)的技術(shù)趨勢(shì)呢？正值 GMTC2019 全球大前端技術(shù)大會(huì)召開(kāi)之際市殷，我們采訪了大會(huì)四位專(zhuān)題出品人：PayPal Senior Software Engineer 于航，騰訊前端技術(shù)專(zhuān)家 / 總監(jiān)、IVWEB 團(tuán)隊(duì)負(fù)責(zé)人劉恒兵（河伯）荧琼，騰訊 QQ 小程序前端負(fù)責(zé)人黃佳琳缅阳，阿里巴巴前端技術(shù)專(zhuān)家桑世龍（狼叔），請(qǐng)他們對(duì) 2020 年進(jìn)行展望音羞，同時(shí)也闡述 2020 年前端從業(yè)者可能將要面臨的挑戰(zhàn)囱桨。

InfoQ：2019 年即將過(guò)去，在今年大前端領(lǐng)域嗅绰，您印象最深刻（或者認(rèn)為最重要）的一件事情是什么舍肠？
于航： 我印象最深的要屬 WebAssembly 在 2019 年的飛速發(fā)展了。從 3 月份 Mozilla提出 WASI （WebAssembly 系統(tǒng)接口窘面，WebAssembly System Interface）的概念到后來(lái)成立 ByteCode Alliance 聯(lián)盟（字節(jié)碼聯(lián)盟）翠语，再到最近 WebAssembly 進(jìn)入 W3C 成為正式推薦標(biāo)準(zhǔn)，Wasm 在 “out-of-web” 領(lǐng)域的發(fā)展著實(shí)迅速财边。不僅如此肌括，伴隨著谷歌和 Mozilla 強(qiáng)有力的推廣和在 Chrome 以及 Firefox 上對(duì) MVP 標(biāo)準(zhǔn)的快速實(shí)現(xiàn)，Wasm 目前已經(jīng)或者正準(zhǔn)備逐漸取代 PNaCl酣难、SIMD.js 甚至 ASM.js 等昔日的流行技術(shù)谍夭。

劉恒兵（河伯）： 2019 年我認(rèn)為相對(duì)重要的是 TypeScript 的大規(guī)模普及和流行，至少在我們團(tuán)隊(duì)鲸鹦，TypeScript 已經(jīng)跟 JavaScript 并行成為我們的重要選擇了慧库。當(dāng)然選這個(gè)的原因還在于 TypeScript 的普及會(huì)反向推動(dòng) ES6（ECMAScript 6.0）的進(jìn)步和發(fā)展。我們知道在最近 Node.js 13.2.0 版本中馋嗜，正式支持了 ECMAScript modules齐板，這些新特性的逐漸支持其實(shí)也源于社區(qū)內(nèi)先行者們的探索和實(shí)踐，正因?yàn)檫@樣的努力才最后推動(dòng)了 JavaScript 的進(jìn)一步發(fā)展。

黃佳琳： 2019 年印象最深的是小程序的發(fā)展甘磨，以及各大主流 App 紛紛推出小程序平臺(tái)橡羞。小程序發(fā)展至今，熱度不斷攀升济舆，目前小程序平臺(tái)越來(lái)越多卿泽，這也促使各種跨平臺(tái)的小程序框架不斷涌現(xiàn)。已有的框架在性能和兼容性方面也在持續(xù)優(yōu)化（例如 taro 和 uni-app 都會(huì)在本次 GMTC 大會(huì)上有相關(guān)的分享）滋觉，同時(shí)也出現(xiàn)了像 kbone 這樣的新思路签夭。結(jié)合小程序云的開(kāi)發(fā)能力，越來(lái)越低的開(kāi)發(fā)門(mén)檻將持續(xù)刺激小程序的發(fā)展椎侠。

InfoQ：在今年年初您對(duì)大前端領(lǐng)域的趨勢(shì)預(yù)測(cè)中第租，如今看來(lái)跟您預(yù)測(cè)最相符的一個(gè)技術(shù)趨勢(shì)是什么？最超乎您預(yù)期的一個(gè)技術(shù)趨勢(shì)是什么我纪？
桑世龍（狼叔）： 在我看來(lái)慎宾，今年大前端增速放緩，并沒(méi)有出現(xiàn)很多顛覆性的技術(shù)浅悉，反而在細(xì)分領(lǐng)域廝殺得非常厲害趟据，我想這是好事，意味著前端正在走向成熟术健。這點(diǎn)從框架汹碱、語(yǔ)言，甚至是前后端分工上都有體現(xiàn)苛坚。比如 Flutter比被，跨端能力進(jìn)一步增強(qiáng)；比如小程序泼舱，不斷涌現(xiàn)出各種轉(zhuǎn)譯實(shí)現(xiàn)等缀，例如 Wepy、Taro 等娇昙， ReactReconciler 出現(xiàn)之后尺迂，出現(xiàn)了 Remax 框架，通過(guò) Remax 把生成的「虛擬 DOM」渲染到視圖層冒掌，從而做到了使用真正的 React 去構(gòu)建小程序噪裕；比如 React，能講的新特性并不多股毫，在 Create-React-App 火爆之后膳音，類(lèi)似的支付寶的 Umi 框架也正在悄然興起，尤其值得一提的是 Umi UI铃诬，在可視化輔助編程領(lǐng)域可謂一個(gè)新的突破祭陷。但無(wú)論怎么看苍凛，這些都不算是顛覆性的變革，而是在深度上更精進(jìn)一步兵志。

在 Node.js 領(lǐng)域醇蝴，今年新東西也不多。最新已經(jīng)發(fā)布到 v13想罕，lts 是 v12悠栓，Egg.js 的生態(tài)持續(xù)完善，進(jìn)度也不如前兩年按价，成熟之后的創(chuàng)新就少了惭适。在很多框架上加入 TypeScript 似乎已經(jīng)大致正確，比如自身是基于 TypeScript 的 Nest 框架俘枫，比如阿里也開(kāi)源了基于 Egg 生態(tài)的 Midway 框架腥沽。另外，GraphQL 也有很強(qiáng)的應(yīng)用落地場(chǎng)景鸠蚪，尤其是 Apollo 項(xiàng)目帶來(lái)的改變最大，極大地降低了落地成本师溅。已經(jīng)用 Rust 重寫(xiě)的 Deno 在穩(wěn)步發(fā)展中茅信，沒(méi)有火起來(lái)，但也有很高的關(guān)注度墓臭，它不會(huì)替代 Node.js蘸鲸，而會(huì)是基于 Node 之上的一種更好的嘗試。

大家可能會(huì)感覺(jué) Node.js 熱度不夠窿锉，但事實(shí)上很多做 Node.js 的人已經(jīng)投身到研發(fā)模式升級(jí)上了酌摇。對(duì)于今天的 Node.js 來(lái)說(shuō)，會(huì)用很容易嗡载，但用好很難窑多，比如高可用、性能調(diào)優(yōu)洼滚，這些還是非常有挑戰(zhàn)的埂息。我們可以假想一下，流量打網(wǎng)關(guān)遥巴，網(wǎng)關(guān)根據(jù)流量來(lái)實(shí)例化容器千康，加載 FaaS 運(yùn)行時(shí)環(huán)境，然后執(zhí)行對(duì)應(yīng)函數(shù)提供服務(wù)铲掐。在整個(gè)過(guò)程中拾弃，不許關(guān)心服務(wù)器和運(yùn)維工作，不用擔(dān)心高可用問(wèn)題摆霉，是不是前端可以更加輕松地接入 Node.js豪椿？這其實(shí)就是當(dāng)前大廠在前端做的基于 Serverless 的實(shí)踐颠毙，比如基于 FaaS 如何做服務(wù)編排、頁(yè)面渲染砂碉、網(wǎng)關(guān)等蛀蜜。接入 Serverless 不是目的，目的是讓前端能夠借助 Serverless 創(chuàng)造更多業(yè)務(wù)價(jià)值增蹭。

于航：最相符的可能就是 WebAssembly 將會(huì)在 2020 年底成為 Web 新技術(shù)浪潮的主角滴某，不過(guò)現(xiàn)在來(lái)看這個(gè)時(shí)間可能要提前了。Wasm 技術(shù)自 2015 年被提出后經(jīng)過(guò)四年多的發(fā)展滋迈，現(xiàn)在逐漸從規(guī)范制定轉(zhuǎn)向到了技術(shù)實(shí)施的層面霎奢。但實(shí)際上相較于規(guī)范制定所花費(fèi)的時(shí)間，今年以來(lái)饼灿，技術(shù)實(shí)施的進(jìn)度是以肉眼可見(jiàn)的速度在發(fā)展幕侠。因此伴隨著各類(lèi)基礎(chǔ)設(shè)施的完善和落地，相信 Wasm 被真正應(yīng)用到各類(lèi)實(shí)際項(xiàng)目中的日子并不會(huì)太遙遠(yuǎn)碍彭。

劉恒兵（河伯）：相對(duì)符合我的預(yù)測(cè)的技術(shù)趨勢(shì)應(yīng)該是工程提效晤硕。提效對(duì)于企業(yè)研發(fā)來(lái)說(shuō)非常重要，因此大前端領(lǐng)域建設(shè)中如何更好地提效也是最值得關(guān)注的重點(diǎn)之一庇忌。無(wú)論是 React Native 還是 Flutter舞箍，其實(shí)都是在提效（大前端跨端研發(fā)）的基礎(chǔ)之上兼顧性能。另外皆疹，同構(gòu)疏橄、組件、智能研發(fā)略就、Serverless 等等都離不開(kāi)企業(yè)提效捎迫。

讓人驚喜的大前端領(lǐng)域的技術(shù)趨勢(shì)應(yīng)該就是 Wasm 逐漸看到了商業(yè)化的可能，我們目前在播放器場(chǎng)景下通過(guò) Wasm 來(lái)解決瀏覽器不支持 H.265 編解碼的問(wèn)題表牢≌蓿可以看到隨著瀏覽器逐漸完善其基礎(chǔ)能力，大前端的空間也越來(lái)越大初茶。

黃佳琳：與我預(yù)測(cè)相符的是 Flutter 的爆炸性發(fā)展和 Flutter for Web 的發(fā)布颗祝。此外，小程序平臺(tái)也在嘗試和 Flutter 技術(shù)結(jié)合恼布，提升小程序的渲染性能螺戳。

最超乎我預(yù)期的一個(gè)技術(shù)趨勢(shì)是 Docker 在前端領(lǐng)域的快速發(fā)展。Docker 在過(guò)去一年里改變了我們團(tuán)隊(duì)的構(gòu)建方式和部署方式折汞，在效率提升上十分明顯倔幼。

InfoQ：預(yù)測(cè) 2020 年的大前端領(lǐng)域，您認(rèn)為最值得關(guān)注的技術(shù)趨勢(shì)是什么爽待？
于航：伴隨著 WebAssembly Post-MVP 標(biāo)準(zhǔn)的逐漸完善损同，Wasm 在 Web 領(lǐng)域能夠擦出怎樣的火花翩腐？這是我比較關(guān)注的事情。Wasm 能否真正享受到與 JavaScript 一樣的瀏覽器控制能力膏燃？是否能夠直接操縱 DOM 進(jìn)而以更低的成本來(lái)操作和構(gòu)建前端 UI 組件 / 頁(yè)面茂卦？

谷歌和 Mozilla 對(duì) WebAssembly 的大力推廣可見(jiàn)其對(duì)該技術(shù)的重視程度，但在此之前 Wasm 真正落地的項(xiàng)目其實(shí)并不多组哩，因此 2020 年可能會(huì)是一個(gè) Wasm 應(yīng)用百花齊放的年份等龙。不僅如此，在構(gòu)建 AI 以及區(qū)塊鏈應(yīng)用上伶贰，基于 WebAssembly 技術(shù)構(gòu)建的 SSVM 虛擬機(jī)可能也將會(huì)在 2020 年得到大規(guī)模使用蛛砰，此舉將會(huì)把 Wasm 技術(shù)的應(yīng)用場(chǎng)景拓寬到更多領(lǐng)域。

劉恒兵（河伯）：我基于 2019 年大前端技術(shù)趨勢(shì)的發(fā)展再進(jìn)行一下延展黍衙，我認(rèn)為企業(yè)效率以及大前端性能可能會(huì)是 2020 年最值得關(guān)注的大前端趨勢(shì)泥畅。針對(duì)企業(yè)提效這點(diǎn)，未來(lái) Serverless琅翻、基于 AI 的智能研發(fā)位仁、高效的全鏈路監(jiān)控等都能在大前端中扮演更多的角色和戲份；在性能方面望迎，除了瀏覽器逐漸提升基礎(chǔ)能力之外障癌，跨端研發(fā)這樣能讓大前端更為一體的技術(shù)，將會(huì)逐漸被更多團(tuán)隊(duì)所選擇辩尊。

黃佳琳：2020 年的大前端領(lǐng)域，隨著跨平臺(tái)框架康辑、Serverless 等技術(shù)的不斷成熟摄欲，端的邊界會(huì)變得越來(lái)越模糊，大前端將進(jìn)一步走向融合疮薇。在小程序方面胸墙，我認(rèn)為值得關(guān)注的是小程序的工程化趨勢(shì)。Web 項(xiàng)目的工程化在 2019 年日趨規(guī)范按咒，而小程序項(xiàng)目的工程化目前還不夠完善迟隅，我們?cè)谶@方面則做出了嘗試，提供了官方的 CI 構(gòu)建方案励七。隨著小程序項(xiàng)目的復(fù)雜化智袭，小程序工程化方面的更新值得大家在 2020 年去重點(diǎn)關(guān)注。

InfoQ：您認(rèn)為對(duì)于前端從業(yè)者來(lái)說(shuō)掠抬，2020 年可能面臨的最大挑戰(zhàn)是什么吼野？
于航：前端技術(shù)逐漸開(kāi)始不再局限于 Web，或者說(shuō)不再局限于我們所熟知的 JavaScript + CSS + HTML 這三種技術(shù)了两波。隨著前端應(yīng)用體積的逐漸增大瞳步，更多用于提高應(yīng)用性能闷哆、解決大型應(yīng)用工程化構(gòu)建問(wèn)題的解決方案開(kāi)始逐漸涌現(xiàn)。

不僅如此单起，近年來(lái)抱怔，依賴于 Node.js、Chromium 等前端相關(guān)的成熟技術(shù)或底層基礎(chǔ)設(shè)施嘀倒，Electron/NW.js 也讓我們可以將前端技術(shù)應(yīng)用在本地桌面構(gòu)建領(lǐng)域屈留，類(lèi)似的還有 React Native 在移動(dòng)應(yīng)用開(kāi)發(fā)領(lǐng)域所占有的一席之地。

除了應(yīng)用開(kāi)發(fā)領(lǐng)域括儒，基于 Serverless 的 BFF 層也開(kāi)始將后端的“部分控制權(quán)”移交到了前端開(kāi)發(fā)者的手中绕沈。而 2020 年，我相信隨著 WebAssembly 技術(shù)及其相關(guān)基礎(chǔ)組件的逐漸成熟和完善帮寻，其在“ on-web ”和“ out-of-web ”這兩個(gè)領(lǐng)域內(nèi)乍狐，都會(huì)開(kāi)始不斷涌現(xiàn)出更多的、在各類(lèi)新技術(shù)領(lǐng)域和場(chǎng)景下的嘗試固逗，Web 技術(shù)逐漸開(kāi)始向多領(lǐng)域融合浅蚪。再借助 WebAssembly 本身的高性能、高可移植性以及可大量復(fù)用歷史代碼庫(kù)等特性烫罩，相信類(lèi)似 Chrome OS 的“瀏覽器操作系統(tǒng)”又會(huì)席卷而來(lái)惜傲。

為了迎接前端技術(shù)的快速發(fā)展，前端開(kāi)發(fā)者需要不斷學(xué)習(xí)贝攒、快速橫向擴(kuò)展所了解的知識(shí)領(lǐng)域盗誊，這樣才能夠在遇到問(wèn)題時(shí)找到最合適的解決方案，然后再進(jìn)行對(duì)該知識(shí)領(lǐng)域縱向而深入地了解隘弊。

劉恒兵（河伯）：我認(rèn)為 2020 年最大的挑戰(zhàn)是前端技能模型的擴(kuò)展（無(wú)邊界化）哈踱。以前做前端，懂 HTML+JS+CSS 就好了梨熙，但現(xiàn)在不同开镣，Serverless 的發(fā)展讓前端更多參與到中后臺(tái)建設(shè)中，如果要做得更專(zhuān)業(yè)咽扇，就要掌握更多的 Server 知識(shí)邪财。在端上也如此，React Native质欲、小程序树埠、Flutter 等跨端技術(shù)要求我們更多地去掌握 Native 上的技能知識(shí)。所以如何快速適應(yīng)變化和發(fā)展把敞、快速普及知識(shí) / 能力模型變得尤為重要弥奸。

黃佳琳：如果說(shuō) 2020 年大前端融合是趨勢(shì)所在，那么對(duì)前端從業(yè)者來(lái)說(shuō)既是機(jī)遇奋早，也是挑戰(zhàn)盛霎。機(jī)遇在于前端開(kāi)發(fā)的天花板越來(lái)越高赠橙，想象空間越來(lái)越大；挑戰(zhàn)在于對(duì)優(yōu)秀前端開(kāi)發(fā)人員的要求越來(lái)越高愤炸。前端發(fā)展方向趨于多元化期揪，而真正的全能型人才比較稀缺，我們要在關(guān)注領(lǐng)域動(dòng)態(tài)规个、擴(kuò)大知識(shí)面的同時(shí)凤薛，找準(zhǔn)自己專(zhuān)精的方向去鉆研，忌淺嘗輒止诞仓。

桑世龍（狼叔）：不可否認(rèn)缤苫，這依然是大前端最好的時(shí)代。對(duì)于前端從業(yè)者來(lái)說(shuō)墅拭，證明自己的最好辦法不是看你獲得多少資源活玲，而是看你可以創(chuàng)造多少業(yè)務(wù)價(jià)值。雖然在垂直領(lǐng)域的深耕可以讓我們有更多生存空間谍婉，但我更愿意認(rèn)為 Serverless 可以帶來(lái)前端研發(fā)模式上的顛覆舒憾，只有簡(jiǎn)化前后端開(kāi)發(fā)的難度，才能更好地放大前端的業(yè)務(wù)價(jià)值穗熬。最后镀迂，引用我常說(shuō)的一句話送給大家：”少抱怨，多思考唤蔗，未來(lái)更美好探遵。“