導(dǎo)

Lead

語(yǔ)

如今的前端早已不再拘泥于滿(mǎn)足頁(yè)面展示，而是開(kāi)始延展到通過(guò)全棧來(lái)閉環(huán)產(chǎn)品。這表明前端已經(jīng)有能力透過(guò)業(yè)務(wù)深入產(chǎn)業(yè)，繼而影響商業(yè)結(jié)果。這種表象的改變背后是本質(zhì)的轉(zhuǎn)變，從更為宏觀(guān)的角度來(lái)說(shuō)，前端正在通過(guò)持續(xù)的技術(shù)革新和技術(shù)融合不斷突破自身邊界，進(jìn)而重新定義自身價(jià)值。

時(shí)光荏苒，非比尋常的一年即將過(guò)去。在這過(guò)去的一年中，與其說(shuō)前端的平穩(wěn)期即將到來(lái)，不如說(shuō)前端反而進(jìn)入了技術(shù)深水區(qū)。換言之，在全棧和多端的影響下，前端領(lǐng)域里“術(shù)業(yè)有專(zhuān)攻”的時(shí)代已經(jīng)到來(lái)。如今的前端早已不再拘泥于滿(mǎn)足頁(yè)面展示，而是開(kāi)始延展到通過(guò)全棧來(lái)閉環(huán)產(chǎn)品。這表明前端已經(jīng)有能力透過(guò)業(yè)務(wù)深入產(chǎn)業(yè)，繼而影響商業(yè)結(jié)果。這種表象的改變背后是本質(zhì)的轉(zhuǎn)變，從更為宏觀(guān)的角度來(lái)說(shuō)，前端正在通過(guò)持續(xù)的技術(shù)革新和技術(shù)融合不斷突破自身邊界，進(jìn)而重新定義自身價(jià)值。在這種大變革的時(shí)代背景下，騰訊IMWeb前端團(tuán)隊(duì)也正在與時(shí)俱進(jìn)得進(jìn)行著技術(shù)更新、優(yōu)化與升級(jí)，結(jié)合自身這一年的快速發(fā)展，IMWeb團(tuán)隊(duì)為大家?guī)?lái)2020年大前端技術(shù)趨勢(shì)解讀。

回顧今年的技術(shù)趨勢(shì)

本文擬通過(guò)回顧2020年七大主要的前端技術(shù)趨勢(shì)來(lái)展現(xiàn)前端早已由單純工具解決問(wèn)題的屬性逐步轉(zhuǎn)變?yōu)樯钊氘a(chǎn)品機(jī)制解決商業(yè)問(wèn)題的角色。前端開(kāi)發(fā)者的關(guān)注點(diǎn)也早已不是如何使資源利用效率更高，頁(yè)面體驗(yàn)更優(yōu)以及保證業(yè)務(wù)的穩(wěn)定輸出，而是更為關(guān)注產(chǎn)品能力、產(chǎn)業(yè)模式、數(shù)據(jù)建設(shè)以及商業(yè)轉(zhuǎn)化。

開(kāi)源站點(diǎn)bestofjs.org收錄了Github上1500個(gè)開(kāi)源項(xiàng)目，并且還基于?GithubTrending API?的公開(kāi)數(shù)據(jù)，更新統(tǒng)計(jì)這些項(xiàng)目的Stars新增趨勢(shì)。基于Bestofjs去年的2019年JavaScript明星項(xiàng)目（https://risingstars.js.org/2019/zh）報(bào)告和近一年Trending排行數(shù)據(jù)，下面展示了Top30的前端重點(diǎn)項(xiàng)目，并對(duì)此進(jìn)行簡(jiǎn)單的介紹。

相比于去年，學(xué)習(xí)資源越來(lái)越豐富了，Top100 內(nèi)有14個(gè)項(xiàng)目是與前端基礎(chǔ)學(xué)習(xí)相關(guān)的，側(cè)面可以看出前端行業(yè)的繁榮；同時(shí)也反映出知識(shí)和人才的迭代速度是非常快的。Deno超過(guò)Vue.js一躍成為過(guò)去一年Star增長(zhǎng)最快的開(kāi)源項(xiàng)目，打破了Vue.js連續(xù)4年登頂?shù)膲艛?/strong>。雖然在工業(yè)屆使用Deno落地在業(yè)務(wù)場(chǎng)景的情況還比較少，但是目前的發(fā)展勢(shì)頭還是不錯(cuò)的。還記得因?yàn)镈eno的出現(xiàn)，出現(xiàn)的那句經(jīng)典的“求不要更新了，老子學(xué)不動(dòng)了”。事實(shí)證明“學(xué)不動(dòng)的時(shí)代” 并沒(méi)有到來(lái)。除了跟學(xué)習(xí)相關(guān)的項(xiàng)目，倘若只關(guān)注垂直領(lǐng)域的技術(shù)項(xiàng)目，我們會(huì)驚喜地發(fā)現(xiàn)：

• TypeScript持續(xù)升溫，依舊保持著高速成長(zhǎng)的狀態(tài)，未來(lái)的潛力不可限量；

• 通過(guò)項(xiàng)目分布的情況，明顯能看到React生態(tài)圈>> Vue 生態(tài)圈>> Angular 生態(tài)圈；

• 伴隨著WebAssembly核心規(guī)范成為瀏覽器的標(biāo)準(zhǔn)，繼HTML、CSS和JS之后，像C/C++、Rust、Go等語(yǔ)言編寫(xiě)的高性能模塊也在瀏覽器上運(yùn)行。相信在不久的將來(lái)，Web應(yīng)用的桌面客戶(hù)端化，也將成為一種趨勢(shì)；

• Strapi位列Nodejs相關(guān)領(lǐng)域的第三名側(cè)面反應(yīng)了低代碼的趨勢(shì)還在持續(xù)升溫，各家都在研制自己的低代碼平臺(tái)來(lái)提升開(kāi)發(fā)效率；

