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

一、回顧今年的技術趨勢

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

開(kāi)源站點 bestofjs.org 收錄了 Github 上 1500 個開(kāi)源項目，并且還(hái)基于 GithubTrending API [1] 的公開(kāi)數據，更新統計這(zhè)些項目的 Stars 新增趨勢。基于 Bestofjs 去年的 2019 年 JavaScript 明星項目報告[2] 和近一年 Trending 排行數據，下面(miàn)展示了 Top30 的前端重點項目，并對(duì)此進(jìn)行簡單的介紹。

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

• TypeScript 持續升溫，依舊保持著(zhe)高速成(chéng)長(cháng)的狀态，未來的潛力不可限量；

• 通過(guò)項目分布的情況，明顯能(néng)看到 React 生态圈>> Vue 生态圈>> Angular 生态圈；

• 伴随著(zhe) WebAssembly 核心規範成(chéng)爲浏覽器的标準，繼 HTML、CSS 和 JS 之後(hòu)，像 C/C++、Rust、Go 等語言編寫的高性能(néng)模塊也在浏覽器上運行。相信在不久的將(jiāng)來，Web 應用的桌面(miàn)客戶端化，也將(jiāng)成(chéng)爲一種(zhǒng)趨勢；

• Strapi 位列 Nodejs 相關領域的第三名側面(miàn)反應了低代碼的趨勢還(hái)在持續升溫，各家都(dōu)在研制自己的低代碼平台來提升開(kāi)發(fā)效率；

• JS Framework 相關的領域，Next.js 超越 Nest 成(chéng)爲了今年的冠軍。在強大的 React 體系的影響下，業務越來越多的人選擇使用同構和直出的方案來構建 Web 應用；

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

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

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

接下來，主要盤點下在即將(jiāng)過(guò)去的 2020 年前端行業發(fā)生了哪些重要的事(shì)情，同時(shí)分享下騰訊 IMWeb 團隊在過(guò)去一年中都(dōu)做了哪些工作。

二、總結 2020 年度趨勢

1. TypeScript 爆發(fā)增長(cháng)

從 2019 年開(kāi)始，社區内掀起(qǐ)了學(xué)習使用 TypeScript 的浪潮，從 npm 的下載量來看，近幾年 TypeScript 呈現爆發(fā)式增長(cháng)，甚至在 2020 年在 Github 語言的排行榜上躍居到了第四位。

數據來源：https://octoverse.github.com

相比于同類型工具，如 Elm、ClosureScript、CoffeeScript 等，TypeScript 可謂是一馬當先：

數據來源：stateofjs2019

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

數據來源：StackOverflow Survey Result 2020

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

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

2. 三大框架 React 當先

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

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

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

下面(miàn)分别總結各個框架 2020 年的動态：

（1）React

React 自發(fā)布 v16 版本後(hòu)，叠代的版本都(dōu)是以修複、優化爲主，當前最新版本 v17.0.1，今年 8 月正式推出的 v17 版本，并無顯著的新特性，而是一個”墊腳石“版本。爲了後(hòu)續能(néng)兼容 v18 版本，或者說(shuō)是爲了能(néng)達到”逐步“升級的目的，這(zhè)也能(néng)規避當項目的依賴存在多個版本 React 時(shí)出現問題。這(zhè)種(zhǒng)逐步升級的理念與 VUE 的漸進(jìn)式兼容升級頗爲相似。

（2）Vue.js

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

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

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

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

（3）Angular

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

• 將(jiāng)其依賴的 Typescript 版本升級至 4.0,不再支持 Typescript3.9 版本；

• Angularv11 在繼 v10 棄用 IE9、10 和 IEmobile 支持後(hòu)，將(jiāng)其完全删除；

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

IMWeb 團隊的前端技術棧主要圍繞著(zhe) React 體系進(jìn)行構建的，包含了基于 Webpack 的最佳實踐 IMFLOW，以及圍繞著(zhe) React 體系完成(chéng)的組件生态。在三大框架逐漸同質化的今天，未來的你使用何種(zhǒng)框架就(jiù)得由工作崗位的需求來決定了。

