2021 年大前端技術(shù)趨勢(shì)解讀
如今的前端早已不再拘泥于滿足頁(yè)面展示，而是開始延展到通過(guò)全棧來(lái)閉環(huán)產(chǎn)品。這表明前端已經(jīng)有能力透過(guò)業(yè)務(wù)深入產(chǎn)業(yè)，繼而影響商業(yè)結(jié)果。這種表象的改變背后是本質(zhì)的轉(zhuǎn)變，從更為宏觀的角度來(lái)說(shuō)，前端正在通過(guò)持續(xù)的技術(shù)革新和技術(shù)融合不斷突破自身邊界，進(jìn)而重新定義自身價(jià)值。
一、回顧今年的技術(shù)趨勢(shì)
本文擬通過(guò)回顧 2020 年七大主要的前端技術(shù)趨勢(shì)來(lái)展現(xiàn)前端早已由單純工具解決問題的屬性逐步轉(zhuǎn)變?yōu)樯钊氘a(chǎn)品機(jī)制解決商業(yè)問題的角色。前端開發(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)化。
開源站點(diǎn) bestofjs.org 收錄了 Github 上 1500 個(gè)開源項(xiàng)目，并且還基于 GithubTrending API [1] 的公開數(shù)據(jù)，更新統(tǒng)計(jì)這些項(xiàng)目的 Stars 新增趨勢(shì)。基于 Bestofjs 去年的 2019 年 JavaScript 明星項(xiàng)目報(bào)告[2] 和近一年 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)最快的開源項(xiàng)目，打破了 Vue.js 連續(xù) 4 年登頂?shù)膲艛唷ｋm然在工業(yè)屆使用 Deno 落地在業(yè)務(wù)場(chǎng)景的情況還比較少，但是目前的發(fā)展勢(shì)頭還是不錯(cuò)的。還記得因?yàn)?Deno 的出現(xiàn)，出現(xiàn)的那句經(jīng)典的“求不要更新了，老子學(xué)不動(dòng)了”。事實(shí)證明“學(xué)不動(dòng)的時(shí)代” 并沒有到來(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ǔ)言編寫的高性能模塊也在瀏覽器上運(yùn)行。相信在不久的將來(lái)，Web 應(yīng)用的桌面客戶端化，也將成為一種趨勢(shì)；
Strapi 位列 Nodejs 相關(guān)領(lǐng)域的第三名側(cè)面反應(yīng)了低代碼的趨勢(shì)還在持續(xù)升溫，各家都在研制自己的低代碼平臺(tái)來(lá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)開始慢慢展示出了可持續(xù)發(fā)展的勢(shì)頭。對(duì)于一個(gè)被廠商裹挾的技術(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)，主要盤點(diǎn)下在即將過(guò)去的 2020 年前端行業(yè)發(fā)生了哪些重要的事情，同時(shí)分享下騰訊 IMWeb 團(tuán)隊(duì)在過(guò)去一年中都做了哪些工作。
二、總結(jié) 2020 年度趨勢(shì)
1. TypeScript 爆發(fā)增長(zhǎng)
從 2019 年開始，社區(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
相比于同類型工具，如 Elm、ClosureScript、CoffeeScript 等，TypeScript 可謂是一馬當(dāng)先：
數(shù)據(jù)來(lái)源：stateofjs2019
在最新的 2020Stack Overflow Survey 中，TS 受大家喜愛程度排名第二，僅次于 Rust：
數(shù)據(jù)來(lái)源：StackOverflow Survey Result 2020
在如此爆炸式的增長(zhǎng)浪潮中，TypeScript 必將給前端生態(tài)帶來(lái)新的氣象，同時(shí)也會(huì)促使前端開發(fā)者更多地關(guān)注代碼設(shè)計(jì)、易用可維護(hù)、編碼原則及設(shè)計(jì)理念等方面的知識(shí)。
IMWeb 團(tuán)隊(duì)自 2018 年起開啟第一個(gè) TypeScript 項(xiàng)目[3]，至今已完成絕大部分業(yè)務(wù)向 TS 的轉(zhuǎn)型遷移。在多端復(fù)用模塊代碼中，以 TS+ Jest 為基本要求，保證公共代碼的可維護(hù)性和可測(cè)試性：在 TS 編寫中，我們更多地遵循面向?qū)ο笤O(shè)計(jì)原則（SOLID 原則、KISS 原則等），適當(dāng)?shù)倪\(yùn)用設(shè)計(jì)模式，幫助更好地進(jìn)行代碼開發(fā)和維護(hù)。同時(shí)，在 TS 踐行中，輔以單元測(cè)試覆蓋，可以指導(dǎo)我們更好地拆分組織代碼，編寫可測(cè)試的模塊，在公共核心業(yè)務(wù)模塊中覆蓋單測(cè)用例。（有對(duì) TS 工程化感興趣的同學(xué)，可以聯(lián)系孟建和 enjoy）。
2. 三大框架 React 當(dāng)先
前端界的三大主流框架：React、Angular 和 Vue.js，今年仍是炙手可熱。此外，在過(guò)去一年，這三大主流框架還迭代了許多版本。在三大框架之中，根據(jù)過(guò)去一年的 NPM 下載量，React 仍然穩(wěn)居首位。
2020 年的 StackOverflow Trends 顯示 React> Vue.js > Angular。
在 Github 2020 年的新增 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)目的依賴存在多個(gè)版本 React 時(shí)出現(xià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 源碼易于閱讀、開發(fā)和維護(hù)；
重寫了虛擬 Dom 的實(shí)現(xiàn)，對(duì)編譯模板進(jìn)行優(yōu)化、組件初始化更高效， 性能上有較大的提升；Vue.js2 對(duì)象式組件存在一些問題：難以復(fù)用邏輯代碼、難以拆分超大型組件、代碼無(wú)法被壓縮和優(yōu)化、數(shù)據(jù)類型難以推倒等問題；而 CompositionAPI 則是基于函數(shù)理念，去解決上述問題，使用函數(shù)可以將統(tǒng)一邏輯的組件代碼收攏一起達(dá)到復(fù)用，也更有利于構(gòu)建時(shí)的 tree-shaking 檢測(cè)，這個(gè)使用起來(lái)有些類似于 React 的 hook；
以上變化都秉持著 VUE 的“漸進(jìn)式框架“ 理念， Vue.js3.0 持續(xù)開發(fā)兼容舊的版本，即使升級(jí)了 Vue.js3.0 也可以按照之前的組件開發(fā)模式進(jìn)行開發(fā)。
（3）Angular
Angular 在今年 11 月推出了 v11.0.0 版本，主要變化為：
將其依賴的 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)目，也被稱為“設(shè)計(jì)補(bǔ)充 JavaScript”，其本解碼速度比 JS 解析快得多，讓高性能的 Web 應(yīng)用在瀏覽器上運(yùn)行成為可能。該模塊可在瀏覽器中的專有虛擬機(jī)上執(zhí)行，與 JavaScript 虛擬機(jī)共享內(nèi)存和線程等資源。目前主流瀏覽器基本都支持了 WebAssembly。
在 2019 年 12 月 15 日 WebAssembly 正式成為 WorldWide Web Consortium (W3C) 的標(biāo)準(zhǔn)，加入到了 HTML、CSS 和 JavaScript 的行列，繼而成為瀏覽器官方的標(biāo)準(zhǔn)的第四門語(yǔ)言。WebAssembly 也正式抵達(dá)了 1.0 版本，獲得了主流瀏覽器 Firefox、Chrome、Safari 和 Edge 的支持。
首屆 WebAssemblySubmmit 2020 年在硅谷舉行[4]，會(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)行的研究和開發(fā)；其中 Ben 演講的“Expandingthe PIE” 。
短短幾年的時(shí)間里，WebAssembly 取得了長(zhǎng)足的進(jìn)展。
（1）Ability
目前有 100 多個(gè)不同的項(xiàng)目使用 WebAssembly。這些應(yīng)用包括：自由手繪應(yīng)用程序、媒體播放器、Gameboy 仿真器、瀏覽器內(nèi)壓縮/解壓應(yīng)用程序，甚至還有一個(gè) AR 數(shù)獨(dú)解謎應(yīng)用程序。
（2）Producer
目前大約有 15 種編程語(yǔ)言可以以穩(wěn)定的、面向生產(chǎn)的方式編譯到 WebAssembly。其中包括：.Net，AssemblyScript，C，，Haskell，Rust 和 Zig 等，還有更多的正在開發(fā)中。
（3）Interoperability
WebAssembly 現(xiàn)在有了一個(gè)基于能力的 API 設(shè)計(jì)，它允許 WebAssembly 代碼與外部世界交互，同時(shí)仍然保留了 WebAssembly 的沙盒特性。此外，曾經(jīng)強(qiáng)大而有用的 WebAPI 集合現(xiàn)在正在不斷得到實(shí)現(xiàn)。
（4）Embedder
現(xiàn)在可以在許多不同的平臺(tái)上運(yùn)行 WebAssembly。目前正在積極開發(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 日在線上舉行[5]，重點(diǎn)探討了 WebAssembly 技術(shù)應(yīng)用與實(shí)現(xiàn)，尤其是在多媒體、編譯器以及新型語(yǔ)言、仿真器、Web 前端框架、虛擬機(jī)、云、游戲引擎、工具等多方面的應(yīng)用場(chǎng)景，詳細(xì)的會(huì)議紀(jì)要請(qǐng)看[6]。在未來(lái)的一年里，WebAssembly 會(huì)有更多的機(jī)會(huì)出現(xiàn)在大家的面前，我們也會(huì)在業(yè)務(wù)中落地基于 WebAssembly 的應(yīng)用。
WebAssembly 的出現(xiàn)為 Web 開發(fā)者打開了一扇新的大門。在去年，wasm 對(duì)你來(lái)說(shuō)也許還僅是技術(shù)文章中的一個(gè)常見名詞，你壓根想不到他會(huì)在瀏覽器中得到怎樣的應(yīng)用，什么時(shí)候會(huì)被大公司真正用起來(lái)。在今年，你很有可能已在不知不覺中成為 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)行處理，在完全不依賴后臺(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)告提出“l(fā)ow-code”一詞到今天，低代碼領(lǐng)域持續(xù)升溫。從低代碼領(lǐng)域的行業(yè)角度看，2017 年后，微軟、甲骨文等各大廠家紛紛加入了低代碼賽道的競(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)景軟件開發(fā)的重要趨勢(shì)。
先來(lái)區(qū)分一下 no-code、low-code、pro-code：
no-code：自己編程給自己用，給用戶的感覺就是一個(gè)軟件。因此，平臺(tái)不會(huì)給自己定位成一個(gè)“編程工具”。主要是通過(guò)圖形化的操作來(lái)降低學(xué)習(xí)曲線，類似 PPT、Excel 等。在垂直領(lǐng)域的特定場(chǎng)景中，才能做到好用。
low-code：編程給其他人用，通過(guò)降低專業(yè)難度，讓運(yùn)營(yíng)人員（CitizenDeveloper）也參與進(jìn)來(lái)。平臺(tái)評(píng)估好預(yù)制的場(chǎng)景和需求，減少?gòu)念^寫代碼的成本，一定程度上可以通過(guò)圖形化的方式滿足業(yè)務(wù)訴求。
pro-code：日常軟件開發(fā)過(guò)程中的手寫代碼，可以通過(guò)邏輯和模塊復(fù)用來(lái)進(jìn)行提效。
區(qū)分了概念之后，還需要考慮面向的用戶。不同的用戶對(duì)應(yīng)著不同的解決方案。用戶大致分為三類：前端開發(fā)人員、后臺(tái)開發(fā)人員、產(chǎn)品運(yùn)營(yíng)人員。
（1）為什么要做低代碼？
基于目前可視化和模型驅(qū)動(dòng)理念，結(jié)合當(dāng)下大前端跨端體驗(yàn)的融合技術(shù)以及云原生的支持，通過(guò)低代碼的方案可以大幅度降低業(yè)務(wù)交付的成本，為業(yè)務(wù)提供一種全新的開發(fā)范式。而且，可視化搭建去完成業(yè)務(wù)可以讓產(chǎn)品和運(yùn)營(yíng)人員（CitizenDeveloper）參與進(jìn)來(lái)，可以極大得釋放軟件開發(fā)者的人力瓶頸，也進(jìn)一步促進(jìn)了技術(shù)和業(yè)務(wù)的深度合作。
（2）低代碼應(yīng)該具備哪些核心能力？
基礎(chǔ)物料的搭建和接入是保證業(yè)務(wù)可視化的基礎(chǔ)。無(wú)論是行業(yè)的開源組件，還是團(tuán)隊(duì)自定義的基礎(chǔ)組件，搭建平臺(tái)都應(yīng)該無(wú)縫地進(jìn)行預(yù)期內(nèi)的接入和控制。這是因?yàn)?，從業(yè)務(wù)長(zhǎng)期迭代的角度來(lái)看，最耗費(fèi)人力的一定是最頻繁的業(yè)務(wù)組件。解決定制化的組件和接入組件由此成為低代碼平臺(tái)長(zhǎng)期需要解決的最核心問題。
編排能力就是頁(yè)面排版和對(duì)邏輯編排。無(wú)論是特定場(chǎng)景的頁(yè)面的組件邏輯，還是用戶自定義的交互（包括用戶行為的服務(wù)端能力支持）都應(yīng)該通過(guò)邏輯編排能力進(jìn)行支持。大部分的頁(yè)面搭建工作都是在桌面端完成的，但是頁(yè)面渲染的產(chǎn)物可能是多種形式的，比如：PCWeb、H5Web、小程序，那么在搭建運(yùn)行時(shí)的實(shí)時(shí)可視化和搭建完成的多端適配和多場(chǎng)景適配，這樣就解決了跨技術(shù)棧和跨端問題。
雖然是 low-code 的設(shè)計(jì)方案，但還是希望輸出的代碼是可以進(jìn)行二次開發(fā)的，因此最好能 pro-code 與 low-code 互相轉(zhuǎn)換。編程產(chǎn)物分為初級(jí)產(chǎn)物、中間產(chǎn)物和最終產(chǎn)物。產(chǎn)物的豐富程度，直接決定了平臺(tái)的可復(fù)用性和靈活性。無(wú)論是基于低代碼開發(fā)和源碼的混合開發(fā)，還是基于低代碼平臺(tái)的二次開發(fā)，都是 low-code 平臺(tái)需要考慮的事情。
運(yùn)行時(shí)能力也非常重要，對(duì)開發(fā)者來(lái)說(shuō)是一個(gè)強(qiáng)大的編輯器引擎，可以方便快速接入各類組件和中間件。而對(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ì)專業(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)和素材開發(fā)的解耦，并兼容 React,Vue, JQuery 等不同技術(shù)棧，實(shí)現(xiàn)了 PC、H5、微信小程序的可視化運(yùn)營(yíng)的頁(yè)面搭建。
與此同時(shí)，在 Vision 系統(tǒng)的基礎(chǔ)上，我們沉淀出一套可視化搭建引擎 Gems，針對(duì)日漸增加的 B 側(cè)需求，以 Gems 為核心開發(fā)了專注于搭建管理系統(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ù)，開發(fā)常用組件；復(fù)雜頁(yè)面和接口邏輯支持低代碼擴(kuò)展。
Low-Code 領(lǐng)域的發(fā)展在 2020 年極其迅猛。從最早的通過(guò)模塊化搭建解決營(yíng)銷活動(dòng)領(lǐng)域的問題發(fā)展到現(xiàn)在可以通過(guò) low-code 來(lái)解決內(nèi)部復(fù)雜的中后臺(tái)業(yè)務(wù)需求，既適用于面向 C 側(cè)用戶的產(chǎn)品運(yùn)營(yíng)，也貼合 B 側(cè)用戶的數(shù)據(jù)管理需求。
5. 全棧開發(fā)持續(xù)深耕
從 DevOps 到 NoOps 的路徑之一，便是目前大家都在嘗試的 Serverless 了。自從 2012 年有了 Serverless 的概念開始，至今已經(jīng) 8 個(gè)年頭了。近年來(lái)隨著國(guó)內(nèi)的云廠商，如騰訊云、阿里云、華為云對(duì) Serverless 的支持，并且伴隨著小程序云開發(fā)的普及，國(guó)內(nèi)的開發(fā)者對(duì) Serverless 的使用已經(jīng)非常熟悉了。
今年 9 月 CodingSans 聯(lián)合其 9 個(gè)合作伙伴，發(fā)布了 Serverless2020 年度狀態(tài)報(bào)告。調(diào)查結(jié)果顯示：有 75%的開發(fā)者會(huì)在公司使用這項(xiàng)技術(shù)。如此高的 Yes 也基本反映出了這樣的技術(shù)已經(jīng)被大眾普遍接受并使用。
我們可以看到開發(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 是一種理想的工作模式，是一種專注于業(yè)務(wù)價(jià)值的思考。單純的通過(guò)函數(shù)進(jìn)行業(yè)務(wù)交付，而不再需要關(guān)心解決業(yè)務(wù)問題之外的事情，比如：那些非常繁瑣的基礎(chǔ)設(shè)施。托管服務(wù)可以讓開發(fā)者更專注于編寫業(yè)務(wù)函數(shù)，從而減少對(duì)機(jī)器資源、降低運(yùn)維成本的考慮，可以讓開發(fā)者更專注的為產(chǎn)品和用戶創(chuàng)造價(jià)值。隨著云廠商對(duì)于 Serverless 的支持，后續(xù)會(huì)有越來(lái)越多的開發(fā)者，可以體會(huì)到云時(shí)代給大家?guī)?lái)的便利。
IMWeb 團(tuán)隊(duì)開始 Serverless 的實(shí)踐也非常早。隨著騰訊云的發(fā)展，在 2019 年就已經(jīng)將 SCF 落地在業(yè)務(wù)中了。而 2020 年為了提升 SCF 的開發(fā)體驗(yàn)，又完成了開發(fā)體驗(yàn)的全面升級(jí)，可以在 10 分鐘內(nèi)完成一個(gè)云函數(shù)的上線[7]。
IMWeb 團(tuán)隊(duì)更宏大的全棧開發(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)秀的開源項(xiàng)目協(xié)同共建，持續(xù)深耕全棧開發(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，開發(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)，幫助在線教育部所有前后端團(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 編解碼器，解決了視頻壓縮率的問題；而 5G 的商用，解決了帶寬的問題。這兩個(gè)問題解決后，各行各業(yè)都開始使用音視頻技術(shù)來(lái)實(shí)現(xiàn)更佳的用戶體驗(yàn)，比如：音視頻會(huì)議、直播帶貨、在線教育、遠(yuǎn)程醫(yī)療、娛樂游戲等等。
2020 年由于疫情的影響，大家更多地認(rèn)識(shí)和了解到音視頻相關(guān)的行業(yè)。音視頻技術(shù)底層離不開編解碼標(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ù)路線：一類是 RTC，它主要用于滿足多人會(huì)議中的低延時(shí)互動(dòng)；另一類是流媒體直播/點(diǎn)播，主要滿足于對(duì)延時(shí)要求不大的高并發(fā)低成本場(chǎng)景。而端上的音視頻處理技術(shù)主要圍繞更智能，諸如人臉識(shí)別、美顏、降噪、超分等處理優(yōu)化來(lái)展開, 行業(yè)中也有更多的實(shí)踐落地，從后端到前端都在探索更為極致的體驗(yàn)。
WebRTC 有個(gè)特別宏偉的愿景：可以在瀏覽器上快速開發(fā)出各種音視頻應(yīng)用。但這早已不再僅僅是愿景，而是已經(jīng)在逐步成為現(xiàn)實(shí)。
從 Chrome、Firefox 到近幾年蘋果 Safari 的加入與支持，各個(gè)云服務(wù)廠商、騰訊云、阿里云、網(wǎng)易云、七牛云以及諸如專門音視頻服務(wù)商（聲網(wǎng)和即構(gòu)科技等等），都將 WebRTC 納入瀏覽器實(shí)時(shí)音視頻首選方案。
從 StackOverflow Trends 和 GoogleTrends 來(lái)看：WebRTC 的熱度不斷上升，而且由于 2020 年初疫情的影響，直播帶貨、在線會(huì)議和在線教育等遠(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 年初，由于疫情，在線教育迎來(lái)爆發(fā)式的增長(zhǎng)。為了保障受疫情影響而無(wú)法返校的學(xué)生能夠繼續(xù)通過(guò)線上課程完成學(xué)業(yè)，我們開展了“停課不停學(xué)”活動(dòng)。在此期間對(duì)原有的 WebRTC 互動(dòng)直播+CDN 云直播能力進(jìn)行了全面升級(jí)，集成了快直播能力與語(yǔ)音舉手功能，使更多的用戶可以享受 WebRTC 帶來(lái)的低延遲、高性能的互動(dòng)直播體驗(yàn)。
疫情漸漸平緩，IMWeb 音視頻小分隊(duì)的腳步?jīng)]有因此而停緩。2020 下半年，我們又做為公司內(nèi)勇于第一個(gè)吃螃蟹的人，相繼上線了騰訊課堂的 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)行開源。如果你恰好是 Web 音視頻技術(shù)的使用者，千萬(wàn)不要錯(cuò)過(guò)！
三、展望 2021 技術(shù)趨勢(shì)
技術(shù)的核心價(jià)值是為業(yè)務(wù)創(chuàng)造價(jià)值。那么，如何能快速滿足業(yè)務(wù)發(fā)展訴求呢？首先，我們始終離不開解決成本、效率、質(zhì)量三者之間的平衡。因此，提升基礎(chǔ)物料的可用性、提升開發(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ā)展中。從開發(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ì)有更多的開源框架和基礎(chǔ)組件擁抱 TS 社區(qū)。
大前端領(lǐng)域的前端工程化如今已經(jīng)慢慢成熟和穩(wěn)定了，而在未來(lái)一段時(shí)間，更多是基于全棧開發(fā)的工程化體系的建設(shè)。前端開發(fā)者會(huì)更多的借鑒后臺(tá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ì)平坦。跨端開發(fā)上最耀眼的明星還是 Flutter，而蘋果公司發(fā)布的 SwiftUI 也在路上了。從開發(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ū)使著開發(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)域的開發(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)越受到大廠的重視。當(dāng)然，低代碼還是要持續(xù)解決三大問題：基礎(chǔ)平臺(tái)的能力完善、開發(fā)質(zhì)量更加可控，以及低代碼產(chǎn)物的可維護(hù)性提升。可以遇見的未來(lái)低代碼會(huì)火爆的表現(xiàn)，并且會(huì)在生產(chǎn)中綻放光彩。