• JS Framework 相關(guān)的領(lǐng)域，Next.js超越Nest成為了今年的冠軍。在強(qiáng)大的React體系的影響下，業(yè)務(wù)越來(lái)越多的人選擇使用同構(gòu)和直出的方案來(lái)構(gòu)建Web應(yīng)用；

• Serverless Framework 也進(jìn)入了前Top100，雖然排名不高，但是已經(jīng)開(kāi)始慢慢展示出了可持續(xù)發(fā)展的勢(shì)頭。對(duì)于一個(gè)被廠(chǎng)商裹挾的技術(shù)而言，這一切來(lái)之不易；

• 大前端生態(tài)系統(tǒng)已經(jīng)逐步完善，前端工程化逐步完善，DevOps已經(jīng)走向了系統(tǒng)化的發(fā)展方向，前端技術(shù)已經(jīng)進(jìn)入深水區(qū)；

• 由于直播行業(yè)的火熱，以及疫情的影響，音視頻領(lǐng)域在過(guò)去的一年也有著蓬勃的發(fā)展。在前端領(lǐng)域WebRTC的技術(shù)在持續(xù)升溫。

接下來(lái)，主要盤(pán)點(diǎn)下在即將過(guò)去的2020年前端行業(yè)發(fā)生了哪些重要的事情，同時(shí)分享下騰訊IMWeb團(tuán)隊(duì)在過(guò)去一年中都做了哪些工作。

總結(jié)2020年度趨勢(shì)

1、TypeScript爆發(fā)增長(zhǎng)

從2019年開(kāi)始，社區(qū)內(nèi)掀起了學(xué)習(xí)使用TypeScript的浪潮，從npm的下載量來(lái)看，近幾年TypeScript呈現(xiàn)爆發(fā)式增長(zhǎng)，甚至在2020年在Github語(yǔ)言的排行榜上躍居到了第四位。

數(shù)據(jù)來(lái)源：https://octoverse.github.com

相比于同類(lèi)型工具，如Elm、ClosureScript、CoffeeScript等，TypeScript可謂是一馬當(dāng)先：

數(shù)據(jù)來(lái)源：stateofjs2019

在最新的2020Stack Overflow Survey 中，TS受大家喜愛(ài)程度排名第二，僅次于Rust：

數(shù)據(jù)來(lái)源：StackOverflow Survey Result 2020

在如此爆炸式的增長(zhǎng)浪潮中，TypeScript必將給前端生態(tài)帶來(lái)新的氣象，同時(shí)也會(huì)促使前端開(kāi)發(fā)者更多地關(guān)注代碼設(shè)計(jì)、易用可維護(hù)、編碼原則及設(shè)計(jì)理念等方面的知識(shí)。

IMWeb團(tuán)隊(duì)自2018年起開(kāi)啟第一個(gè)TypeScript項(xiàng)目，至今已完成絕大部分業(yè)務(wù)向TS的轉(zhuǎn)型遷移。在多端復(fù)用模塊代碼中，以TS+ Jest 為基本要求，保證公共代碼的可維護(hù)性和可測(cè)試性：在TS編寫(xiě)中，我們更多地遵循面向?qū)ο笤O(shè)計(jì)原則（SOLID原則、KISS原則等），適當(dāng)?shù)倪\(yùn)用設(shè)計(jì)模式，幫助更好地進(jìn)行代碼開(kāi)發(fā)和維護(hù)。同時(shí)，在TS踐行中，輔以單元測(cè)試覆蓋，可以指導(dǎo)我們更好地拆分組織代碼，編寫(xiě)可測(cè)試的模塊，在公共核心業(yè)務(wù)模塊中覆蓋單測(cè)用例。

2、三大框架React當(dāng)先

前端界的三大主流框架：React、Angular和Vue.js，今年仍是炙手可熱。此外，在過(guò)去一年，這三大主流框架還迭代了許多版本。在三大框架之中，根據(jù)過(guò)去一年的NPM下載量，React仍然穩(wěn)居首位。

2020年的StackOverflow Trends顯示React> Vue.js > Angular；

在Github2020年的新增Stars數(shù)量上，Vue.js依舊超過(guò)了React。

下面分別總結(jié)各個(gè)框架 2020年的動(dòng)態(tài)：

1

React

React自發(fā)布v16版本后，迭代的版本都是以修復(fù)、優(yōu)化為主，當(dāng)前最新版本v17.0.1，今年8月正式推出的v17版本，并無(wú)顯著的新特性，而是一個(gè)”墊腳石“版本。為了后續(xù)能兼容 v18版本，或者說(shuō)是為了能達(dá)到”逐步“升級(jí)的目的，這也能規(guī)避當(dāng)項(xiàng)目的依賴(lài)存在多個(gè)版本React時(shí)出現(xiàn)問(wèn)題。這種逐步升級(jí)的理念與VUE的漸進(jìn)式兼容升級(jí)頗為相似。

2

Vue.js

2020年Vue.js的重大變化無(wú)疑是Vue.js3.0 的發(fā)布，有了非常多新特性，總結(jié)如下：

對(duì)Vue.js進(jìn)行了完全Typescript重構(gòu)，讓Vue.js源碼易于閱讀、開(kāi)發(fā)和維護(hù)；

重寫(xiě)了虛擬Dom的實(shí)現(xiàn)，對(duì)編譯模板進(jìn)行優(yōu)化、組件初始化更高效， 性能上有較大的提升；Vue.js2對(duì)象式組件存在一些問(wèn)題：難以復(fù)用邏輯代碼、難以拆分超大型組件、代碼無(wú)法被壓縮和優(yōu)化、數(shù)據(jù)類(lèi)型難以推倒等問(wèn)題；而CompositionAPI 則是基于函數(shù)理念，去解決上述問(wèn)題，使用函數(shù)可以將統(tǒng)一邏輯的組件代碼收攏一起達(dá)到復(fù)用，也更有利于構(gòu)建時(shí)的tree-shaking檢測(cè)，這個(gè)使用起來(lái)有些類(lèi)似于React的hook；

