提起前端，大多數(shù)人都在兩種狀態(tài)中來回切換，“學(xué)不動(dòng)了”和“扶我起來”，因?yàn)榍岸祟I(lǐng)域的新東西實(shí)在太多了。相比于之前幾年，今年前端領(lǐng)域的變化主要是來自兩方面的催生，一方面是疫情的發(fā)生給企業(yè)帶來了新的挑戰(zhàn)，企業(yè)對于研發(fā)效率的迫切需求促進(jìn)了前端工程化領(lǐng)域的發(fā)展，另一方面是前端領(lǐng)域開始進(jìn)入技術(shù)深水區(qū)，在全棧和多端的影響下，前端需要進(jìn)一步突破瓶頸。

回顧 2020 年，前端領(lǐng)域發(fā)生了哪些讓人印象深刻的事情；展望 2021 年，前端領(lǐng)域又有哪些值得期待的新趨勢。InfoQ 采訪了騰訊前端技術(shù)專家 / 總監(jiān)、IVWEB 團(tuán)隊(duì)負(fù)責(zé)人劉恒兵（河伯），蘇寧消費(fèi)者平臺研發(fā)中心前端技術(shù)總監(jiān)禹立彬，阿里云智能云原生中間件前端負(fù)責(zé)人寒斜，請他們分享觀點(diǎn)、解讀趨勢。

1、2020 年即將過去，在今年大前端領(lǐng)域，您印象最深刻（或者認(rèn)為最重要）的事情是什么？

河伯：回顧 2020，我印象比較深的有三件事：一是 TypeScript 的大范圍普及，二是工程化的發(fā)展，三是全棧深水區(qū)。

相比于 2019 年，2020 年 TypeScript 已經(jīng)深入人心了，各前端框架對 TypeScript 的支持進(jìn)一步推動(dòng)了 TypeScript 的應(yīng)用和普及，語言層面的發(fā)展能非?？焖俚拇龠M(jìn)一個(gè)領(lǐng)域的發(fā)展，正如 Node.js 促進(jìn)前端領(lǐng)域發(fā)展一樣。

2020 年的疫情給整個(gè)社會(huì)帶來的新的挑戰(zhàn)，企業(yè)對于研發(fā)效率的迫切需求進(jìn)一步促進(jìn)了工程化領(lǐng)域的發(fā)展。以前工程化對于很多研發(fā)人員僅為了解或者認(rèn)知僅限于工程構(gòu)建。疫情期間的工程化已經(jīng)演變?yōu)閷ζ髽I(yè)效率的訴求，各個(gè)領(lǐng)域都需要工程化體系幫助遠(yuǎn)程辦公、移動(dòng)辦公提升效率。

2020 年，大前端全棧逐漸進(jìn)入深水區(qū)，不再是僅僅滿足基本的 SSR/BFF 等訴求。對 Node.js 新的期待逐漸變多，承擔(dān)更多的場景。中臺化后統(tǒng)一的服務(wù)、網(wǎng)關(guān)都是需要 Node.js 去承擔(dān)，因此帶來的服務(wù)質(zhì)量、容災(zāi)等各方面訴求就對 Node.js 提出了新的要求，全鏈路監(jiān)控、Serverless 服務(wù)質(zhì)量 / 性能等都需要進(jìn)一步建設(shè)和完善。當(dāng)然，這些挑戰(zhàn)也會(huì)進(jìn)一步促進(jìn) Node.js 的生態(tài)發(fā)展。

禹立彬：云開發(fā)的時(shí)代要到來了。2020 年年中作為評委參加了微信小程序大賽，其中大量參賽作品都使用了小程序云函數(shù)作為常用的小程序服務(wù)，例如登錄注冊、用戶信息存儲等功能。從比賽可以看出，對于不太復(fù)雜的應(yīng)用，云開發(fā)已經(jīng)完全可以滿足業(yè)務(wù)需求，并且由于無需具備服務(wù)端知識，因此大大降低了前端程序員開發(fā)應(yīng)用的技能要求，雖然云開發(fā)在性能上還有一些提升的空間，但是已經(jīng)具備了落地的能力。

寒斜：我印象最深刻的是 Severless 從最初的概念設(shè)想到大規(guī)模落地，這些落地不僅僅是各個(gè)業(yè)務(wù)方應(yīng)用到實(shí)踐中，并產(chǎn)生了良好的成本和效率收益，也包括相關(guān)的配套工具開始慢慢完善?？梢哉f今年是顯而易見的 Serverless 元年。

