如今的(de)前端早已不(bù)再拘泥于(yú)滿足頁面展示，而(ér)是(shì)開始延展到(dào)通過全棧來(lái)閉環産品。這(zhè)表明前端已經有能力透過業務深入産業，繼而(ér)影響商業結果。這(zhè)種表象的(de)改變背後是(shì)本質的(de)轉變，從更爲(wéi / wèi)宏觀的(de)角度來(lái)說(shuō)，前端正在(zài)通過持續的(de)技術革新和(hé / huò)技術融合不(bù)斷突破自身邊界，進而(ér)重新定義自身價值。

一(yī / yì ／yí)、回顧今年的(de)技術趨勢

本文拟通過回顧 2020 年七大(dà)主要(yào / yāo)的(de)前端技術趨勢來(lái)展現前端早已由單純工具解決問題的(de)屬性逐步轉變爲(wéi / wèi)深入産品機制解決商業問題的(de)角色。前端開發者的(de)關注點也(yě)早已不(bù)是(shì)如何使資源利用效率更高，頁面體驗更優以(yǐ)及保證業務的(de)穩定輸出(chū)，而(ér)是(shì)更爲(wéi / wèi)關注産品能力、産業模式、數據建設以(yǐ)及商業轉化。

開源站點 bestofjs.org 收錄了(le／liǎo) Github 上(shàng) 1500 個(gè)開源項目，并且還基于(yú) GithubTrending API [1] 的(de)公開數據，更新統計這(zhè)些項目的(de) Stars 新增趨勢。基于(yú) Bestofjs 去年的(de) 2019 年 JavaScript 明星項目報告[2] 和(hé / huò)近一(yī / yì ／yí)年 Trending 排行數據，下面展示了(le／liǎo) Top30 的(de)前端重點項目，并對此進行簡單的(de)介紹。

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

• TypeScript 持續升溫，依舊保持着高速成長的(de)狀态，未來(lái)的(de)潛力不(bù)可限量；

• 通過項目分布的(de)情況，明顯能看到(dào) React 生态圈>> Vue 生态圈>> Angular 生态圈；

• 伴随着 WebAssembly 核心規範成爲(wéi / wèi)浏覽器的(de)标準，繼 HTML、CSS 和(hé / huò) JS 之(zhī)後，像 C/C++、Rust、Go 等語言編寫的(de)高性能模塊也(yě)在(zài)浏覽器上(shàng)運行。相信在(zài)不(bù)久的(de)将來(lái)，Web 應用的(de)桌面客戶端化，也(yě)将成爲(wéi / wèi)一(yī / yì ／yí)種趨勢；

• Strapi 位列 Nodejs 相關領域的(de)第三名側面反應了(le／liǎo)低代碼的(de)趨勢還在(zài)持續升溫，各家都在(zài)研制自己的(de)低代碼平台來(lái)提升開發效率；

• JS Framework 相關的(de)領域，Next.js 超越 Nest 成爲(wéi / wèi)了(le／liǎo)今年的(de)冠軍。在(zài)強大(dà)的(de) React 體系的(de)影響下，業務越來(lái)越多的(de)人(rén)選擇使用同構和(hé / huò)直出(chū)的(de)方案來(lái)構建 Web 應用；

• Serverless Framework 也(yě)進入了(le／liǎo)前 Top100，雖然排名不(bù)高，但是(shì)已經開始慢慢展示出(chū)了(le／liǎo)可持續發展的(de)勢頭。對于(yú)一(yī / yì ／yí)個(gè)被廠商裹挾的(de)技術而(ér)言，這(zhè)一(yī / yì ／yí)切來(lái)之(zhī)不(bù)易；

• 大(dà)前端生态系統已經逐步完善，前端工程化逐步完善，DevOps 已經走向了(le／liǎo)系統化的(de)發展方向，前端技術已經進入深水區；

• 由于(yú)直播行業的(de)火熱，以(yǐ)及疫情的(de)影響，音視頻領域在(zài)過去的(de)一(yī / yì ／yí)年也(yě)有着蓬勃的(de)發展。在(zài)前端領域 WebRTC 的(de)技術在(zài)持續升溫。

接下來(lái)，主要(yào / yāo)盤點下在(zài)即将過去的(de) 2020 年前端行業發生了(le／liǎo)哪些重要(yào / yāo)的(de)事情，同時(shí)分享下騰訊 IMWeb 團隊在(zài)過去一(yī / yì ／yí)年中都做了(le／liǎo)哪些工作。

二、總結 2020 年度趨勢

1. TypeScript 爆發增長

從 2019 年開始，社區内掀起了(le／liǎo)學習使用 TypeScript 的(de)浪潮，從 npm 的(de)下載量來(lái)看，近幾年 TypeScript 呈現爆發式增長，甚至在(zài) 2020 年在(zài) Github 語言的(de)排行榜上(shàng)躍居到(dào)了(le／liǎo)第四位。

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