3. WASM 展露頭角

WebAssembly 源于 Mozilla 發(fā)起(qǐ)的 Asm.js 項目，也被(bèi)稱爲“設計補充 JavaScript”，其本解碼速度比 JS 解析快得多，讓高性能(néng)的 Web 應用在浏覽器上運行成(chéng)爲可能(néng)。該模塊可在浏覽器中的專有虛拟機上執行，與 JavaScript 虛拟機共享内存和線程等資源。目前主流浏覽器基本都(dōu)支持了 WebAssembly。

在 2019 年 12 月 15 日 WebAssembly 正式成(chéng)爲 WorldWide Web Consortium (W3C) 的标準，加入到了 HTML、CSS 和 JavaScript 的行列，繼而成(chéng)爲浏覽器官方的标準的第四門語言。WebAssembly 也正式抵達了 1.0 版本，獲得了主流浏覽器 Firefox、Chrome、Safari 和 Edge 的支持。

首屆 WebAssemblySubmmit 2020 年在矽谷舉行[4]，會(huì)議上讨論了諸如：關于構建 WebAssembly 新型生态系統；WebAssembly 的未來以及 WebAssembly 與諸如 Javascript 等其他支持技術的關系；WebKit 的 WebAssembly 實現的編譯、啓動和運行時(shí)等 benchmarking 領域進(jìn)行的研究和開(kāi)發(fā)；其中 Ben 演講的“Expandingthe PIE” 。

短短幾年的時(shí)間裡(lǐ)，WebAssembly 取得了長(cháng)足的進(jìn)展。

（1）Ability

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

（2）Producer

目前大約有 15 種(zhǒng)編程語言可以以穩定的、面(miàn)向(xiàng)生産的方式編譯到 WebAssembly。其中包括：.Net，AssemblyScript，C，，Haskell，Rust 和 Zig 等，還(hái)有更多的正在開(kāi)發(fā)中。

（3）Interoperability

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

（4）Embedder

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

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

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

IMWeb 團隊擅長(cháng)的音視頻領域，我們通過(guò)將(jiāng) ffmpeg 編譯爲 wasm 版本且在浏覽器中運行，將(jiāng)過(guò)去處于黑盒中，隻有浏覽器底層才能(néng)使用的音視頻編解碼能(néng)力徹底解放。目前我們可以在前端頁面(miàn)中對(duì)音視頻流直接進(jìn)行處理，在完全不依賴後(hòu)台的情況下，便捷、高效的實現了視頻播放幀預覽與視頻幀截圖等功能(néng)。目前團隊正在進(jìn)一步探索 wasm 在音視頻以及其他過(guò)去前端無法觸及的領域的可行性實踐。

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

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

先來區分一下 no-code、low-code、pro-code：

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

low-code：編程給其他人用，通過(guò)降低專業難度，讓運營人員（CitizenDeveloper）也參與進(jìn)來。平台評估好(hǎo)預制的場景和需求，減少從頭寫代碼的成(chéng)本，一定程度上可以通過(guò)圖形化的方式滿足業務訴求。

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

區分了概念之後(hòu)，還(hái)需要考慮面(miàn)向(xiàng)的用戶。不同的用戶對(duì)應著(zhe)不同的解決方案。用戶大緻分爲三類：前端開(kāi)發(fā)人員、後(hòu)台開(kāi)發(fā)人員、産品運營人員。

（1）爲什麼(me)要做低代碼？

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

（2）低代碼應該具備哪些核心能(néng)力？

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

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