2、在您對大前端領(lǐng)域趨勢的預(yù)測中，今年與預(yù)期最相符的一個(gè)技術(shù)趨勢是什么？最超乎您預(yù)期的一個(gè)技術(shù)趨勢是什么？

河伯：前端領(lǐng)域的整體發(fā)展基本符合我之前所認(rèn)知的發(fā)展方向，比較超乎預(yù)期的是工程化領(lǐng)域的開發(fā)需求和發(fā)展。當(dāng)然這也得益于疫情的推動(dòng)，在辦公協(xié)同領(lǐng)域有急切的訴求，針對研發(fā)人員有打造移動(dòng)辦公、遠(yuǎn)程辦公的工程化需求。圍繞 git 建設(shè)云 IDE、云工程化是今年大家逐漸認(rèn)識到的需要加大投入的一個(gè)點(diǎn)。

禹立彬：在我看來，與預(yù)期最相符的技術(shù)趨勢是低代碼平臺，作為一家電商公司的前端團(tuán)隊(duì)，我們也遇到了很多業(yè)務(wù)上大致類似的需求，以往都是通過組件化 + 手工修改發(fā)布來開發(fā)，今年通過低代碼平臺的嘗試，減少了前端程序員的工作量，達(dá)到了年初的預(yù)期。

最超乎預(yù)期的技術(shù)趨勢：電商促銷游戲的引擎化、3D 化。今年電商小游戲明顯比以前要精致，玩法也更復(fù)雜，比如天貓雙十一的養(yǎng)貓已經(jīng)有了劇本和偽 3D，可以說電商小游戲已經(jīng)向?qū)I(yè)化靠攏，發(fā)展速度很快，超出了預(yù)計(jì)。

寒斜：在我看來，與預(yù)期最相符的技術(shù)趨勢是跨端技術(shù)的進(jìn)一步普及，越來越多的前端開發(fā)者技能延伸到更廣的領(lǐng)域，不僅僅是停留在開發(fā) web、h5、包括移動(dòng)端、小程序、服務(wù)端、IOT 等都開始駕馭。

超乎預(yù)期的是 Serverless，猶記得去年剛開始有熱度的時(shí)候，大家對這個(gè)概念還是比較陌生，甚至?xí)行┹p微抵觸。但今年再看的話，Severless 領(lǐng)域已經(jīng)全面開花了，各大云廠商都在積極完善技術(shù)與生態(tài)，并且?guī)椭淇蛻暨M(jìn)行大規(guī)模的業(yè)務(wù)落地。

3、根據(jù)您的觀察，2020 年企業(yè)的大前端實(shí)踐中，哪些技術(shù)或工具得到了最廣泛的落地？

河伯：如果從普及和廣泛度來說，我覺得還是 TypeScript、Node.js，因?yàn)檫@應(yīng)該是所有大前端團(tuán)隊(duì)都有涉及到的領(lǐng)域。未來的話，我期望在云 IDE、云工程化領(lǐng)域能夠取得較大進(jìn)展。另外，對于年初大家提及比較多的 WASM 也期望能獲得性能上的突破，能夠真正的在 Web、H5 等場景商用化落地。

禹立彬：我認(rèn)為主要體現(xiàn)在三個(gè)方面：

小程序成為 APP hybrid 的主要方案。蘇寧的 Hybrid 方案較多，H5+JSbridge、

Weex、React Native、小程序等都有涉及。2020 年，因?yàn)樾〕绦蛐阅茌^一般的 H5 好，并且蘇寧在微信、百度、支付寶等平臺也開發(fā)了小程序，因此，蘇寧 App 在實(shí)現(xiàn)小程序運(yùn)行環(huán)境之后，小程序成為了主要的 Hybrid 方案。

低代碼平臺提升研發(fā)效率，根據(jù)蘇寧已使用的低代碼 / 無代碼平臺情況看，運(yùn)行情況良好，成本節(jié)約明顯，以搭建促銷會(huì)場為例，已經(jīng)從從 4-5 人的團(tuán)隊(duì)降低到了 2 個(gè)人。

自建 IDE 對前端工程化的收益超出預(yù)期，2020 年，蘇寧嘗試了在前端內(nèi)部使用 IDE 來集成前端開發(fā)環(huán)境，目前還處于早期階段，由于 IDE 成熟度還不夠，僅能做一些工程化的工作。未來將會(huì)在智能化代碼提示、自動(dòng)化測試等方面繼續(xù)集成，發(fā)揮 IDE 更大的作用。