以上變化都秉持著VUE的“漸進(jìn)式框架“ 理念， Vue.js3.0 持續(xù)開(kāi)發(fā)兼容舊的版本，即使升級(jí)了Vue.js3.0 也可以按照之前的組件開(kāi)發(fā)模式進(jìn)行開(kāi)發(fā)。

3

Angular

Angular在今年11月推出了v11.0.0版本，主要變化為：

將其依賴(lài)的Typescript版本升級(jí)至4.0,不再支持Typescript3.9 版本；

Angularv11 在繼v10棄用IE9、10和IEmobile 支持后，將其完全刪除；

加入了Webpack5，升級(jí)至 Angularv11 版本，即可使用Webpack5 的新特性，如更快的構(gòu)建速度、模塊聯(lián)邦等。

IMWeb團(tuán)隊(duì)的前端技術(shù)棧主要圍繞著React體系進(jìn)行構(gòu)建的，包含了基于Webpack的最佳實(shí)踐IMFLOW，以及圍繞著React體系完成的組件生態(tài)。在三大框架逐漸同質(zhì)化的今天，未來(lái)的你使用何種框架就得由工作崗位的需求來(lái)決定了。

3、WASM展露頭角

WebAssembly源于Mozilla發(fā)起的Asm.js項(xiàng)目，也被稱(chēng)為“設(shè)計(jì)補(bǔ)充 JavaScript”，其本解碼速度比JS解析快得多，讓高性能的Web應(yīng)用在瀏覽器上運(yùn)行成為可能。該模塊可在瀏覽器中的專(zhuān)有虛擬機(jī)上執(zhí)行，與JavaScript虛擬機(jī)共享內(nèi)存和線(xiàn)程等資源。目前主流瀏覽器基本都支持了WebAssembly。

在2019年12月15日WebAssembly正式成為WorldWide Web Consortium (W3C) 的標(biāo)準(zhǔn)，加入到了HTML、CSS和JavaScript的行列，繼而成為瀏覽器官方的標(biāo)準(zhǔn)的第四門(mén)語(yǔ)言。WebAssembly也正式抵達(dá)了1.0版本，獲得了主流瀏覽器Firefox、Chrome、Safari和Edge的支持。

首屆WebAssemblySubmmit 2020年在硅谷舉行(https://Webassembly-summit.org/)，會(huì)議上討論了諸如：關(guān)于構(gòu)建 WebAssembly新型生態(tài)系統(tǒng)；WebAssembly的未來(lái)以及WebAssembly與諸如Javascript等其他支持技術(shù)的關(guān)系；WebKit的WebAssembly實(shí)現(xiàn)的編譯、啟動(dòng)和運(yùn)行時(shí)等benchmarking領(lǐng)域進(jìn)行的研究和開(kāi)發(fā)；其中Ben演講的“Expandingthe PIE” ；

短短幾年的時(shí)間里，WebAssembly取得了長(zhǎng)足的進(jìn)展。

Ability

目前有100多個(gè)不同的項(xiàng)目使用WebAssembly。這些應(yīng)用包括：自由手繪應(yīng)用程序、媒體播放器、Gameboy仿真器、瀏覽器內(nèi)壓縮/解壓應(yīng)用程序，甚至還有一個(gè)AR數(shù)獨(dú)解謎應(yīng)用程序。

Producer

目前大約有15種編程語(yǔ)言可以以穩(wěn)定的、面向生產(chǎn)的方式編譯到WebAssembly。其中包括：.Net，AssemblyScript，C，Haskell，Rust和Zig等，還有更多的正在開(kāi)發(fā)中。

Interoperability

WebAssembly現(xiàn)在有了一個(gè)基于能力的API設(shè)計(jì)，它允許WebAssembly代碼與外部世界交互，同時(shí)仍然保留了WebAssembly的沙盒特性。此外，曾經(jīng)強(qiáng)大而有用的 WebAPI 集合現(xiàn)在正在不斷得到實(shí)現(xiàn)。

Embedder

現(xiàn)在可以在許多不同的平臺(tái)上運(yùn)行WebAssembly。目前正在積極開(kāi)發(fā)的運(yùn)行時(shí)大約有20個(gè)。WebAssembly不再局限于瀏覽器。這里有區(qū)塊鏈實(shí)現(xiàn)、無(wú)服務(wù)器應(yīng)用程序、操作系統(tǒng)可執(zhí)行程序和物聯(lián)網(wǎng)實(shí)現(xiàn)的例子，它們被部署在獨(dú)立和受限制的嵌入式運(yùn)行時(shí)環(huán)境中。

看到這么多不同的項(xiàng)目和運(yùn)行時(shí)，真是令人驚訝！而2021年的WebAssemblySubmmit 會(huì)在4月舉行。隨著WebAssembly的不斷發(fā)展，Web中文興趣組·WebAssembly 研討會(huì)也在今年的8月29日在線(xiàn)上舉行，重點(diǎn)探討了WebAssembly技術(shù)應(yīng)用與實(shí)現(xiàn)，尤其是在多媒體、編譯器以及新型語(yǔ)言、仿真器、Web前端框架、虛擬機(jī)、云、游戲引擎、工具等多方面的應(yīng)用場(chǎng)景。在未來(lái)的一年里，WebAssembly會(huì)有更多的機(jī)會(huì)出現(xiàn)在大家的面前，我們也會(huì)在業(yè)務(wù)中落地基于WebAssembly的應(yīng)用。

WebAssembly的出現(xiàn)為Web開(kāi)發(fā)者打開(kāi)了一扇新的大門(mén)。在去年，wasm對(duì)你來(lái)說(shuō)也許還僅是技術(shù)文章中的一個(gè)常見(jiàn)名詞，你壓根想不到他會(huì)在瀏覽器中得到怎樣的應(yīng)用，什么時(shí)候會(huì)被大公司真正用起來(lái)。在今年，你很有可能已在不知不覺(jué)中成為wasm的使用者了。目前國(guó)內(nèi)外越來(lái)越多的團(tuán)隊(duì)基于wasm進(jìn)行了業(yè)務(wù)實(shí)踐。

IMWeb團(tuán)隊(duì)擅長(zhǎng)的音視頻領(lǐng)域，我們通過(guò)將ffmpeg編譯為wasm版本且在瀏覽器中運(yùn)行，將過(guò)去處于黑盒中，只有瀏覽器底層才能使用的音視頻編解碼能力徹底解放。目前我們可以在前端頁(yè)面中對(duì)音視頻流直接進(jìn)行處理，在完全不依賴(lài)后臺(tái)的情況下，便捷、高效的實(shí)現(xiàn)了視頻播放幀預(yù)覽與視頻幀截圖等功能。目前團(tuán)隊(duì)正在進(jìn)一步探索wasm在音視頻以及其他過(guò)去前端無(wú)法觸及的領(lǐng)域的可行性實(shí)踐。

4、Low-Code恰逢其時(shí)

從2014年Forrester的研究報(bào)告提出“low-code”一詞到今天，低代碼領(lǐng)域持續(xù)升溫。從低代碼領(lǐng)域的行業(yè)角度看，2017年后，微軟、甲骨文等各大廠(chǎng)家紛紛加入了低代碼賽道的競(jìng)爭(zhēng)。近年來(lái)，獲得3.6億美元融資的Outsystems更是成為低代碼領(lǐng)域海外市場(chǎng)的一只獨(dú)角獸。國(guó)內(nèi)方面，也不乏云鳳蝶、點(diǎn)石、iVX、輕流、積木等平臺(tái)的誕生，低代碼產(chǎn)品領(lǐng)域的蓬勃發(fā)展，正成為特定場(chǎng)景軟件開(kāi)發(fā)的重要趨勢(shì)。

區(qū)分一下no-code、low-code、pro-code

no-code：自己編程給自己用，給用戶(hù)的感覺(jué)就是一個(gè)軟件。因此，平臺(tái)不會(huì)給自己定位成一個(gè)“編程工具”。主要是通過(guò)圖形化的操作來(lái)降低學(xué)習(xí)曲線(xiàn)，類(lèi)似PPT、Excel等。在垂直領(lǐng)域的特定場(chǎng)景中，才能做到好用。

low-code：編程給其他人用，通過(guò)降低專(zhuān)業(yè)難度，讓運(yùn)營(yíng)人員（CitizenDeveloper）也參與進(jìn)來(lái)。平臺(tái)評(píng)估好預(yù)制的場(chǎng)景和需求，減少?gòu)念^寫(xiě)代碼的成本，一定程度上可以通過(guò)圖形化的方式滿(mǎn)足業(yè)務(wù)訴求。