相比于(yú)同類型工具，如 Elm、ClosureScript、CoffeeScript 等，TypeScript 可謂是(shì)一(yī / yì ／yí)馬當先：

數據來(lái)源：stateofjs2019

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

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

在(zài)如此爆炸式的(de)增長浪潮中，TypeScript 必将給前端生态帶來(lái)新的(de)氣象，同時(shí)也(yě)會促使前端開發者更多地(dì / de)關注代碼設計、易用可維護、編碼原則及設計理念等方面的(de)知識。

IMWeb 團隊自 2018 年起開啓第一(yī / yì ／yí)個(gè) TypeScript 項目[3]，至今已完成絕大(dà)部分業務向 TS 的(de)轉型遷移。在(zài)多端複用模塊代碼中，以(yǐ) TS+ Jest 爲(wéi / wèi)基本要(yào / yāo)求，保證公共代碼的(de)可維護性和(hé / huò)可測試性：在(zài) TS 編寫中，我們更多地(dì / de)遵循面向對象設計原則（SOLID 原則、KISS 原則等），适當的(de)運用設計模式，幫助更好地(dì / de)進行代碼開發和(hé / huò)維護。同時(shí)，在(zài) TS 踐行中，輔以(yǐ)單元測試覆蓋，可以(yǐ)指導我們更好地(dì / de)拆分組織代碼，編寫可測試的(de)模塊，在(zài)公共核心業務模塊中覆蓋單測用例。（有對 TS 工程化感興趣的(de)同學，可以(yǐ)聯系孟建和(hé / huò) enjoy）。

2. 三大(dà)框架 React 當先

前端界的(de)三大(dà)主流框架：React、Angular 和(hé / huò) Vue.js，今年仍是(shì)炙手可熱。此外，在(zài)過去一(yī / yì ／yí)年，這(zhè)三大(dà)主流框架還叠代了(le／liǎo)許多版本。在(zài)三大(dà)框架之(zhī)中，根據過去一(yī / yì ／yí)年的(de) NPM 下載量，React 仍然穩居首位。

2020 年的(de) StackOverflow Trends 顯示 React> Vue.js > Angular。

在(zài) Github 2020 年的(de)新增 Stars 數量上(shàng)，Vue.js 依舊超過了(le／liǎo) React。

下面分别總結各個(gè)框架 2020 年的(de)動态：

（1）React

React 自發布 v16 版本後，叠代的(de)版本都是(shì)以(yǐ)修複、優化爲(wéi / wèi)主，當前最新版本 v17.0.1，今年 8 月正式推出(chū)的(de) v17 版本，并無顯著的(de)新特性，而(ér)是(shì)一(yī / yì ／yí)個(gè)”墊腳石“版本。爲(wéi / wèi)了(le／liǎo)後續能兼容 v18 版本，或者說(shuō)是(shì)爲(wéi / wèi)了(le／liǎo)能達到(dào)”逐步“升級的(de)目的(de)，這(zhè)也(yě)能規避當項目的(de)依賴存在(zài)多個(gè)版本 React 時(shí)出(chū)現問題。這(zhè)種逐步升級的(de)理念與 VUE 的(de)漸進式兼容升級頗爲(wéi / wèi)相似。

（2）Vue.js

2020 年 Vue.js 的(de)重大(dà)變化無疑是(shì) Vue.js3.0 的(de)發布，有了(le／liǎo)非常多新特性，總結如下：

• 對 Vue.js 進行了(le／liǎo)完全 Typescript 重構，讓 Vue.js 源碼易于(yú)閱讀、開發和(hé / huò)維護；

• 重寫了(le／liǎo)虛拟 Dom 的(de)實現，對編譯模闆進行優化、組件初始化更高效， 性能上(shàng)有較大(dà)的(de)提升；Vue.js2 對象式組件存在(zài)一(yī / yì ／yí)些問題：難以(yǐ)複用邏輯代碼、難以(yǐ)拆分超大(dà)型組件、代碼無法被壓縮和(hé / huò)優化、數據類型難以(yǐ)推倒等問題；而(ér) CompositionAPI 則是(shì)基于(yú)函數理念，去解決上(shàng)述問題，使用函數可以(yǐ)将統一(yī / yì ／yí)邏輯的(de)組件代碼收攏一(yī / yì ／yí)起達到(dào)複用，也(yě)更有利于(yú)構建時(shí)的(de) tree-shaking 檢測，這(zhè)個(gè)使用起來(lái)有些類似于(yú) React 的(de) hook；

• 以(yǐ)上(shàng)變化都秉持着 VUE 的(de)“漸進式框架“ 理念， Vue.js3.0 持續開發兼容舊的(de)版本，即使升級了(le／liǎo) Vue.js3.0 也(yě)可以(yǐ)按照之(zhī)前的(de)組件開發模式進行開發。

（3）Angular

Angular 在(zài)今年 11 月推出(chū)了(le／liǎo) v11.0.0 版本，主要(yào / yāo)變化爲(wéi / wèi)：