寒斜：說到“最廣泛”的話，我覺得還是跨端技術(shù)。隨著跨端技術(shù)的成熟，這是必然現(xiàn)象。工具側(cè)，目前到時(shí)候沒有看到比較大型的類似 VSCode 這樣的產(chǎn)品誕生。另外，Serverless 本身的落地情況也是不錯(cuò)的，但我認(rèn)為還沒有達(dá)到最廣泛這個(gè)詞的描述范圍，我覺得或許明年可以用這個(gè)詞。

4、預(yù)測 2021 年的大前端領(lǐng)域，您認(rèn)為最值得關(guān)注的技術(shù)趨勢是什么？

河伯：在我看來，以下三個(gè)方向都很值得關(guān)注：

Node.js 全棧，當(dāng)進(jìn)入深水區(qū)之后，大家要研究的就是如何進(jìn)一步突破瓶頸，包含當(dāng)前遇到的 Serverless 性能（冷啟動(dòng)、并發(fā)）的挑戰(zhàn)。

云工程化 (含 IDE)，提升企業(yè)遠(yuǎn)程辦公、移動(dòng)辦公效率。

智能研發(fā)，改變研發(fā)模式，對于業(yè)務(wù)基礎(chǔ)的、通用的 UI 還原可以釋放資源，讓機(jī)器代替研發(fā)，提升效率。

禹立彬：2021 年最值得關(guān)注的技術(shù)趨勢是云開發(fā)，毫無疑問通過 Serverless 等技術(shù)的應(yīng)用，會(huì)改變前端開發(fā)生態(tài)。實(shí)際上由于 Node.js 的引入，前端開發(fā)已經(jīng)普遍具備全?；哪芰ΓT檻更多的是對服務(wù)器操作系統(tǒng)、中間件、網(wǎng)絡(luò)設(shè)備等知識儲備不足，云開發(fā)解決了這些問題后，前端領(lǐng)域會(huì)獲得更多賦能和空間。但同時(shí)看到，云技術(shù)對中小企業(yè)來說，是很難自建的，會(huì)不會(huì)導(dǎo)致新的技術(shù)鴻溝，還要繼續(xù)觀察。

寒斜：2021 年我覺得最值得關(guān)注的是云原生。前端同學(xué)可能對這個(gè)詞比較陌生，但是它的確跟我們將來的發(fā)展息息相關(guān)。云原生就好比是一個(gè)絕世武功，而前端目前只是一個(gè)江湖中等高手，如果能夠?qū)⒃圃\(yùn)用自如就可以變成一個(gè)絕等高手，可以駕馭更多更復(fù)雜的業(yè)務(wù)需求。

Serverless 技術(shù)本身就是云原生技術(shù)的其中一個(gè)范疇，除此之外，可觀測技術(shù)因其本身需要更多可視化的能力支持，對前端的要求很高，還有容器編排技術(shù)Kubernetes，倒不是說需要我們特別深入研究容器編排本身，而是借助他開發(fā)更多對公司有用的中臺產(chǎn)品。舉個(gè)例子，基于 webIDE 的領(lǐng)域研發(fā)平臺技術(shù)是離不開容器編排的，單點(diǎn)的 WebIDE 只是個(gè)玩具，但一但搭配上 Kubernetes 可以演變成重塑前端研發(fā)的技術(shù)中臺，對企業(yè)而言可以起到降本增效，沉淀數(shù)字資產(chǎn)的妙用，對前端個(gè)體而言增強(qiáng)業(yè)務(wù)生產(chǎn)力，鍛煉深入的技術(shù)能力。還有，Iac(基礎(chǔ)設(shè)施即代碼) 現(xiàn)在也已經(jīng)發(fā)展到可以讓前端同學(xué)參與其中，這就意味著前端業(yè)務(wù)能力可以蔓延到云端基礎(chǔ)設(shè)施，擁有了面向云的開發(fā)能力，總之也印證了那句，凡是可以用 JS 實(shí)現(xiàn)的都會(huì)用 JS 實(shí)現(xiàn)。

對于端側(cè)技術(shù)，我個(gè)人并不關(guān)注其中的某個(gè)單點(diǎn)，而是會(huì)關(guān)注端云結(jié)合會(huì)產(chǎn)生的奇妙化學(xué)反應(yīng)未來趨勢一定是云和端的緊密結(jié)合。

5、您認(rèn)為對于前端從業(yè)者來說，明年可能面臨的最大挑戰(zhàn)是什么？

