2020年大前端技術趨勢解讀

導Lead語前端

現在的前端早已再也不拘泥於知足頁面展現,而是開始延展到經過全棧來閉環產品。這代表前端已經有能力透過業務深刻產業,繼而影響商業結果。這種表象的改變背後是本質的轉變,從更爲宏觀的角度來講,前端正在經過持續的技術革新和技術融合不斷突破自身邊界,進而從新定義自身價值。git

 

時光荏苒,非比尋常的一年即將過去。在這過去的一年中,與其說前端的平穩期即將到來,不如說前端反而進入了技術深水區。換言之,在全棧和多端的影響下,前端領域裏「術業有專攻」的時代已經到來現在的前端早已再也不拘泥於知足頁面展現,而是開始延展到經過全棧來閉環產品。這代表前端已經有能力透過業務深刻產業,繼而影響商業結果。這種表象的改變背後是本質的轉變,從更爲宏觀的角度來講,前端正在經過持續的技術革新和技術融合不斷突破自身邊界,進而從新定義自身價值在這種大變革的時代背景下,騰訊IMWeb前端團隊也正在與時俱進得進行着技術更新、優化與升級,結合自身這一年的快速發展,IMWeb團隊爲你們帶來2020年大前端技術趨勢解讀。github

 

回顧今年的技術趨勢npm

本文擬經過回顧2020年七大主要的前端技術趨勢來展示前端早已由單純工具解決問題的屬性逐步轉變爲深刻產品機制解決商業問題的角色。前端開發者的關注點也早已不是如何使資源利用效率更高,頁面體驗更優以及保證業務的穩定輸出,而是更爲關注產品能力、產業模式、數據建設以及商業轉化。編程

開源站點bestofjs.org收錄了Github1500個開源項目,而且還基於 GithubTrending API 的公開數據,更新統計這些項目的Stars新增趨勢。基於Bestofjs去年的2019JavaScript明星項目報告和近一年Trending排行數據,下面展現了Top30的前端重點項目,並對此進行簡單的介紹。小程序

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

相比於去年,學習資源愈來愈豐富了,Top100 內有14個項目是與前端基礎學習相關的,側面能夠看出前端行業的繁榮;同時也反映出知識和人才的迭代速度是很是快的。Deno超過Vue.js一躍成爲過去一年Star增加最快的開源項目,打破了Vue.js連續4年登頂的壟斷雖然在工業屆使用Deno落地在業務場景的狀況還比較少,可是目前的發展勢頭仍是不錯的。還記得由於Deno的出現,出現的那句經典的「求不要更新了,老子學不動了。事實證實「學不動的時代」 並無到來。除了跟學習相關的項目,假若只關注垂直領域的技術項目,咱們會驚喜地發現:後端

  • TypeScript持續升溫,依舊保持着高速成長的狀態,將來的潛力不可限量;微信小程序

  • 經過項目分佈的狀況,明顯能看到React生態圈>> Vue 生態圈>> Angular 生態圈;設計模式

  • 伴隨着WebAssembly核心規範成爲瀏覽器的標準,HTMLCSSJS以後,像C/C++RustGo等語言編寫的高性能模塊也在瀏覽器上運行相信在不久的未來,Web應用的桌面客戶端化,也將成爲一種趨勢;前端工程化

  • Strapi位列Nodejs相關領域的第三名側面反應了低代碼的趨勢還在持續升溫,各家都在研製本身的低代碼平臺來提高開發效率;

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

  • Serverless Framework 也進入了前Top100雖然排名不高,可是已經開始慢慢展現出了可持續發展的勢頭。對於一個被廠商裹挾的技術而言,這一切來之不易;

  • 大前端生態系統已經逐步完善,前端工程化逐步完善,DevOps已經走向了系統化的發展方向,前端技術已經進入深水區;

  • 因爲直播行業的火熱,以及疫情的影響,音視頻領域在過去的一年也有着蓬勃的發展。在前端領域WebRTC的技術在持續升溫。

 

接下來,主要盤點下在即將過去的2020年前端行業發生了哪些重要的事情,同時分享下騰訊IMWeb團隊在過去一年中都作了哪些工做。

 