• 将其依賴的(de) Typescript 版本升級至 4.0,不(bù)再支持 Typescript3.9 版本；

• Angularv11 在(zài)繼 v10 棄用 IE9、10 和(hé / huò) IEmobile 支持後，将其完全删除；

• 加入了(le／liǎo) Webpack5，升級至 Angularv11 版本，即可使用 Webpack5 的(de)新特性，如更快的(de)構建速度、模塊聯邦等。

IMWeb 團隊的(de)前端技術棧主要(yào / yāo)圍繞着 React 體系進行構建的(de)，包含了(le／liǎo)基于(yú) Webpack 的(de)最佳實踐 IMFLOW，以(yǐ)及圍繞着 React 體系完成的(de)組件生态。在(zài)三大(dà)框架逐漸同質化的(de)今天，未來(lái)的(de)你使用何種框架就(jiù)得由工作崗位的(de)需求來(lái)決定了(le／liǎo)。

3. WASM 展露頭角

WebAssembly 源于(yú) Mozilla 發起的(de) Asm.js 項目，也(yě)被稱爲(wéi / wèi)“設計補充 JavaScript”，其本解碼速度比 JS 解析快得多，讓高性能的(de) Web 應用在(zài)浏覽器上(shàng)運行成爲(wéi / wèi)可能。該模塊可在(zài)浏覽器中的(de)專有虛拟機上(shàng)執行，與 JavaScript 虛拟機共享内存和(hé / huò)線程等資源。目前主流浏覽器基本都支持了(le／liǎo) WebAssembly。

在(zài) 2019 年 12 月 15 日 WebAssembly 正式成爲(wéi / wèi) WorldWide Web Consortium (W3C) 的(de)标準，加入到(dào)了(le／liǎo) HTML、CSS 和(hé / huò) JavaScript 的(de)行列，繼而(ér)成爲(wéi / wèi)浏覽器官方的(de)标準的(de)第四門語言。WebAssembly 也(yě)正式抵達了(le／liǎo) 1.0 版本，獲得了(le／liǎo)主流浏覽器 Firefox、Chrome、Safari 和(hé / huò) Edge 的(de)支持。

首屆 WebAssemblySubmmit 2020 年在(zài)矽谷舉行[4]，會議上(shàng)讨論了(le／liǎo)諸如：關于(yú)構建 WebAssembly 新型生态系統；WebAssembly 的(de)未來(lái)以(yǐ)及 WebAssembly 與諸如 Javascript 等其他(tā)支持技術的(de)關系；WebKit 的(de) WebAssembly 實現的(de)編譯、啓動和(hé / huò)運行時(shí)等 benchmarking 領域進行的(de)研究和(hé / huò)開發；其中 Ben 演講的(de)“Expandingthe PIE” 。

短短幾年的(de)時(shí)間裏，WebAssembly 取得了(le／liǎo)長足的(de)進展。

（1）Ability

目前有 100 多個(gè)不(bù)同的(de)項目使用 WebAssembly。這(zhè)些應用包括：自由手繪應用程序、媒體播放器、Gameboy 仿真器、浏覽器内壓縮/解壓應用程序，甚至還有一(yī / yì ／yí)個(gè) AR 數獨解謎應用程序。

（2）Producer

目前大(dà)約有 15 種編程語言可以(yǐ)以(yǐ)穩定的(de)、面向生産的(de)方式編譯到(dào) WebAssembly。其中包括：.Net，AssemblyScript，C，，Haskell，Rust 和(hé / huò) Zig 等，還有更多的(de)正在(zài)開發中。

（3）Interoperability

WebAssembly 現在(zài)有了(le／liǎo)一(yī / yì ／yí)個(gè)基于(yú)能力的(de) API 設計，它允許 WebAssembly 代碼與外部世界交互，同時(shí)仍然保留了(le／liǎo) WebAssembly 的(de)沙盒特性。此外，曾經強大(dà)而(ér)有用的(de) WebAPI 集合現在(zài)正在(zài)不(bù)斷得到(dào)實現。

（4）Embedder

現在(zài)可以(yǐ)在(zài)許多不(bù)同的(de)平台上(shàng)運行 WebAssembly。目前正在(zài)積極開發的(de)運行時(shí)大(dà)約有 20 個(gè)。WebAssembly 不(bù)再局限于(yú)浏覽器。這(zhè)裏有區塊鏈實現、無服務器應用程序、操作系統可執行程序和(hé / huò)物聯網實現的(de)例子(zǐ)，它們被部署在(zài)獨立和(hé / huò)受限制的(de)嵌入式運行時(shí)環境中。