雖然是 low-code 的設計方案，但還(hái)是希望輸出的代碼是可以進(jìn)行二次開(kāi)發(fā)的，因此最好(hǎo)能(néng) pro-code 與 low-code 互相轉換。編程産物分爲初級産物、中間産物和最終産物。産物的豐富程度，直接決定了平台的可複用性和靈活性。無論是基于低代碼開(kāi)發(fā)和源碼的混合開(kāi)發(fā)，還(hái)是基于低代碼平台的二次開(kāi)發(fā)，都(dōu)是 low-code 平台需要考慮的事(shì)情。

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

協作能(néng)力和數據分析能(néng)力就(jiù)不言自明了。低代碼平台的核心就(jiù)是降低對(duì)專業性的要求。因此，使用者無論是誰，都(dōu)應該有更高的效率提升。而數據統計和分析是所有平台都(dōu)應該具備的基礎能(néng)力，這(zhè)裡(lǐ)就(jiù)不詳細描述了。

那麼(me)，整理了核心能(néng)力如下：基礎資料的搭建、基礎資料的接入、業務編排能(néng)力、界面(miàn)渲染能(néng)力、代碼轉換能(néng)力以及運行時(shí)能(néng)力、協作能(néng)力和數據分析能(néng)力。以上就(jiù)是我認爲的低代碼方案應該具備的能(néng)力模型。

爲什麼(me)說(shuō) low-code 是恰逢其時(shí)呢？因爲無論是跨端和跨平台領域的強大适配能(néng)力，還(hái)是大前端工程體系的有力支撐，都(dōu)已經(jīng)將(jiāng)低代碼領域的價值逐步推到人們面(miàn)前，低代碼是業務發(fā)展和技術探索的必然選擇。

2020 年 IMWeb 團隊在低代碼領域不斷優化升級面(miàn)向(xiàng)運營場景的頁面(miàn)搭建平台 Vision，在真正意義上實現了對(duì)運營系統和素材開(kāi)發(fā)的解耦，并兼容 React,Vue, JQuery 等不同技術棧，實現了 PC、H5、微信小程序的可視化運營的頁面(miàn)搭建。

與此同時(shí)，在 Vision 系統的基礎上，我們沉澱出一套可視化搭建引擎 Gems，針對(duì)日漸增加的 B 側需求，以 Gems 爲核心開(kāi)發(fā)了專注于搭建管理系統的平台 Hulk，實現了相對(duì)運營頁面(miàn)更爲複雜的管理頁面(miàn)甚至數據接口的可視化搭建與生成(chéng)。

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

Low-Code 領域的發(fā)展在 2020 年極其迅猛。從最早的通過(guò)模塊化搭建解決營銷活動領域的問題發(fā)展到現在可以通過(guò) low-code 來解決内部複雜的中後(hòu)台業務需求，既适用于面(miàn)向(xiàng) C 側用戶的産品運營，也貼合 B 側用戶的數據管理需求。

5. 全棧開(kāi)發(fā)持續深耕

從 DevOps 到 NoOps 的路徑之一，便是目前大家都(dōu)在嘗試的 Serverless 了。自從 2012 年有了 Serverless 的概念開(kāi)始，至今已經(jīng) 8 個年頭了。近年來随著(zhe)國(guó)内的雲廠商，如騰訊雲、阿裡(lǐ)雲、華爲雲對(duì) Serverless 的支持，并且伴随著(zhe)小程序雲開(kāi)發(fā)的普及，國(guó)内的開(kāi)發(fā)者對(duì) Serverless 的使用已經(jīng)非常熟悉了。

今年 9 月 CodingSans 聯合其 9 個合作夥伴，發(fā)布了 Serverless2020 年度狀态報告。調查結果顯示：有 75%的開(kāi)發(fā)者會(huì)在公司使用這(zhè)項技術。如此高的 Yes 也基本反映出了這(zhè)樣(yàng)的技術已經(jīng)被(bèi)大衆普遍接受并使用。

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

目前最大的難題是調試，這(zhè)主要是由 Serverless 的架構複雜性所引起(qǐ)的。而供應商之間的巨大差異也使得更換或者說(shuō)遷移供應商變得非常得不償失。

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