總結2020年度趨勢

 

一、TypeScript爆發增加

2019年開始,社區內掀起了學習使用TypeScript的浪潮,從npm的下載量來看,近幾年TypeScript呈現爆發式增加,甚至在2020年在Github語言的排行榜上躍居到了第四位

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

相比於同類型工具,如ElmClosureScriptCoffeeScript等,TypeScript可謂是身先士卒:

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

數據來源:stateofjs2019

在最新的2020Stack Overflow Survey 中,TS受你們喜好程度排名第二,僅次於Rust

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

數據來源:StackOverflow Survey Result 2020

在如此爆炸式的增加浪潮中,TypeScript必將給前端生態帶來新的氣象,同時也會促使前端開發者更多地關注代碼設計、易用可維護、編碼原則及設計理念等方面的知識。

IMWeb團隊自2018年起開啓第一個TypeScript項目至今已完成絕大部分業務向TS的轉型遷移。在多端複用模塊代碼中,以TS+ Jest 爲基本要求,保證公共代碼的可維護性和可測試性:在TS編寫中,咱們更多地遵循面向對象設計原則(SOLID原則、KISS原則等),適當的運用設計模式,幫助更好地進行代碼開發和維護。同時,在TS踐行中,輔以單元測試覆蓋,能夠指導咱們更好地拆分組織代碼,編寫可測試的模塊,在公共核心業務模塊中覆蓋單測用例。

 

 

二、三大框架React當先

前端界的三大主流框架:ReactAngularVue.js,今年還是煊赫一時。此外,在過去一年,這三大主流框架還迭代了許多版本。在三大框架之中,根據過去一年的NPM下載量,React仍然穩居首位。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

Github2020年的新增Stars數量上,Vue.js依舊超過了React

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

下面分別總結各個框架 2020年的動態:

1React

React自發布v16版本後,迭代的版本都是以修復、優化爲主,當前最新版本v17.0.1,今年8月正式推出的v17版本,並沒有顯著的新特性,而是一個」墊腳石「版本。爲了後續能兼容 v18版本,或者說是爲了能達到」逐步「升級的目的,這也能規避當項目的依賴存在多個版本React時出現問題。這種逐步升級的理念與VUE漸進式兼容升級頗爲類似。

2Vue.js

2020Vue.js的重大變化無疑是Vue.js3.0 的發佈,有了很是多新特性,總結以下:

Vue.js進行了徹底Typescript重構,讓Vue.js源碼易於閱讀、開發和維護;

重寫了虛擬Dom的實現,對編譯模板進行優化、組件初始化更高效, 性能上有較大的提高;Vue.js2對象式組件存在一些問題:難以複用邏輯代碼、難以拆分超大型組件、代碼沒法被壓縮和優化、數據類型難以推倒等問題;而CompositionAPI 則是基於函數理念,去解決上述問題,使用函數能夠將統一邏輯的組件代碼收攏一塊兒達到複用,也更有利於構建時的tree-shaking檢測,這個使用起來有些相似於Reacthook

以上變化都秉持着VUE的「漸進式框架「 理念, Vue.js3.0 持續開發兼容舊的版本,即便升級了Vue.js3.0 也能夠按照以前的組件開發模式進行開發。

3Angular

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

將其依賴的Typescript版本升級至4.0,再也不支持Typescript3.9 版本;

Angularv11 在繼v10棄用IE910IEmobile 支持後,將其徹底刪除;

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

IMWeb團隊的前端技術棧主要圍繞着React體系進行構建的,包含了基於Webpack的最佳實踐IMFLOW,以及圍繞着React體系完成的組件生態在三大框架逐漸同質化的今天,將來的你使用何種框架就得由工做崗位的需求來決定了。

 

 

三、WASM展露頭角

WebAssembly源於Mozilla發起的Asm.js項目,也被稱爲「設計補充 JavaScript」,其本解碼速度比JS解析快得多,讓高性能的Web應用在瀏覽器上運行成爲可能。該模塊可在瀏覽器中的專有虛擬機上執行,與JavaScript虛擬機共享內存和線程等資源。目前主流瀏覽器基本都支持了WebAssembly

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