看到(dào)這(zhè)麽多不(bù)同的(de)項目和(hé / huò)運行時(shí)，真是(shì)令人(rén)驚訝！而(ér) 2021 年的(de) WebAssemblySubmmit 會在(zài) 4 月舉行。随着 WebAssembly 的(de)不(bù)斷發展，Web 中文興趣組·WebAssembly 研讨會也(yě)在(zài)今年的(de) 8 月 29 日在(zài)線上(shàng)舉行[5]，重點探讨了(le／liǎo) WebAssembly 技術應用與實現，尤其是(shì)在(zài)多媒體、編譯器以(yǐ)及新型語言、仿真器、Web 前端框架、虛拟機、雲、遊戲引擎、工具等多方面的(de)應用場景，詳細的(de)會議紀要(yào / yāo)請看[6]。在(zài)未來(lái)的(de)一(yī / yì ／yí)年裏，WebAssembly 會有更多的(de)機會出(chū)現在(zài)大(dà)家的(de)面前，我們也(yě)會在(zài)業務中落地(dì / de)基于(yú) WebAssembly 的(de)應用。

WebAssembly 的(de)出(chū)現爲(wéi / wèi) Web 開發者打開了(le／liǎo)一(yī / yì ／yí)扇新的(de)大(dà)門。在(zài)去年，wasm 對你來(lái)說(shuō)也(yě)許還僅是(shì)技術文章中的(de)一(yī / yì ／yí)個(gè)常見名詞，你壓根想不(bù)到(dào)他(tā)會在(zài)浏覽器中得到(dào)怎樣的(de)應用，什麽時(shí)候會被大(dà)公司真正用起來(lái)。在(zài)今年，你很有可能已在(zài)不(bù)知不(bù)覺中成爲(wéi / wèi) wasm 的(de)使用者了(le／liǎo)。目前國(guó)内外越來(lái)越多的(de)團隊基于(yú) wasm 進行了(le／liǎo)業務實踐。

IMWeb 團隊擅長的(de)音視頻領域，我們通過将 ffmpeg 編譯爲(wéi / wèi) wasm 版本且在(zài)浏覽器中運行，将過去處于(yú)黑盒中，隻有浏覽器底層才能使用的(de)音視頻編解碼能力徹底解放。目前我們可以(yǐ)在(zài)前端頁面中對音視頻流直接進行處理，在(zài)完全不(bù)依賴後台的(de)情況下，便捷、高效的(de)實現了(le／liǎo)視頻播放幀預覽與視頻幀截圖等功能。目前團隊正在(zài)進一(yī / yì ／yí)步探索 wasm 在(zài)音視頻以(yǐ)及其他(tā)過去前端無法觸及的(de)領域的(de)可行性實踐。

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

從 2014 年 Forrester 的(de)研究報告提出(chū)“low-code”一(yī / yì ／yí)詞到(dào)今天，低代碼領域持續升溫。從低代碼領域的(de)行業角度看，2017 年後，微軟、甲骨文等各大(dà)廠家紛紛加入了(le／liǎo)低代碼賽道(dào)的(de)競争。近年來(lái)，獲得 3.6 億美元融資的(de) Outsystems 更是(shì)成爲(wéi / wèi)低代碼領域海外市場的(de)一(yī / yì ／yí)隻獨角獸。國(guó)内方面，也(yě)不(bù)乏雲鳳蝶、點石、iVX、輕流、積木等平台的(de)誕生，低代碼産品領域的(de)蓬勃發展，正成爲(wéi / wèi)特定場景軟件開發的(de)重要(yào / yāo)趨勢。

先來(lái)區分一(yī / yì ／yí)下 no-code、low-code、pro-code：

no-code：自己編程給自己用，給用戶的(de)感覺就(jiù)是(shì)一(yī / yì ／yí)個(gè)軟件。因此，平台不(bù)會給自己定位成一(yī / yì ／yí)個(gè)“編程工具”。主要(yào / yāo)是(shì)通過圖形化的(de)操作來(lái)降低學習曲線，類似 PPT、Excel 等。在(zài)垂直領域的(de)特定場景中，才能做到(dào)好用。

low-code：編程給其他(tā)人(rén)用，通過降低專業難度，讓運營人(rén)員（CitizenDeveloper）也(yě)參與進來(lái)。平台評估好預制的(de)場景和(hé / huò)需求，減少從頭寫代碼的(de)成本，一(yī / yì ／yí)定程度上(shàng)可以(yǐ)通過圖形化的(de)方式滿足業務訴求。

pro-code：日常軟件開發過程中的(de)手寫代碼，可以(yǐ)通過邏輯和(hé / huò)模塊複用來(lái)進行提效。

區分了(le／liǎo)概念之(zhī)後，還需要(yào / yāo)考慮面向的(de)用戶。不(bù)同的(de)用戶對應着不(bù)同的(de)解決方案。用戶大(dà)緻分爲(wéi / wèi)三類：前端開發人(rén)員、後台開發人(rén)員、産品運營人(rén)員。

（1）爲(wéi / wèi)什麽要(yào / yāo)做低代碼？