河伯：前端從業(yè)者一直面臨的挑戰(zhàn)應(yīng)該就是不斷學(xué)習(xí)的能力，從歷史來看，新的技術(shù)層出不窮，需要保持不斷學(xué)習(xí)，那么明年或許一樣，也會(huì)有新的技術(shù)誕生。對于我們自身來講，保持客觀的心態(tài)，認(rèn)知每一個(gè)新的技術(shù)、領(lǐng)域的時(shí)候需要從問題著手去了解（解決了什么問題，對當(dāng)前業(yè)務(wù)的幫助），然后合理應(yīng)用。

針對全棧領(lǐng)域進(jìn)入深水區(qū)后，需要提出更高的質(zhì)量標(biāo)準(zhǔn)要求，搭建工具并抽象解耦復(fù)用，提升服務(wù)質(zhì)量。

禹立彬：隨著前端智能化的發(fā)展，低代碼 / 無代碼平臺的崛起，傳統(tǒng)的前端領(lǐng)域 ---- 切圖、寫簡單效果的前端工程師崗位將會(huì)銳減，前端開發(fā)的主要工作方式會(huì)轉(zhuǎn)換為制造工具，然后通過工具來支持業(yè)務(wù)，因此很多前端從業(yè)者會(huì)遇到轉(zhuǎn)型問題，我個(gè)人覺得 2021 年，大家都需要更多的儲備云知識、編譯知識。

寒斜：隨著云原生對后端能力的重塑，以往復(fù)雜的后端技術(shù)被打包成可用的能力給前端同學(xué)直接使用，意味著前端同學(xué)在業(yè)務(wù)職能上會(huì)得到加強(qiáng)。所以這個(gè)時(shí)候前端同學(xué)能不能接得住就是最大的挑戰(zhàn)，你不去學(xué)習(xí)新的知識，掌握新的概念就很可能被淘汰。

另外我個(gè)人覺得，隨著云原生收斂后端非業(yè)務(wù)性的技術(shù)難題（彈性，韌性，安全，可觀測，灰度等），會(huì)有更多的后端同學(xué)專注業(yè)務(wù)開發(fā)，那么也會(huì)增大他們延展到前端的概率，所以也會(huì)形成一些競爭。

采訪嘉賓

劉恒兵（河伯），騰訊前端技術(shù)專家 / 總監(jiān)，IVWEB 團(tuán)隊(duì)負(fù)責(zé)人，行業(yè)技術(shù)大會(huì) TLC 發(fā)起人。2011 年加入騰訊，NOW 直播、QQ 群課堂、騰訊看點(diǎn)直播等移動(dòng)直播產(chǎn)品技術(shù)負(fù)責(zé)人，負(fù)責(zé)整體架構(gòu)設(shè)計(jì)和開發(fā)。有著多年 Web & H5 移動(dòng)開發(fā)經(jīng)驗(yàn)，對移動(dòng)監(jiān)控和優(yōu)化有深入研究并專注于全棧技術(shù)架構(gòu)優(yōu)化，推動(dòng)組件生態(tài)，致力于打造高復(fù)用、高效率的全棧開發(fā)體系。同時(shí)，IVWEB 團(tuán)隊(duì)是騰訊專業(yè)前端團(tuán)隊(duì)之一，培養(yǎng)多位行業(yè)講師和技術(shù)專家，團(tuán)隊(duì)致力于新技術(shù)研究及行業(yè)交流分享。

禹立彬，蘇寧消費(fèi)者平臺研發(fā)中心前端技術(shù)總監(jiān)，歷任西祠胡同前端負(fù)責(zé)人、途牛旅游網(wǎng)前端架構(gòu)師等職務(wù)。現(xiàn)負(fù)責(zé)蘇寧易購網(wǎng)站前端領(lǐng)域的技術(shù)管理工作。在基于 Node.js 的前后端分離，ReactNative/Weex 開發(fā)有豐富的技術(shù)實(shí)踐經(jīng)歷。

寒斜，阿里云智能云原生中間件前端負(fù)責(zé)人， 16 年加入阿里中間件從事云產(chǎn)品企業(yè)控制臺研發(fā)工作，目前帶隊(duì)負(fù)責(zé)中間件 20 多款云產(chǎn)品的前端研發(fā)工作，主要技術(shù)棧為大前端通用技術(shù)包括 Node.js、TypeScript、React 、 Electron、ReactNative 等對前端研發(fā)效能提升，前端數(shù)字化體驗(yàn)管理體系建設(shè)有多年的實(shí)踐經(jīng)驗(yàn)，目前專注在 Serverless 開發(fā)者工具鏈的建設(shè)，是云原生 Serverless Dev Tools 研發(fā)負(fù)責(zé)人之一。