pro-code：日常軟件開(kāi)發(fā)過(guò)程中的手寫(xiě)代碼，可以通過(guò)邏輯和模塊復(fù)用來(lái)進(jìn)行提效。

區(qū)分了概念之后，還需要考慮面向的用戶(hù)。不同的用戶(hù)對(duì)應(yīng)著不同的解決方案。用戶(hù)大致分為三類(lèi)：前端開(kāi)發(fā)人員、后臺(tái)開(kāi)發(fā)人員、產(chǎn)品運(yùn)營(yíng)人員。

為什么要做低代碼？

基于目前可視化和模型驅(qū)動(dòng)理念，結(jié)合當(dāng)下大前端跨端體驗(yàn)的融合技術(shù)以及云原生的支持，通過(guò)低代碼的方案可以大幅度降低業(yè)務(wù)交付的成本，為業(yè)務(wù)提供一種全新的開(kāi)發(fā)范式。而且，可視化搭建去完成業(yè)務(wù)可以讓產(chǎn)品和運(yùn)營(yíng)人員（CitizenDeveloper）參與進(jìn)來(lái)，可以極大得釋放軟件開(kāi)發(fā)者的人力瓶頸，也進(jìn)一步促進(jìn)了技術(shù)和業(yè)務(wù)的深度合作。

低代碼應(yīng)該具備哪些核心能力？

基礎(chǔ)物料的搭建和接入是保證業(yè)務(wù)可視化的基礎(chǔ)。無(wú)論是行業(yè)的開(kāi)源組件，還是團(tuán)隊(duì)自定義的基礎(chǔ)組件，搭建平臺(tái)都應(yīng)該無(wú)縫地進(jìn)行預(yù)期內(nèi)的接入和控制。這是因?yàn)?#xff0c;從業(yè)務(wù)長(zhǎng)期迭代的角度來(lái)看，最耗費(fèi)人力的一定是最頻繁的業(yè)務(wù)組件。解決定制化的組件和接入組件由此成為低代碼平臺(tái)長(zhǎng)期需要解決的最核心問(wèn)題。

編排能力就是頁(yè)面排版和對(duì)邏輯編排。無(wú)論是特定場(chǎng)景的頁(yè)面的組件邏輯，還是用戶(hù)自定義的交互（包括用戶(hù)行為的服務(wù)端能力支持）都應(yīng)該通過(guò)邏輯編排能力進(jìn)行支持。大部分的頁(yè)面搭建工作都是在桌面端完成的，但是頁(yè)面渲染的產(chǎn)物可能是多種形式的，比如：PCWeb、H5Web、小程序，那么在搭建運(yùn)行時(shí)的實(shí)時(shí)可視化和搭建完成的多端適配和多場(chǎng)景適配，這樣就解決了跨技術(shù)棧和跨端問(wèn)題；