基于(yú)目前可視化和(hé / huò)模型驅動理念，結合當下大(dà)前端跨端體驗的(de)融合技術以(yǐ)及雲原生的(de)支持，通過低代碼的(de)方案可以(yǐ)大(dà)幅度降低業務交付的(de)成本，爲(wéi / wèi)業務提供一(yī / yì ／yí)種全新的(de)開發範式。而(ér)且，可視化搭建去完成業務可以(yǐ)讓産品和(hé / huò)運營人(rén)員（CitizenDeveloper）參與進來(lái)，可以(yǐ)極大(dà)得釋放軟件開發者的(de)人(rén)力瓶頸，也(yě)進一(yī / yì ／yí)步促進了(le／liǎo)技術和(hé / huò)業務的(de)深度合作。

（2）低代碼應該具備哪些核心能力？

基礎物料的(de)搭建和(hé / huò)接入是(shì)保證業務可視化的(de)基礎。無論是(shì)行業的(de)開源組件，還是(shì)團隊自定義的(de)基礎組件，搭建平台都應該無縫地(dì / de)進行預期内的(de)接入和(hé / huò)控制。這(zhè)是(shì)因爲(wéi / wèi)，從業務長期叠代的(de)角度來(lái)看，最耗費人(rén)力的(de)一(yī / yì ／yí)定是(shì)最頻繁的(de)業務組件。解決定制化的(de)組件和(hé / huò)接入組件由此成爲(wéi / wèi)低代碼平台長期需要(yào / yāo)解決的(de)最核心問題。

編排能力就(jiù)是(shì)頁面排版和(hé / huò)對邏輯編排。無論是(shì)特定場景的(de)頁面的(de)組件邏輯，還是(shì)用戶自定義的(de)交互（包括用戶行爲(wéi / wèi)的(de)服務端能力支持）都應該通過邏輯編排能力進行支持。大(dà)部分的(de)頁面搭建工作都是(shì)在(zài)桌面端完成的(de)，但是(shì)頁面渲染的(de)産物可能是(shì)多種形式的(de)，比如：PCWeb、H5Web、小程序，那麽在(zài)搭建運行時(shí)的(de)實時(shí)可視化和(hé / huò)搭建完成的(de)多端适配和(hé / huò)多場景适配，這(zhè)樣就(jiù)解決了(le／liǎo)跨技術棧和(hé / huò)跨端問題。

雖然是(shì) low-code 的(de)設計方案，但還是(shì)希望輸出(chū)的(de)代碼是(shì)可以(yǐ)進行二次開發的(de)，因此最好能 pro-code 與 low-code 互相轉換。編程産物分爲(wéi / wèi)初級産物、中間産物和(hé / huò)最終産物。産物的(de)豐富程度，直接決定了(le／liǎo)平台的(de)可複用性和(hé / huò)靈活性。無論是(shì)基于(yú)低代碼開發和(hé / huò)源碼的(de)混合開發，還是(shì)基于(yú)低代碼平台的(de)二次開發，都是(shì) low-code 平台需要(yào / yāo)考慮的(de)事情。

運行時(shí)能力也(yě)非常重要(yào / yāo)，對開發者來(lái)說(shuō)是(shì)一(yī / yì ／yí)個(gè)強大(dà)的(de)編輯器引擎，可以(yǐ)方便快速接入各類組件和(hé / huò)中間件。而(ér)對于(yú)運營人(rén)員（CitizenDeveloper）來(lái)說(shuō)同樣也(yě)很重要(yào / yāo)，針對不(bù)同的(de)産品和(hé / huò)業務場景，需要(yào / yāo)定制基礎業務模版和(hé / huò)和(hé / huò)業務配置，方便他(tā)們快速地(dì / de)進行差異化的(de)功能設計。

協作能力和(hé / huò)數據分析能力就(jiù)不(bù)言自明了(le／liǎo)。低代碼平台的(de)核心就(jiù)是(shì)降低對專業性的(de)要(yào / yāo)求。因此，使用者無論是(shì)誰，都應該有更高的(de)效率提升。而(ér)數據統計和(hé / huò)分析是(shì)所有平台都應該具備的(de)基礎能力，這(zhè)裏就(jiù)不(bù)詳細描述了(le／liǎo)。

那麽，整理了(le／liǎo)核心能力如下：基礎資料的(de)搭建、基礎資料的(de)接入、業務編排能力、界面渲染能力、代碼轉換能力以(yǐ)及運行時(shí)能力、協作能力和(hé / huò)數據分析能力。以(yǐ)上(shàng)就(jiù)是(shì)我認爲(wéi / wèi)的(de)低代碼方案應該具備的(de)能力模型。

爲(wéi / wèi)什麽說(shuō) low-code 是(shì)恰逢其時(shí)呢？因爲(wéi / wèi)無論是(shì)跨端和(hé / huò)跨平台領域的(de)強大(dà)适配能力，還是(shì)大(dà)前端工程體系的(de)有力支撐，都已經将低代碼領域的(de)價值逐步推到(dào)人(rén)們面前，低代碼是(shì)業務發展和(hé / huò)技術探索的(de)必然選擇。