20191215WebAssembly正式成爲WorldWide Web Consortium (W3C) 的標準,加入到了HTMLCSSJavaScript的行列,繼而成爲瀏覽器官方的標準的第四門語言WebAssembly也正式抵達了1.0版本,得到了主流瀏覽器FirefoxChromeSafariEdge的支持。

首屆WebAssemblySubmmit 2020年在硅谷舉行(https://Webassembly-summit.org/),會議上討論了諸如:關於構建 WebAssembly新型生態系統;WebAssembly的將來以及WebAssembly與諸如Javascript等其餘支持技術的關係;WebKitWebAssembly實現的編譯、啓動和運行時等benchmarking領域進行的研究和開發;其中Ben演講的「Expandingthe PIE」

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

短短几年的時間裏,WebAssembly取得了長足的進展。

Ability

目前有100多個不一樣的項目使用WebAssembly。這些應用包括:自由手繪應用程序、媒體播放器、Gameboy仿真器、瀏覽器內壓縮/解壓應用程序,甚至還有一個AR數獨解謎應用程序。

Producer

目前大約有15種編程語言能夠以穩定的、面向生產的方式編譯到WebAssembly。其中包括:.NetAssemblyScriptCHaskellRustZig等,還有更多的正在開發中。

Interoperability

WebAssembly如今有了一個基於能力的API設計,它容許WebAssembly代碼與外部世界交互,同時仍然保留了WebAssembly的沙盒特性。此外,曾經強大而有用的 WebAPI 集合如今正在不斷獲得實現。

Embedder

如今能夠在許多不一樣的平臺上運行WebAssembly。目前正在積極開發的運行時大約有20個。WebAssembly再也不侷限於瀏覽器。這裏有區塊鏈實現、無服務器應用程序、操做系統可執行程序和物聯網實現的例子,它們被部署在獨立和受限制的嵌入式運行時環境中。

看到這麼多不一樣的項目和運行時,真是使人驚訝!而2021年的WebAssemblySubmmit 會在4月舉行。隨着WebAssembly的不斷髮展,Web中文興趣組·WebAssembly 研討會也在今年的829日在線上舉行,重點探討了WebAssembly技術應用與實現,尤爲是在多媒體、編譯器以及新型語言、仿真器、Web前端框架、虛擬機、雲、遊戲引擎、工具等多方面的應用場景。在將來的一年裏,WebAssembly會有更多的機會出如今你們的面前,咱們也會在業務中落地基於WebAssembly的應用。

WebAssembly的出現爲Web開發者打開了一扇新的大門。在去年,wasm對你來講也許還僅是技術文章中的一個常見名詞,你壓根想不到他會在瀏覽器中獲得怎樣的應用,何時會被大公司真正用起來。在今年,你頗有可能已在不知不覺中成爲wasm的使用者了。目前國內外愈來愈多的團隊基於wasm進行了業務實踐。

IMWeb團隊擅長的音視頻領域,咱們經過將ffmpeg編譯爲wasm版本且在瀏覽器中運行,將過去處於黑盒中,只有瀏覽器底層才能使用的音視頻編解碼能力完全解放目前咱們能夠在前端頁面中對音視頻流直接進行處理,在徹底不依賴後臺的狀況下,便捷、高效的實現了視頻播放幀預覽與視頻幀截圖等功能。目前團隊正在進一步探索wasm在音視頻以及其餘過去前端沒法觸及的領域的可行性實踐。

 

 

四、Low-Code恰逢其時

2014Forrester的研究報告提出「low-code」一詞到今天,低代碼領域持續升溫從低代碼領域的行業角度看,2017年後,微軟、甲骨文等各大廠家紛紛加入了低代碼賽道的競爭。近年來,得到3.6億美圓融資的Outsystems更是成爲低代碼領域海外市場的一隻獨角獸。國內方面,也不乏雲鳳蝶、點石、iVX、輕流、積木等平臺的誕生,低代碼產品領域的蓬勃發展,正成爲特定場景軟件開發的重要趨勢。

 

區分一下no-codelow-codepro-code

no-code:本身編程給本身用,給用戶的感受就是一個軟件。所以,平臺不會給本身定位成一個「編程工具」。主要是經過圖形化的操做來下降學習曲線,相似PPTExcel等。在垂直領域的特定場景中,才能作到好用。

low-code:編程給其餘人用,經過下降專業難度,讓運營人員(CitizenDeveloper)也參與進來。平臺評估好預製的場景和需求,減小從頭寫代碼的成本,必定程度上能夠經過圖形化的方式知足業務訴求。

pro-code:平常軟件開發過程當中的手寫代碼,能夠經過邏輯和模塊複用來進行提效。

區分了概念以後,還須要考慮面向的用戶。不一樣的用戶對應着不一樣的解決方案。用戶大體分爲三類:前端開發人員、後臺開發人員、產品運營人員。

 

爲何要作低代碼?

基於目前可視化和模型驅動理念,結合當下大前端跨端體驗的融合技術以及雲原生的支持,經過低代碼的方案能夠大幅度下降業務交付的成本,爲業務提供一種全新的開發範式。並且,可視化搭建去完成業務可讓產品和運營人員(CitizenDeveloper)參與進來,能夠極大得釋放軟件開發者的人力瓶頸,也進一步促進了技術和業務的深度合做。

 

低代碼應該具有哪些核心能力?

基礎物料的搭建和接入是保證業務可視化的基礎不管是行業的開源組件,仍是團隊自定義的基礎組件,搭建平臺都應該無縫地進行預期內的接入和控制。這是由於,從業務長期迭代的角度來看,最耗費人力的必定是最頻繁的業務組件。解決定製化的組件和接入組件由此成爲低代碼平臺長期須要解決的最核心問題。

編排能力就是頁面排版和對邏輯編排不管是特定場景的頁面的組件邏輯,仍是用戶自定義的交互(包括用戶行爲的服務端能力支持)都應該經過邏輯編排能力進行支持。大部分的頁面搭建工做都是在桌面端完成的,可是頁面渲染的產物多是多種形式的,好比:PCWebH5Web、小程序,那麼在搭建運行時的實時可視化和搭建完成的多端適配和多場景適配,這樣就解決了跨技術棧和跨端問題

雖然是low-code的設計方案,但仍是但願輸出的代碼是能夠進行二次開發的,所以最好能pro-codelow-code互相轉換。編程產物分爲初級產物、中間產物和最終產物。產物的豐富程度,直接決定了平臺的可複用性和靈活性。不管是基於低代碼開發和源碼的混合開發,仍是基於低代碼平臺的二次開發,都是low-code平臺須要考慮的事情。

運行時能力也很是重要,對開發者來講是一個強大的編輯器引擎,能夠方便快速接入各種組件和中間件。而對於運營人員(CitizenDeveloper)來講一樣也很重要,針對不一樣的產品和業務場景,須要定製基礎業務模版和和業務配置,方便他們快速地進行差別化的功能設計。

協做能力和數據分析能力就不言自明瞭。低代碼平臺的核心就是下降對專業性的要求所以,使用者不管是誰,都應該有更高的效率提高。而數據統計和分析是全部平臺都應該具有的基礎能力,這裏就不詳細描述了。

那麼,整理了核心能力以下:基礎資料的搭建、基礎資料的接入、業務編排能力、界面渲染能力、代碼轉換能力以及運行時能力、協做能力和數據分析能力。以上就是我認爲的低代碼方案應該具有的能力模型。

爲何說low-code是恰逢其時呢?由於不管是跨端和跨平臺領域的強大適配能力,仍是大前端工程體系的有力支撐,都已經將低代碼領域的價值逐步推到人們面前,低代碼是業務發展和技術探索的必然選擇

2020IMWeb團隊在低代碼領域不斷優化升級面向運營場景的頁面搭建平臺Vision,在真正意義上實現了對運營系統和素材開發的解耦,併兼容React,Vue.js, JQuery 等不一樣技術棧,實現了PCH5、微信小程序的可視化運營的頁面搭建。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

與此同時,在Vision系統的基礎上,咱們沉澱出一套可視化搭建引擎Gems,針對日漸增長的B側需求,Gems爲核心開發了專一於搭建管理系統的平臺Hulk,實現了相對運營頁面更爲複雜的管理頁面甚至數據接口的可視化搭建與生成

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

咱們的目標是經過Hulk實現對80%平常業務頁面的「0代碼」搭建經過Node.js統一管理數據接口,能夠經過圖形化配置,快速建立接口,組合不一樣數據源的數據;支持多組件靈活配置生成頁面的能力,擴展組件庫,開發經常使用組件;複雜頁面和接口邏輯支持低代碼擴展。

Low-Code領域的發展在2020年極其迅猛。從最先的經過模塊化搭建解決營銷活動領域的問題發展到如今能夠經過 low-code來解決內部複雜的中後臺業務需求,既適用於面向C側用戶的產品運營,也貼合B側用戶的數據管理需求。

 

 

五、全棧開發持續深耕

DevOpsNoOps的路徑之一,即是目前你們都在嘗試的Serverless自從2012年有了Serverless的概念開始,至今已經8個年頭了。近年來隨着國內的雲廠商,如騰訊雲、阿里雲、華爲雲對Serverless的支持,而且伴隨着小程序雲開發的普及,國內的開發者對Serverless的使用已經很是熟悉了。

今年9CodingSans 聯合其9個合做夥伴,發佈了Serverless2020 年度狀態報告。調查結果顯示:有75%的開發者會在公司使用這項技術。如此高的Yes也基本反映出了這樣的技術已經被大衆廣泛接受並使用。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

咱們能夠看到開發者選擇應用Serverless的場景有不少,好比:爲小程序、WebMobile提供基礎性的API服務,大規模批處理任務處理,Web站點、DevOps的工具以及GraphQLAPI能力。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

目前最大的難題是調試,這主要是由Serverless的架構複雜性所引發的而供應商之間的巨大差別也使得更換或者說遷移供應商變得很是得不償失。

與其說Serverless是一項技術,不如說Serverless是一種理想的工做模式,是一種專一於業務價值的思考單純的經過函數進行業務交付,而再也不須要關心解決業務問題以外的事情,好比:那些很是繁瑣的基礎設施。託管服務可讓開發者更專一於編寫業務函數,從而減小對機器資源、下降運維成本的考慮,可讓開發者更專一的爲產品和用戶創造價值。隨着雲廠商對於Serverless的支持,後續會有愈來愈多的開發者,能夠體會到雲時代給你們帶來的便利。

IMWeb團隊開始Serverless的實踐也很是早。隨着騰訊雲的發展,在2019年就已經將SCF落地在業務中了。2020年爲了提高 SCF的開發體驗,又完成了開發體驗的全面升級,能夠10分鐘內完成一個雲函數的上線

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

IMWeb團隊更宏大的全棧開發計劃也在2020年穩步進行中。跟隨着公司上雲的戰略,2020年團隊依託於雲提供的基礎能力進行了一系列的全棧架構演進。與時俱進的制定了新的研發基礎規範、持續性的豐富業務基礎組件、打造更佳完善監控和告警體系,並結合公司內優秀的開源項目協同共建,持續深耕全棧開發。目前已經在業務中落地了多個由前端主導的業務解決方案。這不只減小了後臺人力的投入,也極大得拓展了前端的邊界,提高了前端在業務中的價值。

 

 

六、DevOps漸進加強

研發效能是2020年提到的比較多的一個熱詞,特別是在騰訊內部,提到效能不得不提到近幾年很是火熱的DevOps,開發運維一體化流程,CI/CD流程的串聯,幫助業務提高研發效能。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

2020DevOpsSurvey 中,DevOps帶來的正面影響得到了99%的承認度:

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

不過,想要徹底達到DevOps的效果,難度是很大的,DevOps鏈路涉及到很是多的工具鏈,使用學習成本較高,在當前服務穩定的狀況下,遷移DevOps技術棧將遇到不小的挑戰。

IMWebDevOps實踐是基於業務上雲,在雲原生的基礎上完成的。其中包括:

  • Node服務上容器平臺STKE(基於K8s定製)

  • CDN對接騰訊雲COS平臺

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

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

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

對於DevOps各流程的把控和規範,IMWeb團隊自研Thanos研發效能平臺,幫助在線教育部全部先後端團隊業務完成DevOps轉型:

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

 

 

七、WebRTC持續升溫

隨着互聯網的不斷加速和音視頻技術的不斷髮展,許多以音視頻技術爲依託的產品相繼面世,好比:直播、短視頻等等。從3G4G,再到即將到來的5G時代,移動網絡的帶寬和質量愈來愈高,海量低延遲直播、互動直播也成爲了可能。音頻技術發展到今天,實際已經很是成熟了。H264/H265VP8/VP9以及後面的AV1編解碼器,解決了視頻壓縮率的問題;而5G的商用,解決了帶寬的問題這兩個問題解決後,各行各業都開始使用音視頻技術來實現更佳的用戶體驗,好比:音視頻會議、直播帶貨、在線教育、遠程醫療、娛樂遊戲等等。

2020年因爲疫情的影響,你們更多地認識和了解到音視頻相關的行業。音視頻技術底層離不開編解碼標準的發展。而就在今年,新一代國際視頻編解碼標準(H.266/VVC)正式出爐,其後續的落地實踐很是值得關注從行業應用的發展來看,圍繞音視頻直播必定會有三個發展方向:更快、更便宜、更智能。以前音視頻領域有兩大技術路線:一類是RTC,它主要用於知足多人會議中的低延時互動;另外一類是流媒體直播/點播,主要知足於對延時要求不大的高併發低成本場景而端上的音視頻處理技術主要圍繞更智能,諸如人臉識別、美顏、降噪、超分等處理優化來展開, 行業中也有更多的實踐落地,從後端到前端都在探索更爲極致的體驗。

WebRTC有個特別宏偉的願景:能夠在瀏覽器上快速開發出各類音視頻應用。但這早已再也不僅僅是願景,而是已經在逐步成爲現實。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=    

ChromeFirefox到近幾年蘋果Safari的加入與支持,各個雲服務廠商、騰訊雲、阿里雲、網易雲、七牛雲以及諸如專門音視頻服務商(聲網和即構科技等等),都將WebRTC歸入瀏覽器實時音視頻首選方案。

StackOverflow Trends GoogleTrends來看:WebRTC的熱度不斷上升,並且因爲2020年初疫情的影響,直播帶貨、在線會議和在線教育等遠程實時音視頻技術的也迎來了風口,關注度急劇上升。下面是咱們總結的WebRTC應用層面的知識圖譜:

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

早在2016IMWeb團隊就率先對WebRTC進行探索和實踐。咱們是騰訊公司內最先將WebRTC落地於業務的團隊之一,也是騰訊雲WebRTC直播能力最主要的使用者。2020年初,因爲疫情,在線教育迎來爆發式的增加。爲了保障受疫情影響而沒法返校的學生可以繼續經過線上課程完成學業,咱們開展了「停課不停學」活動。在此期間對原有的WebRTC互動直播+CDN 雲直播能力進行了全面升級,集成了快直播能力與語音舉手功能,使更多的用戶能夠享受WebRTC帶來的低延遲、高性能的互動直播體驗。

疫情漸漸平緩,IMWeb音視頻小分隊的腳步沒有所以而停緩。2020下半年,咱們又作爲公司內敢於第一個吃螃蟹的人,相繼上線了騰訊課堂的Web視頻連麥能力,推出了團隊自研的WebRTCSDK 與之相配套使用的LokiPlayer播放器。LokiPlayerWebRTC互動直播、快直播、雲直播、降級流控、點播等能力於一身,自己就已經是集大成者,又經過提供基於插槽與注入實現的插件化能力保證播放器與SDK自己均可以被業務靈活的擴展

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

2021年,咱們將繼續深刻研究音視頻的底層原理,探索更多在Web瀏覽器能獲得應用的技術,持續性地優化諸如音視頻體驗、音視頻質量以及測試與定位等能力。結合wasm,將以前沒法想象的功能逐個實踐、逐個實現落地。明年將與終端播放器一塊兒對外進行開源。若是你剛好是Web音視頻技術的使用者,千萬不要錯過!

 

 

展望2021技術趨勢

技術的核心價值是爲業務創造價值。那麼,如何能快速知足業務發展訴求呢?首先,咱們始終離不開解決成本、效率、質量三者之間的平衡。所以,提高基礎物料的可用性、提高開發工具的便捷性、完善動態運營的靈活性以及解決產品質量的穩定性,這些永遠都會在咱們的平常工做中持續進行,而且在追求極致的道路上永無止境

正所謂分久必合,合久必分。不管是選擇極權式的中臺化解決方案,亦或是選擇去中心化的業務自制模式,均可以提高技術在業務的影響力。固然選擇什麼樣的方式,這與企業自身的基因和團隊發展的階段有很大的關係。

在垂直領域的技術發展方面,咱們對2021年能夠作一些展望:

  • 三大框架的同質化會愈來愈明顯,而周邊配套還在可持續的發展中。從開發者的基數上能夠看到將來一年React仍是會持續性地領先,但這並不妨礙Vue的優秀;

  • 因爲可維護性和系統的複雜度上升,TS將來一年依舊會保持強勁的勢頭吞噬JS的版圖將來會有更多的開源框架和基礎組件擁抱TS社區。

  • 大前端領域的前端工程化現在已經慢慢成熟和穩定了,而在將來一段時間,更可能是基於全棧開發的工程化體系的建設。前端開發者會更多的借鑑後臺開發的經驗去加速這一歷史進程的速度,儘快完成全棧研發體系的升級和探索。

  • 隨着WebAssembly持續性的發展,會有愈來愈多的產品在業務上落地WASM這項技術。而隨着WASM的發展瀏覽器桌面應用化的趨勢也會愈來愈明顯WebOS將來是否可以落地,相信WASM在其中必定扮演了重要的角色。

  • 小程序的標準化雖然提上了日程,可是因爲有微信這樣超級APP的存在,標準化的道路註定不會平坦跨端開發上最耀眼的明星仍是Flutter,而蘋果公司發佈的SwiftUI也在路上了。從開發者的角度來看,多端同構是一種美好的願望,可是任重道遠,仍然須要長期且持續性的攻堅克難;

  • 與其說是Serverless不斷地持續升溫,不如說是泛前端的時代已經到來。前端團隊尋求價值的渴望驅使着開發者們不斷突破着本身的工做範圍;前端服務化的工做模式已經從萌芽階段發展到路人皆知的階段了大前端服務化的趨勢已是這個時代不可逆轉的趨勢了。

  • 隨着5G網絡的普及和手機硬件的不斷提高,流量瓶頸和渲染性能在將來一年會有質的提高,這其中最大的受益者就是從事音視頻領域的開發者。相信在將來的一年裏,音視頻領域必定是百花齊放的狀態。

  • 低代碼的場景自然的靶場就是在B端業務中進行抽象和實現。而隨着產業互聯網的提出,整個行業進入了ToB的轉型期,將來的低代碼會愈來愈受到大廠的重視。固然,低代碼仍是要持續解決三大問題:基礎平臺的能力完善、開發質量更加可控,以及低代碼產物的可維護性提高能夠碰見的將來低代碼會火爆的表現,而且會在生產中綻開光彩。

 

 

最後,爲IMWebConf2020 大會打個小廣告。

本屆大會在2021116日下午在線直播咱們邀請了IMWeb團隊內優秀的開發者,他們會結合自身實踐經驗,分享本身在前沿領域中的思考與解決方案。若是你對如下任何一項內容感興趣,歡迎參與,一塊兒學習和交流。

  • 前端工程化:詳解團隊的前端工程化、效率工具建設探索實踐;

  • 音視頻領域:前端直播點播技術的探索,尤爲是直播WebRTC技術的相關實踐。

  • 低代碼進階:深度解讀低代碼概念,以及在團隊低代碼系統的實踐方案;

  • 全棧開發:落地過程當中的經驗分享,關於效率、質量、性能的思考。

2.關注公衆號腦洞前端,獲取更多前端硬核文章!不錯過每一條成長的機會。

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

相關文章
相關標籤/搜索