雖然是low-code的設(shè)計(jì)方案，但還是希望輸出的代碼是可以進(jìn)行二次開(kāi)發(fā)的，因此最好能pro-code與low-code互相轉(zhuǎn)換。編程產(chǎn)物分為初級(jí)產(chǎn)物、中間產(chǎn)物和最終產(chǎn)物。產(chǎn)物的豐富程度，直接決定了平臺(tái)的可復(fù)用性和靈活性。無(wú)論是基于低代碼開(kāi)發(fā)和源碼的混合開(kāi)發(fā)，還是基于低代碼平臺(tái)的二次開(kāi)發(fā)，都是low-code平臺(tái)需要考慮的事情。

運(yùn)行時(shí)能力也非常重要，對(duì)開(kāi)發(fā)者來(lái)說(shuō)是一個(gè)強(qiáng)大的編輯器引擎，可以方便快速接入各類(lèi)組件和中間件。而對(duì)于運(yùn)營(yíng)人員（CitizenDeveloper）來(lái)說(shuō)同樣也很重要，針對(duì)不同的產(chǎn)品和業(yè)務(wù)場(chǎng)景，需要定制基礎(chǔ)業(yè)務(wù)模版和和業(yè)務(wù)配置，方便他們快速地進(jìn)行差異化的功能設(shè)計(jì)。

協(xié)作能力和數(shù)據(jù)分析能力就不言自明了。低代碼平臺(tái)的核心就是降低對(duì)專(zhuān)業(yè)性的要求。因此，使用者無(wú)論是誰(shuí)，都應(yīng)該有更高的效率提升。而數(shù)據(jù)統(tǒng)計(jì)和分析是所有平臺(tái)都應(yīng)該具備的基礎(chǔ)能力，這里就不詳細(xì)描述了。

那么，整理了核心能力如下：基礎(chǔ)資料的搭建、基礎(chǔ)資料的接入、業(yè)務(wù)編排能力、界面渲染能力、代碼轉(zhuǎn)換能力以及運(yùn)行時(shí)能力、協(xié)作能力和數(shù)據(jù)分析能力。以上就是我認(rèn)為的低代碼方案應(yīng)該具備的能力模型。

為什么說(shuō)low-code是恰逢其時(shí)呢？因?yàn)闊o(wú)論是跨端和跨平臺(tái)領(lǐng)域的強(qiáng)大適配能力，還是大前端工程體系的有力支撐，都已經(jīng)將低代碼領(lǐng)域的價(jià)值逐步推到人們面前，低代碼是業(yè)務(wù)發(fā)展和技術(shù)探索的必然選擇。

2020年IMWeb團(tuán)隊(duì)在低代碼領(lǐng)域不斷優(yōu)化升級(jí)面向運(yùn)營(yíng)場(chǎng)景的頁(yè)面搭建平臺(tái)Vision，在真正意義上實(shí)現(xiàn)了對(duì)運(yùn)營(yíng)系統(tǒng)和素材開(kāi)發(fā)的解耦，并兼容React，Vue.js， JQuery 等不同技術(shù)棧，實(shí)現(xiàn)了PC、H5、微信小程序的可視化運(yùn)營(yíng)的頁(yè)面搭建。

與此同時(shí)，在Vision系統(tǒng)的基礎(chǔ)上，我們沉淀出一套可視化搭建引擎Gems，針對(duì)日漸增加的B側(cè)需求，以Gems為核心開(kāi)發(fā)了專(zhuān)注于搭建管理系統(tǒng)的平臺(tái)Hulk，實(shí)現(xiàn)了相對(duì)運(yùn)營(yíng)頁(yè)面更為復(fù)雜的管理頁(yè)面甚至數(shù)據(jù)接口的可視化搭建與生成。

我們的目標(biāo)是通過(guò)Hulk實(shí)現(xiàn)對(duì)80%日常業(yè)務(wù)頁(yè)面的“0代碼”搭建。通過(guò)Node.js統(tǒng)一管理數(shù)據(jù)接口，可以通過(guò)圖形化配置，快速創(chuàng)建接口，組合不同數(shù)據(jù)源的數(shù)據(jù)；支持多組件靈活配置生成頁(yè)面的能力，擴(kuò)展組件庫(kù)，開(kāi)發(fā)常用組件；復(fù)雜頁(yè)面和接口邏輯支持低代碼擴(kuò)展。

Low-Code領(lǐng)域的發(fā)展在2020年極其迅猛。從最早的通過(guò)模塊化搭建解決營(yíng)銷(xiāo)活動(dòng)領(lǐng)域的問(wèn)題發(fā)展到現(xiàn)在可以通過(guò) low-code來(lái)解決內(nèi)部復(fù)雜的中后臺(tái)業(yè)務(wù)需求，既適用于面向C側(cè)用戶(hù)的產(chǎn)品運(yùn)營(yíng)，也貼合B側(cè)用戶(hù)的數(shù)據(jù)管理需求。

5、全棧開(kāi)發(fā)持續(xù)深耕

從DevOps到NoOps的路徑之一，便是目前大家都在嘗試的Serverless了。自從2012年有了Serverless的概念開(kāi)始，至今已經(jīng)8個(gè)年頭了。近年來(lái)隨著國(guó)內(nèi)的云廠(chǎng)商，如騰訊云、阿里云、華為云對(duì)Serverless的支持，并且伴隨著小程序云開(kāi)發(fā)的普及，國(guó)內(nèi)的開(kāi)發(fā)者對(duì)Serverless的使用已經(jīng)非常熟悉了。

今年9月CodingSans 聯(lián)合其9個(gè)合作伙伴，發(fā)布了Serverless2020 年度狀態(tài)報(bào)告。調(diào)查結(jié)果顯示：有75%的開(kāi)發(fā)者會(huì)在公司使用這項(xiàng)技術(shù)。如此高的Yes也基本反映出了這樣的技術(shù)已經(jīng)被大眾普遍接受并使用。