2020 年 IMWeb 團隊在(zài)低代碼領域不(bù)斷優化升級面向運營場景的(de)頁面搭建平台 Vision，在(zài)真正意義上(shàng)實現了(le／liǎo)對運營系統和(hé / huò)素材開發的(de)解耦，并兼容 React,Vue, JQuery 等不(bù)同技術棧，實現了(le／liǎo) PC、H5、微信小程序的(de)可視化運營的(de)頁面搭建。

與此同時(shí)，在(zài) Vision 系統的(de)基礎上(shàng)，我們沉澱出(chū)一(yī / yì ／yí)套可視化搭建引擎 Gems，針對日漸增加的(de) B 側需求，以(yǐ) Gems 爲(wéi / wèi)核心開發了(le／liǎo)專注于(yú)搭建管理系統的(de)平台 Hulk，實現了(le／liǎo)相對運營頁面更爲(wéi / wèi)複雜的(de)管理頁面甚至數據接口的(de)可視化搭建與生成。

我們的(de)目标是(shì)通過 Hulk 實現對 80%日常業務頁面的(de)“0 代碼”搭建。通過 Node.js 統一(yī / yì ／yí)管理數據接口，可以(yǐ)通過圖形化配置，快速創建接口，組合不(bù)同數據源的(de)數據；支持多組件靈活配置生成頁面的(de)能力，擴展組件庫，開發常用組件；複雜頁面和(hé / huò)接口邏輯支持低代碼擴展。

Low-Code 領域的(de)發展在(zài) 2020 年極其迅猛。從最早的(de)通過模塊化搭建解決營銷活動領域的(de)問題發展到(dào)現在(zài)可以(yǐ)通過 low-code 來(lái)解決内部複雜的(de)中後台業務需求，既适用于(yú)面向 C 側用戶的(de)産品運營，也(yě)貼合 B 側用戶的(de)數據管理需求。

5. 全棧開發持續深耕

從 DevOps 到(dào) NoOps 的(de)路徑之(zhī)一(yī / yì ／yí)，便是(shì)目前大(dà)家都在(zài)嘗試的(de) Serverless 了(le／liǎo)。自從 2012 年有了(le／liǎo) Serverless 的(de)概念開始，至今已經 8 個(gè)年頭了(le／liǎo)。近年來(lái)随着國(guó)内的(de)雲廠商，如騰訊雲、阿裏雲、華爲(wéi / wèi)雲對 Serverless 的(de)支持，并且伴随着小程序雲開發的(de)普及，國(guó)内的(de)開發者對 Serverless 的(de)使用已經非常熟悉了(le／liǎo)。

今年 9 月 CodingSans 聯合其 9 個(gè)合作夥伴，發布了(le／liǎo) Serverless2020 年度狀态報告。調查結果顯示：有 75%的(de)開發者會在(zài)公司使用這(zhè)項技術。如此高的(de) Yes 也(yě)基本反映出(chū)了(le／liǎo)這(zhè)樣的(de)技術已經被大(dà)衆普遍接受并使用。

我們可以(yǐ)看到(dào)開發者選擇應用 Serverless 的(de)場景有很多，比如：爲(wéi / wèi)小程序、Web、Mobile 提供基礎性的(de) API 服務，大(dà)規模批處理任務處理，Web 站點、DevOps 的(de)工具以(yǐ)及 GraphQLAPI 能力。

目前最大(dà)的(de)難題是(shì)調試，這(zhè)主要(yào / yāo)是(shì)由 Serverless 的(de)架構複雜性所引起的(de)。而(ér)供應商之(zhī)間的(de)巨大(dà)差異也(yě)使得更換或者說(shuō)遷移供應商變得非常得不(bù)償失。

與其說(shuō) Serverless 是(shì)一(yī / yì ／yí)項技術，不(bù)如說(shuō) Serverless 是(shì)一(yī / yì ／yí)種理想的(de)工作模式，是(shì)一(yī / yì ／yí)種專注于(yú)業務價值的(de)思考。單純的(de)通過函數進行業務交付，而(ér)不(bù)再需要(yào / yāo)關心解決業務問題之(zhī)外的(de)事情，比如：那些非常繁瑣的(de)基礎設施。托管服務可以(yǐ)讓開發者更專注于(yú)編寫業務函數，從而(ér)減少對機器資源、降低運維成本的(de)考慮，可以(yǐ)讓開發者更專注的(de)爲(wéi / wèi)産品和(hé / huò)用戶創造價值。随着雲廠商對于(yú) Serverless 的(de)支持，後續會有越來(lái)越多的(de)開發者，可以(yǐ)體會到(dào)雲時(shí)代給大(dà)家帶來(lái)的(de)便利。

IMWeb 團隊開始 Serverless 的(de)實踐也(yě)非常早。随着騰訊雲的(de)發展，在(zài) 2019 年就(jiù)已經将 SCF 落地(dì / de)在(zài)業務中了(le／liǎo)。而(ér) 2020 年爲(wéi / wèi)了(le／liǎo)提升 SCF 的(de)開發體驗，又完成了(le／liǎo)開發體驗的(de)全面升級，可以(yǐ)在(zài) 10 分鍾内完成一(yī / yì ／yí)個(gè)雲函數的(de)上(shàng)線[7]。