IMWeb 團隊開(kāi)始 Serverless 的實踐也非常早。随著(zhe)騰訊雲的發(fā)展，在 2019 年就(jiù)已經(jīng)將(jiāng) SCF 落地在業務中了。而 2020 年爲了提升 SCF 的開(kāi)發(fā)體驗，又完成(chéng)了開(kāi)發(fā)體驗的全面(miàn)升級，可以在 10 分鍾内完成(chéng)一個雲函數的上線[7]。

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

6. DevOps 漸進(jìn)增強

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

在 2020 的 DevOpsSurvey 中，DevOps 帶來的正面(miàn)影響獲得了 99%的認可度：

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

IMWeb 在 DevOps 實踐是基于業務上雲，在雲原生的基礎上完成(chéng)的。其中包括：

• Node 服務上容器平台 STKE（基于 K8s 定制）

• CDN 對(duì)接騰訊雲 COS 平台

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

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

• IMWeb 自研 Thanos 平台串聯 DevOps 一體化流程

對(duì)于 DevOps 各流程的把控和規範，IMWeb 團隊自研 Thanos 研發(fā)效能(néng)平台，幫助在線教育部所有前後(hòu)端團隊業務完成(chéng) DevOps 轉型：

7. WebRTC 持續升溫

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

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

WebRTC 有個特别宏偉的願景：可以在浏覽器上快速開(kāi)發(fā)出各種(zhǒng)音視頻應用。但這(zhè)早已不再僅僅是願景，而是已經(jīng)在逐步成(chéng)爲現實。

從 Chrome、Firefox 到近幾年蘋果 Safari 的加入與支持，各個雲服務廠商、騰訊雲、阿裡(lǐ)雲、網易雲、七牛雲以及諸如專門音視頻服務商（聲網和即構科技等等），都(dōu)將(jiāng) WebRTC 納入浏覽器實時(shí)音視頻首選方案。

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

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

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

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

三、展望 2021 技術趨勢

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

正所謂分久必合，合久必分。無論是選擇極權式的中台化解決方案，亦或是選擇去中心化的業務自制模式，都(dōu)可以提升技術在業務的影響力。當然選擇什麼(me)樣(yàng)的方式，這(zhè)與企業自身的基因和團隊發(fā)展的階段有很大的關系。

在垂直領域的技術發(fā)展方面(miàn)，我們對(duì) 2021 年可以做一些展望：

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

• 由于可維護性和系統的複雜度上升，TS 未來一年依舊會(huì)保持強勁的勢頭吞噬 JS 的版圖，未來會(huì)有更多的開(kāi)源框架和基礎組件擁抱 TS 社區。

• 大前端領域的前端工程化如今已經(jīng)慢慢成(chéng)熟和穩定了，而在未來一段時(shí)間，更多是基于全棧開(kāi)發(fā)的工程化體系的建設。前端開(kāi)發(fā)者會(huì)更多的借鑒後(hòu)台開(kāi)發(fā)的經(jīng)驗去加速這(zhè)一曆史進(jìn)程的速度，盡快完成(chéng)全棧研發(fā)體系的升級和探索。

• 随著(zhe) WebAssembly 持續性的發(fā)展，會(huì)有越來越多的産品在業務上落地 WASM 這(zhè)項技術。而随著(zhe) WASM 的發(fā)展浏覽器桌面(miàn)應用化的趨勢也會(huì)越來越明顯。WebOS 未來是否能(néng)夠落地，相信 WASM 在其中一定扮演了重要的角色。

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

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

• 随著(zhe) 5G 網絡的普及和手機硬件的不斷提升，流量瓶頸和渲染性能(néng)在未來一年會(huì)有質的提升，這(zhè)其中最大的受益者就(jiù)是從事(shì)音視頻領域的開(kāi)發(fā)者。相信在未來的一年裡(lǐ)，音視頻領域一定是百花齊放的狀态。

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