我們可以看到開(kāi)發(fā)者選擇應(yīng)用Serverless的場(chǎng)景有很多，比如：為小程序、Web、Mobile提供基礎(chǔ)性的API服務(wù)，大規(guī)模批處理任務(wù)處理，Web站點(diǎn)、DevOps的工具以及GraphQLAPI能力。

目前最大的難題是調(diào)試，這主要是由Serverless的架構(gòu)復(fù)雜性所引起的。而供應(yīng)商之間的巨大差異也使得更換或者說(shuō)遷移供應(yīng)商變得非常得不償失。

與其說(shuō)Serverless是一項(xiàng)技術(shù)，不如說(shuō)Serverless是一種理想的工作模式，是一種專(zhuān)注于業(yè)務(wù)價(jià)值的思考。單純的通過(guò)函數(shù)進(jìn)行業(yè)務(wù)交付，而不再需要關(guān)心解決業(yè)務(wù)問(wèn)題之外的事情，比如：那些非常繁瑣的基礎(chǔ)設(shè)施。托管服務(wù)可以讓開(kāi)發(fā)者更專(zhuān)注于編寫(xiě)業(yè)務(wù)函數(shù)，從而減少對(duì)機(jī)器資源、降低運(yùn)維成本的考慮，可以讓開(kāi)發(fā)者更專(zhuān)注的為產(chǎn)品和用戶(hù)創(chuàng)造價(jià)值。隨著云廠(chǎng)商對(duì)于Serverless的支持，后續(xù)會(huì)有越來(lái)越多的開(kāi)發(fā)者，可以體會(huì)到云時(shí)代給大家?guī)?lái)的便利。

IMWeb團(tuán)隊(duì)開(kāi)始Serverless的實(shí)踐也非常早。隨著騰訊云的發(fā)展，在2019年就已經(jīng)將SCF落地在業(yè)務(wù)中了。而2020年為了提升 SCF的開(kāi)發(fā)體驗(yàn)，又完成了開(kāi)發(fā)體驗(yàn)的全面升級(jí)，可以在10分鐘內(nèi)完成一個(gè)云函數(shù)的上線(xiàn)。

IMWeb團(tuán)隊(duì)更宏大的全棧開(kāi)發(fā)計(jì)劃也在2020年穩(wěn)步進(jìn)行中。跟隨著公司上云的戰(zhàn)略，2020年團(tuán)隊(duì)依托于云提供的基礎(chǔ)能力進(jìn)行了一系列的全棧架構(gòu)演進(jìn)。與時(shí)俱進(jìn)的制定了新的研發(fā)基礎(chǔ)規(guī)范、持續(xù)性的豐富業(yè)務(wù)基礎(chǔ)組件、打造更佳完善監(jiān)控和告警體系，并結(jié)合公司內(nèi)優(yōu)秀的開(kāi)源項(xiàng)目協(xié)同共建，持續(xù)深耕全棧開(kāi)發(fā)。目前已經(jīng)在業(yè)務(wù)中落地了多個(gè)由前端主導(dǎo)的業(yè)務(wù)解決方案。這不僅減少了后臺(tái)人力的投入，也極大得拓展了前端的邊界，提升了前端在業(yè)務(wù)中的價(jià)值。

6、DevOps漸進(jìn)增強(qiáng)

研發(fā)效能是2020年提到的比較多的一個(gè)熱詞，特別是在騰訊內(nèi)部，提到效能不得不提到近幾年非常火熱的DevOps，開(kāi)發(fā)運(yùn)維一體化流程，CI/CD流程的串聯(lián)，幫助業(yè)務(wù)提升研發(fā)效能。

在2020的DevOpsSurvey 中，DevOps帶來(lái)的正面影響獲得了99%的認(rèn)可度：

不過(guò)，想要完全達(dá)到DevOps的效果，難度是很大的，DevOps鏈路涉及到非常多的工具鏈，使用學(xué)習(xí)成本較高，在當(dāng)前服務(wù)穩(wěn)定的情況下，遷移DevOps技術(shù)棧將遇到不小的挑戰(zhàn)。

IMWeb在DevOps實(shí)踐是基于業(yè)務(wù)上云，在云原生的基礎(chǔ)上完成的。其中包括：

• Node服務(wù)上容器平臺(tái)STKE（基于K8s定制）

• CDN對(duì)接騰訊云COS平臺(tái)

• BFF層、小程序等使用Serverless服務(wù)

• CI規(guī)范化構(gòu)建、檢查、測(cè)試流程

• IMWeb自研Thanos平臺(tái)串聯(lián)DevOps一體化流程

對(duì)于DevOps各流程的把控和規(guī)范，IMWeb團(tuán)隊(duì)自研Thanos研發(fā)效能平臺(tái)，幫助在線(xiàn)教育部所有前后端團(tuán)隊(duì)業(yè)務(wù)完成DevOps轉(zhuǎn)型：

7、WebRTC持續(xù)升溫

隨著互聯(lián)網(wǎng)的不斷加速和音視頻技術(shù)的不斷發(fā)展，許多以音視頻技術(shù)為依托的產(chǎn)品相繼面世，比如：直播、短視頻等等。從3G到4G，再到即將到來(lái)的5G時(shí)代，移動(dòng)網(wǎng)絡(luò)的帶寬和質(zhì)量越來(lái)越高，海量低延遲直播、互動(dòng)直播也成為了可能。音頻技術(shù)發(fā)展到今天，實(shí)際已經(jīng)非常成熟了。從H264/H265、VP8/VP9以及后面的AV1編解碼器，解決了視頻壓縮率的問(wèn)題；而5G的商用，解決了帶寬的問(wèn)題。這兩個(gè)問(wèn)題解決后，各行各業(yè)都開(kāi)始使用音視頻技術(shù)來(lái)實(shí)現(xiàn)更佳的用戶(hù)體驗(yàn)，比如：音視頻會(huì)議、直播帶貨、在線(xiàn)教育、遠(yuǎn)程醫(yī)療、娛樂(lè)游戲等等。