IMWeb 團隊更宏大(dà)的(de)全棧開發計劃也(yě)在(zài) 2020 年穩步進行中。跟随着公司上(shàng)雲的(de)戰略，2020 年團隊依托于(yú)雲提供的(de)基礎能力進行了(le／liǎo)一(yī / yì ／yí)系列的(de)全棧架構演進。與時(shí)俱進的(de)制定了(le／liǎo)新的(de)研發基礎規範、持續性的(de)豐富業務基礎組件、打造更佳完善監控和(hé / huò)告警體系，并結合公司内優秀的(de)開源項目協同共建，持續深耕全棧開發。目前已經在(zài)業務中落地(dì / de)了(le／liǎo)多個(gè)由前端主導的(de)業務解決方案。這(zhè)不(bù)僅減少了(le／liǎo)後台人(rén)力的(de)投入，也(yě)極大(dà)得拓展了(le／liǎo)前端的(de)邊界，提升了(le／liǎo)前端在(zài)業務中的(de)價值。

6. DevOps 漸進增強

研發效能是(shì) 2020 年提到(dào)的(de)比較多的(de)一(yī / yì ／yí)個(gè)熱詞，特别是(shì)在(zài)騰訊内部，提到(dào)效能不(bù)得不(bù)提到(dào)近幾年非常火熱的(de) DevOps，開發運維一(yī / yì ／yí)體化流程，CI/CD 流程的(de)串聯，幫助業務提升研發效能。

在(zài) 2020 的(de) DevOpsSurvey 中，DevOps 帶來(lái)的(de)正面影響獲得了(le／liǎo) 99%的(de)認可度：

不(bù)過，想要(yào / yāo)完全達到(dào) DevOps 的(de)效果，難度是(shì)很大(dà)的(de)，DevOps 鏈路涉及到(dào)非常多的(de)工具鏈，使用學習成本較高，在(zài)當前服務穩定的(de)情況下，遷移 DevOps 技術棧将遇到(dào)不(bù)小的(de)挑戰。

IMWeb 在(zài) DevOps 實踐是(shì)基于(yú)業務上(shàng)雲，在(zài)雲原生的(de)基礎上(shàng)完成的(de)。其中包括：

• Node 服務上(shàng)容器平台 STKE（基于(yú) K8s 定制）

• CDN 對接騰訊雲 COS 平台

• BFF 層、小程序等使用 Serverless 服務

• CI 規範化構建、檢查、測試流程

• IMWeb 自研 Thanos 平台串聯 DevOps 一(yī / yì ／yí)體化流程

對于(yú) DevOps 各流程的(de)把控和(hé / huò)規範，IMWeb 團隊自研 Thanos 研發效能平台，幫助在(zài)線教育部所有前後端團隊業務完成 DevOps 轉型：

7. WebRTC 持續升溫

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

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

WebRTC 有個(gè)特别宏偉的(de)願景：可以(yǐ)在(zài)浏覽器上(shàng)快速開發出(chū)各種音視頻應用。但這(zhè)早已不(bù)再僅僅是(shì)願景，而(ér)是(shì)已經在(zài)逐步成爲(wéi / wèi)現實。

從 Chrome、Firefox 到(dào)近幾年蘋果 Safari 的(de)加入與支持，各個(gè)雲服務廠商、騰訊雲、阿裏雲、網易雲、七牛雲以(yǐ)及諸如專門音視頻服務商（聲網和(hé / huò)即構科技等等），都将 WebRTC 納入浏覽器實時(shí)音視頻首選方案。

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

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

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

在(zài) 2021 年，我們将繼續深入研究音視頻的(de)底層原理，探索更多在(zài) Web 浏覽器能得到(dào)應用的(de)技術，持續性地(dì / de)優化諸如音視頻體驗、音視頻質量以(yǐ)及測試與定位等能力。結合 wasm，将之(zhī)前無法想象的(de)功能逐個(gè)實踐、逐個(gè)實現落地(dì / de)。明年将與終端播放器一(yī / yì ／yí)起對外進行開源。如果你恰好是(shì) Web 音視頻技術的(de)使用者，千萬不(bù)要(yào / yāo)錯過！

三、展望 2021 技術趨勢

技術的(de)核心價值是(shì)爲(wéi / wèi)業務創造價值。那麽，如何能快速滿足業務發展訴求呢？首先，我們始終離不(bù)開解決成本、效率、質量三者之(zhī)間的(de)平衡。因此，提升基礎物料的(de)可用性、提升開發工具的(de)便捷性、完善動态運營的(de)靈活性以(yǐ)及解決産品質量的(de)穩定性，這(zhè)些永遠都會在(zài)我們的(de)日常工作中持續進行，并且在(zài)追求極緻的(de)道(dào)路上(shàng)永無止境！

正所謂分久必合，合久必分。無論是(shì)選擇極權式的(de)中台化解決方案，亦或是(shì)選擇去中心化的(de)業務自制模式，都可以(yǐ)提升技術在(zài)業務的(de)影響力。當然選擇什麽樣的(de)方式，這(zhè)與企業自身的(de)基因和(hé / huò)團隊發展的(de)階段有很大(dà)的(de)關系。

在(zài)垂直領域的(de)技術發展方面，我們對 2021 年可以(yǐ)做一(yī / yì ／yí)些展望：

• 三大(dà)框架的(de)同質化會越來(lái)越明顯，而(ér)周邊配套還在(zài)可持續的(de)發展中。從開發者的(de)基數上(shàng)可以(yǐ)看到(dào)未來(lái)一(yī / yì ／yí)年 React 還是(shì)會持續性地(dì / de)領先，但這(zhè)并不(bù)妨礙 Vue 的(de)優秀；

• 由于(yú)可維護性和(hé / huò)系統的(de)複雜度上(shàng)升，TS 未來(lái)一(yī / yì ／yí)年依舊會保持強勁的(de)勢頭吞噬 JS 的(de)版圖，未來(lái)會有更多的(de)開源框架和(hé / huò)基礎組件擁抱 TS 社區。

• 大(dà)前端領域的(de)前端工程化如今已經慢慢成熟和(hé / huò)穩定了(le／liǎo)，而(ér)在(zài)未來(lái)一(yī / yì ／yí)段時(shí)間，更多是(shì)基于(yú)全棧開發的(de)工程化體系的(de)建設。前端開發者會更多的(de)借鑒後台開發的(de)經驗去加速這(zhè)一(yī / yì ／yí)曆史進程的(de)速度，盡快完成全棧研發體系的(de)升級和(hé / huò)探索。

• 随着 WebAssembly 持續性的(de)發展，會有越來(lái)越多的(de)産品在(zài)業務上(shàng)落地(dì / de) WASM 這(zhè)項技術。而(ér)随着 WASM 的(de)發展浏覽器桌面應用化的(de)趨勢也(yě)會越來(lái)越明顯。WebOS 未來(lái)是(shì)否能夠落地(dì / de)，相信 WASM 在(zài)其中一(yī / yì ／yí)定扮演了(le／liǎo)重要(yào / yāo)的(de)角色。

• 小程序的(de)标準化雖然提上(shàng)了(le／liǎo)日程，但是(shì)由于(yú)有微信這(zhè)樣超級 APP 的(de)存在(zài)，标準化的(de)道(dào)路注定不(bù)會平坦。跨端開發上(shàng)最耀眼的(de)明星還是(shì) Flutter，而(ér)蘋果公司發布的(de) SwiftUI 也(yě)在(zài)路上(shàng)了(le／liǎo)。從開發者的(de)角度來(lái)看，多端同構是(shì)一(yī / yì ／yí)種美好的(de)願望，但是(shì)任重道(dào)遠，仍然需要(yào / yāo)長期且持續性的(de)攻堅克難；

• 與其說(shuō)是(shì) Serverless 不(bù)斷地(dì / de)持續升溫，不(bù)如說(shuō)是(shì)泛前端的(de)時(shí)代已經到(dào)來(lái)。前端團隊尋求價值的(de)渴望驅使着開發者們不(bù)斷突破着自己的(de)工作範圍；前端服務化的(de)工作模式已經從萌芽階段發展到(dào)路人(rén)皆知的(de)階段了(le／liǎo)，大(dà)前端服務化的(de)趨勢已經是(shì)這(zhè)個(gè)時(shí)代不(bù)可逆轉的(de)趨勢了(le／liǎo)。

• 随着 5G 網絡的(de)普及和(hé / huò)手機硬件的(de)不(bù)斷提升，流量瓶頸和(hé / huò)渲染性能在(zài)未來(lái)一(yī / yì ／yí)年會有質的(de)提升，這(zhè)其中最大(dà)的(de)受益者就(jiù)是(shì)從事音視頻領域的(de)開發者。相信在(zài)未來(lái)的(de)一(yī / yì ／yí)年裏，音視頻領域一(yī / yì ／yí)定是(shì)百花齊放的(de)狀态。

• 低代碼的(de)場景天然的(de)靶場就(jiù)是(shì)在(zài) B 端業務中進行抽象和(hé / huò)實現。而(ér)随着産業互聯網的(de)提出(chū)，整個(gè)行業進入了(le／liǎo) ToB 的(de)轉型期，未來(lái)的(de)低代碼會越來(lái)越受到(dào)大(dà)廠的(de)重視。當然，低代碼還是(shì)要(yào / yāo)持續解決三大(dà)問題：基礎平台的(de)能力完善、開發質量更加可控，以(yǐ)及低代碼産物的(de)可維護性提升。可以(yǐ)遇見的(de)未來(lái)低代碼會火爆的(de)表現，并且會在(zài)生産中綻放光彩。