2020年由于疫情的影響，大家更多地認(rèn)識(shí)和了解到音視頻相關(guān)的行業(yè)。音視頻技術(shù)底層離不開(kāi)編解碼標(biāo)準(zhǔn)的發(fā)展。而就在今年，新一代國(guó)際視頻編解碼標(biāo)準(zhǔn)（H.266/VVC）正式出爐，其后續(xù)的落地實(shí)踐非常值得關(guān)注。從行業(yè)應(yīng)用的發(fā)展來(lái)看，圍繞音視頻直播一定會(huì)有三個(gè)發(fā)展方向：更快、更便宜、更智能。之前音視頻領(lǐng)域有兩大技術(shù)路線(xiàn)：一類(lèi)是RTC，它主要用于滿(mǎn)足多人會(huì)議中的低延時(shí)互動(dòng)；另一類(lèi)是流媒體直播/點(diǎn)播，主要滿(mǎn)足于對(duì)延時(shí)要求不大的高并發(fā)低成本場(chǎng)景。而端上的音視頻處理技術(shù)主要圍繞更智能，諸如人臉識(shí)別、美顏、降噪、超分等處理優(yōu)化來(lái)展開(kāi), 行業(yè)中也有更多的實(shí)踐落地，從后端到前端都在探索更為極致的體驗(yàn)。

WebRTC有個(gè)特別宏偉的愿景：可以在瀏覽器上快速開(kāi)發(fā)出各種音視頻應(yīng)用。但這早已不再僅僅是愿景，而是已經(jīng)在逐步成為現(xiàn)實(shí)。

? ?

從Chrome、Firefox到近幾年蘋(píng)果Safari的加入與支持，各個(gè)云服務(wù)廠(chǎng)商、騰訊云、阿里云、網(wǎng)易云、七牛云以及諸如專(zhuān)門(mén)音視頻服務(wù)商（聲網(wǎng)和即構(gòu)科技等等），都將WebRTC納入瀏覽器實(shí)時(shí)音視頻首選方案。

從StackOverflow Trends 和GoogleTrends來(lái)看：WebRTC的熱度不斷上升，而且由于2020年初疫情的影響，直播帶貨、在線(xiàn)會(huì)議和在線(xiàn)教育等遠(yuǎn)程實(shí)時(shí)音視頻技術(shù)的也迎來(lái)了風(fēng)口，關(guān)注度急劇上升。下面是我們總結(jié)的WebRTC應(yīng)用層面的知識(shí)圖譜：

早在2016年IMWeb團(tuán)隊(duì)就率先對(duì)WebRTC進(jìn)行探索和實(shí)踐。我們是騰訊公司內(nèi)最早將WebRTC落地于業(yè)務(wù)的團(tuán)隊(duì)之一，也是騰訊云WebRTC直播能力最主要的使用者。2020年初，由于疫情，在線(xiàn)教育迎來(lái)爆發(fā)式的增長(zhǎng)。為了保障受疫情影響而無(wú)法返校的學(xué)生能夠繼續(xù)通過(guò)線(xiàn)上課程完成學(xué)業(yè)，我們開(kāi)展了“停課不停學(xué)”活動(dòng)。在此期間對(duì)原有的WebRTC互動(dòng)直播+CDN 云直播能力進(jìn)行了全面升級(jí)，集成了快直播能力與語(yǔ)音舉手功能，使更多的用戶(hù)可以享受WebRTC帶來(lái)的低延遲、高性能的互動(dòng)直播體驗(yàn)。

疫情漸漸平緩，IMWeb音視頻小分隊(duì)的腳步?jīng)]有因此而停緩。2020下半年，我們又做為公司內(nèi)勇于第一個(gè)吃螃蟹的人，相繼上線(xiàn)了騰訊課堂的Web視頻連麥能力，推出了團(tuán)隊(duì)自研的WebRTCSDK 與之相配套使用的LokiPlayer播放器。LokiPlayer集WebRTC互動(dòng)直播、快直播、云直播、降級(jí)流控、點(diǎn)播等能力于一身，本身就已是集大成者，又通過(guò)提供基于插槽與注入實(shí)現(xiàn)的插件化能力保證播放器與SDK本身都可以被業(yè)務(wù)靈活的擴(kuò)展。

在2021年，我們將繼續(xù)深入研究音視頻的底層原理，探索更多在Web瀏覽器能得到應(yīng)用的技術(shù)，持續(xù)性地優(yōu)化諸如音視頻體驗(yàn)、音視頻質(zhì)量以及測(cè)試與定位等能力。結(jié)合wasm，將之前無(wú)法想象的功能逐個(gè)實(shí)踐、逐個(gè)實(shí)現(xiàn)落地。明年將與終端播放器一起對(duì)外進(jìn)行開(kāi)源。如果你恰好是Web音視頻技術(shù)的使用者，千萬(wàn)不要錯(cuò)過(guò)！

展望2021技術(shù)趨勢(shì)

技術(shù)的核心價(jià)值是為業(yè)務(wù)創(chuàng)造價(jià)值。那么，如何能快速滿(mǎn)足業(yè)務(wù)發(fā)展訴求呢？首先，我們始終離不開(kāi)解決成本、效率、質(zhì)量三者之間的平衡。因此，提升基礎(chǔ)物料的可用性、提升開(kāi)發(fā)工具的便捷性、完善動(dòng)態(tài)運(yùn)營(yíng)的靈活性以及解決產(chǎn)品質(zhì)量的穩(wěn)定性，這些永遠(yuǎn)都會(huì)在我們的日常工作中持續(xù)進(jìn)行，并且在追求極致的道路上永無(wú)止境！

正所謂分久必合，合久必分。無(wú)論是選擇極權(quán)式的中臺(tái)化解決方案，亦或是選擇去中心化的業(yè)務(wù)自制模式，都可以提升技術(shù)在業(yè)務(wù)的影響力。當(dāng)然選擇什么樣的方式，這與企業(yè)自身的基因和團(tuán)隊(duì)發(fā)展的階段有很大的關(guān)系。

在垂直領(lǐng)域的技術(shù)發(fā)展方面，我們對(duì)2021年可以做一些展望：

• 三大框架的同質(zhì)化會(huì)越來(lái)越明顯，而周邊配套還在可持續(xù)的發(fā)展中。從開(kāi)發(fā)者的基數(shù)上可以看到未來(lái)一年React還是會(huì)持續(xù)性地領(lǐng)先，但這并不妨礙Vue的優(yōu)秀；

• 由于可維護(hù)性和系統(tǒng)的復(fù)雜度上升，TS未來(lái)一年依舊會(huì)保持強(qiáng)勁的勢(shì)頭吞噬JS的版圖，未來(lái)會(huì)有更多的開(kāi)源框架和基礎(chǔ)組件擁抱TS社區(qū)。

• 大前端領(lǐng)域的前端工程化如今已經(jīng)慢慢成熟和穩(wěn)定了，而在未來(lái)一段時(shí)間，更多是基于全棧開(kāi)發(fā)的工程化體系的建設(shè)。前端開(kāi)發(fā)者會(huì)更多的借鑒后臺(tái)開(kāi)發(fā)的經(jīng)驗(yàn)去加速這一歷史進(jìn)程的速度，盡快完成全棧研發(fā)體系的升級(jí)和探索。

• 隨著WebAssembly持續(xù)性的發(fā)展，會(huì)有越來(lái)越多的產(chǎn)品在業(yè)務(wù)上落地WASM這項(xiàng)技術(shù)。而隨著WASM的發(fā)展瀏覽器桌面應(yīng)用化的趨勢(shì)也會(huì)越來(lái)越明顯。WebOS未來(lái)是否能夠落地，相信WASM在其中一定扮演了重要的角色。

• 小程序的標(biāo)準(zhǔn)化雖然提上了日程，但是由于有微信這樣超級(jí)APP的存在，標(biāo)準(zhǔn)化的道路注定不會(huì)平坦。跨端開(kāi)發(fā)上最耀眼的明星還是Flutter，而蘋(píng)果公司發(fā)布的SwiftUI也在路上了。從開(kāi)發(fā)者的角度來(lái)看，多端同構(gòu)是一種美好的愿望，但是任重道遠(yuǎn)，仍然需要長(zhǎng)期且持續(xù)性的攻堅(jiān)克難；

• 與其說(shuō)是Serverless不斷地持續(xù)升溫，不如說(shuō)是泛前端的時(shí)代已經(jīng)到來(lái)。前端團(tuán)隊(duì)尋求價(jià)值的渴望驅(qū)使著開(kāi)發(fā)者們不斷突破著自己的工作范圍；前端服務(wù)化的工作模式已經(jīng)從萌芽階段發(fā)展到路人皆知的階段了，大前端服務(wù)化的趨勢(shì)已經(jīng)是這個(gè)時(shí)代不可逆轉(zhuǎn)的趨勢(shì)了。

• 隨著5G網(wǎng)絡(luò)的普及和手機(jī)硬件的不斷提升，流量瓶頸和渲染性能在未來(lái)一年會(huì)有質(zhì)的提升，這其中最大的受益者就是從事音視頻領(lǐng)域的開(kāi)發(fā)者。相信在未來(lái)的一年里，音視頻領(lǐng)域一定是百花齊放的狀態(tài)。

• 低代碼的場(chǎng)景天然的靶場(chǎng)就是在B端業(yè)務(wù)中進(jìn)行抽象和實(shí)現(xiàn)。而隨著產(chǎn)業(yè)互聯(lián)網(wǎng)的提出，整個(gè)行業(yè)進(jìn)入了ToB的轉(zhuǎn)型期，未來(lái)的低代碼會(huì)越來(lái)越受到大廠(chǎng)的重視。當(dāng)然，低代碼還是要持續(xù)解決三大問(wèn)題：基礎(chǔ)平臺(tái)的能力完善、開(kāi)發(fā)質(zhì)量更加可控，以及低代碼產(chǎn)物的可維護(hù)性提升。可以遇見(jiàn)的未來(lái)低代碼會(huì)火爆的表現(xiàn)，并且會(huì)在生產(chǎn)中綻放光彩。

最后，為IMWebConf2020 大會(huì)打個(gè)小廣告。

本屆大會(huì)在2021年1月16日下午在線(xiàn)直播，我們邀請(qǐng)了IMWeb團(tuán)隊(duì)內(nèi)優(yōu)秀的開(kāi)發(fā)者，他們會(huì)結(jié)合自身實(shí)踐經(jīng)驗(yàn)，分享自己在前沿領(lǐng)域中的思考與解決方案。如果你對(duì)以下任何一項(xiàng)內(nèi)容感興趣，歡迎參與，一起學(xué)習(xí)和交流。

• 前端工程化：詳解團(tuán)隊(duì)的前端工程化、效率工具建設(shè)探索實(shí)踐；

• 音視頻領(lǐng)域：前端直播點(diǎn)播技術(shù)的探索，尤其是直播WebRTC技術(shù)的相關(guān)實(shí)踐。

• 低代碼進(jìn)階：深度解讀低代碼概念，以及在團(tuán)隊(duì)低代碼系統(tǒng)的實(shí)踐方案；

• 全棧開(kāi)發(fā)：落地過(guò)程中的經(jīng)驗(yàn)分享，關(guān)于效率、質(zhì)量、性能的思考。

精選前端好文，伴你不斷成長(zhǎng)

我是若川歡迎關(guān)注!可點(diǎn)擊