2021 年大前端技術趨勢解讀

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如今的前端早已不再拘泥於滿足頁面展示，而是開始延展到通過全棧來閉環產品。這表明前端已經有能力透過業務深入產業，繼而影響商業結果。這種表象的改變背後是本質的轉變，"},{"type":"text","marks":[{"type":"strong"}],"text":"從更爲宏觀的角度來說，前端正在通過持續的技術革新和技術融合不斷突破自身邊界，進而重新定義自身價值。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"一、回顧今年的技術趨勢"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文擬通過回顧2020年七大主要的前端技術趨勢來展現前端早已由單純工具解決問題的屬性逐步轉變爲深入產品機制解決商業問題的角色。前端開發者的關注點也早已不是如何使資源利用效率更高，頁面體驗更優以及保證業務的穩定輸出，而是更爲關注產品能力、產業模式、數據建設以及商業轉化。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開源站點bestofjs.org收錄了Github上1500個開源項目，並且還基於 "},{"type":"text","marks":[{"type":"underline"}],"text":"GithubTrending API"},{"type":"text","text":" [1] 的公開數據，更新統計這些項目的Stars新增趨勢。基於Bestofjs去年的"},{"type":"text","marks":[{"type":"underline"}],"text":"2019年JavaScript明星項目報告"},{"type":"text","text":"[2] 和近一年Trending排行數據，下面展示了Top30的前端重點項目，並對此進行簡單的介紹。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/bc\/bc3f0db7614df5de216ba12b9da3abb6.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相比於去年，學習資源越來越豐富了，Top100 內有14個項目是與前端基礎學習相關的，側面可以看出前端行業的繁榮；同時也反映出知識和人才的迭代速度是非常快的。"},{"type":"text","marks":[{"type":"strong"}],"text":"Deno超過Vue.js一躍成爲過去一年Star增長最快的開源項目，打破了Vue.js連續4年登頂的壟斷。"},{"type":"text","text":"雖然在工業屆使用Deno落地在業務場景的情況還比較少，但是目前的發展勢頭還是不錯的。還記得因爲Deno的出現，出現的那句經典的“求不要更新了，老子學不動了”"},{"type":"text","marks":[{"type":"strong"}],"text":"。事實證明“學不動的時代” 並沒有到來。"},{"type":"text","text":"除了跟學習相關的項目，倘若只關注垂直領域的技術項目，我們會驚喜地發現："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"TypeScript"},{"type":"text","text":"持續升溫，依舊保持着高速成長的狀態，未來的潛力不可限量；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過項目分佈的情況，"},{"type":"text","marks":[{"type":"strong"}],"text":"明顯能看到React生態圈>> Vue 生態圈>> Angular 生態圈；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"伴隨着WebAssembly核心規範成爲瀏覽器的標準，"},{"type":"text","marks":[{"type":"strong"}],"text":"繼HTML、CSS和JS之後，像C\/C++、Rust、Go等語言編寫的高性能模塊也在瀏覽器上運行。"},{"type":"text","text":"相信在不久的將來，Web應用的桌面客戶端化，也將成爲一種趨勢；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Strapi位列Nodejs相關領域的第三名側面反應了低代碼的趨勢還在持續升溫，"},{"type":"text","text":"各家都在研製自己的低代碼平臺來提升開發效率；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"JS Framework 相關的領域，Next.js超越Nest成爲了今年的冠軍。"},{"type":"text","text":"在強大的React體系的影響下，業務越來越多的人選擇使用同構和直出的方案來構建Web應用；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"Serverless Framework 也進入了前Top100，"},{"type":"text","text":"雖然排名不高，但是已經開始慢慢展示出了可持續發展的勢頭。對於一個被廠商裹挾的技術而言，這一切來之不易；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"大前端生態系統已經逐步完善，前端工程化逐步完善，"},{"type":"text","marks":[{"type":"strong"}],"text":"DevOps已經走向了系統化的發展方向，前端技術已經進入深水區；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於直播行業的火熱，以及疫情的影響，"},{"type":"text","marks":[{"type":"strong"}],"text":"音視頻領域在過去的一年也有着蓬勃的發展"},{"type":"text","text":"。在前端領域WebRTC的技術在持續升溫。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來，主要盤點下在即將過去的2020年前端行業發生了哪些重要的事情，同時分享下騰訊IMWeb團隊在過去一年中都做了哪些工作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"二、總結2020年度趨勢"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":"br"}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1. TypeScript爆發增長"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從2019年開始，社區內掀起了學習使用TypeScript的浪潮，從npm的下載量來看，近幾年TypeScript呈現爆發式增長，"},{"type":"text","marks":[{"type":"strong"}],"text":"甚至在2020年在Github語言的排行榜上躍居到了第四位。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/18\/1878cfbf1333955b5b19142974b6a7ce.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"數據來源：https:\/\/octoverse.github.com"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相比於同類型工具，如Elm、ClosureScript、CoffeeScript等，TypeScript可謂是一馬當先："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/aa\/aaba3713b25da46600b13cac3a71633d.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"數據來源：stateofjs2019"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在最新的2020Stack Overflow Survey 中，TS受大家喜愛程度排名第二，僅次於Rust："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f5\/f55cb658963f3711914226d9c47d2ab6.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"italic"}],"text":"數據來源：StackOverflow Survey Result 2020"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在如此爆炸式的增長浪潮中，TypeScript必將給前端生態帶來新的氣象，同時也會促使前端開發者更多地關注代碼設計、易用可維護、編碼原則及設計理念等方面的知識。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"IMWeb團隊自2018年起開啓第一個TypeScript項目"},{"type":"text","text":"[3]"},{"type":"text","marks":[{"type":"strong"}],"text":"，至今已完成絕大部分業務向TS的轉型遷移。"},{"type":"text","text":"在多端複用模塊代碼中，以TS+ Jest 爲基本要求，保證公共代碼的可維護性和可測試性：在TS編寫中，我們更多地遵循面向對象設計原則（SOLID原則、KISS原則等），適當的運用設計模式，幫助更好地進行代碼開發和維護。同時，在TS踐行中，輔以單元測試覆蓋，可以指導我們更好地拆分組織代碼，編寫可測試的模塊，在公共核心業務模塊中覆蓋單測用例。（有對TS工程化感興趣的同學，可以聯繫孟建和enjoy）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2. 三大框架React當先"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端界的三大主流框架：React、Angular和Vue.js，今年仍是炙手可熱。此外，在過去一年，這三大主流框架還迭代了許多版本。在三大框架之中，根據過去一年的NPM下載量，React仍然穩居首位。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/ce\/ce5fa0f927a0ad14faeedd13e6130eb0.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"2020年的StackOverflow Trends顯示React> Vue.js > Angular。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b0\/b058e28785a07aabd00235d9325c98dd.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"在Github 2020年的新增Stars數量上，Vue.js依舊超過了React。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/5f\/5f9b4828bdec0ede7cc3ea0094d66921.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面分別總結各個框架 2020年的動態："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"（1）React"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"React自發布v16版本後，迭代的版本都是以修復、優化爲主，當前最新版本v17.0.1，今年8月正式推出的v17版本，並無顯著的新特性，而是一個”墊腳石“版本。爲了後續能兼容 v18版本，或者說是爲了能達到”逐步“升級的目的，這也能規避當項目的依賴存在多個版本React時出現問題。這種逐步升級的理念與VUE的漸進式兼容升級頗爲相似。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"（2）Vue.js"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2020年Vue.js的重大變化無疑是Vue.js3.0 的發佈，有了非常多新特性，總結如下："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對Vue.js進行了完全Typescript重構，讓Vue.js源碼易於閱讀、開發和維護；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"重寫了虛擬Dom的實現，對編譯模板進行優化、組件初始化更高效， 性能上有較大的提升；Vue.js2對象式組件存在一些問題：難以複用邏輯代碼、難以拆分超大型組件、代碼無法被壓縮和優化、數據類型難以推倒等問題；而CompositionAPI 則是基於函數理念，去解決上述問題，使用函數可以將統一邏輯的組件代碼收攏一起達到複用，也更有利於構建時的tree-shaking檢測，這個使用起來有些類似於React的hook；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以上變化都秉持着VUE的“漸進式框架“ 理念， Vue.js3.0 持續開發兼容舊的版本，即使升級了Vue.js3.0 也可以按照之前的組件開發模式進行開發。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"（3）Angular"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Angular在今年11月推出了v11.0.0版本，主要變化爲："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"將其依賴的Typescript版本升級至4.0,不再支持Typescript3.9 版本；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Angularv11 在繼v10棄用IE9、10和IEmobile 支持後，將其完全刪除；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"加入了Webpack5，升級至 Angularv11 版本，即可使用Webpack5 的新特性，如更快的構建速度、模塊聯邦等。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"IMWeb團隊的前端技術棧主要圍繞着React體系進行構建的，包含了基於Webpack的最佳實踐IMFLOW，以及圍繞着React體系完成的組件生態。"},{"type":"text","text":"在三大框架逐漸同質化的今天，未來的你使用何種框架就得由工作崗位的需求來決定了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"3. WASM展露頭角"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebAssembly源於Mozilla發起的Asm.js項目，也被稱爲“設計補充 JavaScript”，其本解碼速度比JS解析快得多，讓高性能的Web應用在瀏覽器上運行成爲可能。該模塊可在瀏覽器中的專有虛擬機上執行，與JavaScript虛擬機共享內存和線程等資源。目前主流瀏覽器基本都支持了WebAssembly。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/51\/513448d9bd24a281c515838b95fba0e9.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"在2019年12月15日WebAssembly正式成爲WorldWide Web Consortium (W3C) 的標準，加入到了HTML、CSS和JavaScript的行列，繼而成爲瀏覽器官方的標準的第四門語言。"},{"type":"text","text":"WebAssembly也正式抵達了1.0版本，獲得了主流瀏覽器Firefox、Chrome、Safari和Edge的支持。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"首屆WebAssemblySubmmit 2020年在硅谷舉行[4]"},{"type":"text","text":"，會議上討論了諸如：關於構建 WebAssembly新型生態系統；WebAssembly的未來以及WebAssembly與諸如Javascript等其他支持技術的關係；WebKit的WebAssembly實現的編譯、啓動和運行時等benchmarking領域進行的研究和開發；其中Ben演講的“Expandingthe PIE” 。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/05\/058546de1576fbe9bdebdcf0928f8118.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"短短几年的時間裏，WebAssembly取得了長足的進展。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"（1）Ability"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前有100多個不同的項目使用WebAssembly。這些應用包括：自由手繪應用程序、媒體播放器、Gameboy仿真器、瀏覽器內壓縮\/解壓應用程序，甚至還有一個AR數獨解謎應用程序。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"（2）Producer"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前大約有15種編程語言可以以穩定的、面向生產的方式編譯到WebAssembly。其中包括：.Net，AssemblyScript，C，，Haskell，Rust和Zig等，還有更多的正在開發中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"（3）Interoperability"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebAssembly現在有了一個基於能力的API設計，它允許WebAssembly代碼與外部世界交互，同時仍然保留了WebAssembly的沙盒特性。此外，曾經強大而有用的 WebAPI 集合現在正在不斷得到實現。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"（4）Embedder"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在可以在許多不同的平臺上運行WebAssembly。目前正在積極開發的運行時大約有20個。WebAssembly不再侷限於瀏覽器。這裏有區塊鏈實現、無服務器應用程序、操作系統可執行程序和物聯網實現的例子，它們被部署在獨立和受限制的嵌入式運行時環境中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看到這麼多不同的項目和運行時，真是令人驚訝！而2021年的WebAssemblySubmmit 會在4月舉行。隨着WebAssembly的不斷髮展，"},{"type":"text","marks":[{"type":"strong"}],"text":"Web中文興趣組·WebAssembly 研討會也在今年的8月29日在線上舉行[5]"},{"type":"text","text":"，重點探討了WebAssembly技術應用與實現，尤其是在多媒體、編譯器以及新型語言、仿真器、Web前端框架、虛擬機、雲、遊戲引擎、工具等多方面的應用場景，詳細的會議紀要請看[6]。在未來的一年裏，WebAssembly會有更多的機會出現在大家的面前，我們也會在業務中落地基於WebAssembly的應用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"WebAssembly的出現爲Web開發者打開了一扇新的大門"},{"type":"text","text":"。在去年，wasm對你來說也許還僅是技術文章中的一個常見名詞，你壓根想不到他會在瀏覽器中得到怎樣的應用，什麼時候會被大公司真正用起來。"},{"type":"text","marks":[{"type":"strong"}],"text":"在今年，你很有可能已在不知不覺中成爲wasm的使用者了"},{"type":"text","text":"。目前國內外越來越多的團隊基於wasm進行了業務實踐。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"IMWeb團隊擅長的音視頻領域，我們通過將ffmpeg編譯爲wasm版本且在瀏覽器中運行，將過去處於黑盒中，只有瀏覽器底層才能使用的音視頻編解碼能力徹底解放。"},{"type":"text","text":"目前我們可以在前端頁面中對音視頻流直接進行處理，在完全不依賴後臺的情況下，便捷、高效的實現了視頻播放幀預覽與視頻幀截圖等功能。目前團隊正在進一步探索wasm在音視頻以及其他過去前端無法觸及的領域的可行性實踐。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4. Low-Code恰逢其時"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"從2014年Forrester的研究報告提出“low-code”一詞到今天，低代碼領域持續升溫。"},{"type":"text","text":"從低代碼領域的行業角度看，2017年後，微軟、甲骨文等各大廠家紛紛加入了低代碼賽道的競爭。近年來，獲得3.6億美元融資的Outsystems更是成爲低代碼領域海外市場的一隻獨角獸。國內方面，也不乏雲鳳蝶、點石、iVX、輕流、積木等平臺的誕生，低代碼產品領域的蓬勃發展，正成爲特定場景軟件開發的重要趨勢。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"先來區分一下no-code、low-code、pro-code："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"no-code"},{"type":"text","text":"：自己編程給自己用，給用戶的感覺就是一個軟件。因此，平臺不會給自己定位成一個“編程工具”。主要是通過圖形化的操作來降低學習曲線，類似PPT、Excel等。在垂直領域的特定場景中，才能做到好用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"low-code"},{"type":"text","text":"：編程給其他人用，通過降低專業難度，讓運營人員（CitizenDeveloper）也參與進來。平臺評估好預製的場景和需求，減少從頭寫代碼的成本，一定程度上可以通過圖形化的方式滿足業務訴求。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"pro-code"},{"type":"text","text":"：日常軟件開發過程中的手寫代碼，可以通過邏輯和模塊複用來進行提效。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"區分了概念之後，還需要考慮面向的用戶。不同的用戶對應着不同的解決方案。"},{"type":"text","marks":[{"type":"strong"}],"text":"用戶大致分爲三類："},{"type":"text","text":"前端開發人員、後臺開發人員、產品運營人員。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"（1）爲什麼要做低代碼？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於目前可視化和模型驅動理念，結合當下大前端跨端體驗的融合技術以及雲原生的支持，通過低代碼的方案可以大幅度降低業務交付的成本，爲業務提供一種全新的開發範式。而且，可視化搭建去完成業務可以讓產品和運營人員（CitizenDeveloper）參與進來，可以極大得釋放軟件開發者的人力瓶頸，也進一步促進了技術和業務的深度合作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"（2）低代碼應該具備哪些核心能力？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"基礎物料的搭建和接入是保證業務可視化的基礎。"},{"type":"text","text":"無論是行業的開源組件，還是團隊自定義的基礎組件，搭建平臺都應該無縫地進行預期內的接入和控制。這是因爲，從業務長期迭代的角度來看，最耗費人力的一定是最頻繁的業務組件。解決定製化的組件和接入組件由此成爲低代碼平臺長期需要解決的最核心問題。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"編排能力就是頁面排版和對邏輯編排。"},{"type":"text","text":"無論是特定場景的頁面的組件邏輯，還是用戶自定義的交互（包括用戶行爲的服務端能力支持）都應該通過邏輯編排能力進行支持。大部分的頁面搭建工作都是在桌面端完成的，但是頁面渲染的產物可能是多種形式的，比如：PCWeb、H5Web、小程序，"},{"type":"text","marks":[{"type":"strong"}],"text":"那麼在搭建運行時的實時可視化和搭建完成的多端適配和多場景適配，這樣就解決了跨技術棧和跨端問題"},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"雖然是low-code的設計方案，但還是希望輸出的代碼是可以進行二次開發的，"},{"type":"text","marks":[{"type":"strong"}],"text":"因此最好能pro-code與low-code互相轉換。"},{"type":"text","text":"編程產物分爲初級產物、中間產物和最終產物。產物的豐富程度，直接決定了平臺的可複用性和靈活性。無論是基於低代碼開發和源碼的混合開發，還是基於低代碼平臺的二次開發，都是low-code平臺需要考慮的事情。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"運行時能力也非常重要"},{"type":"text","text":"，對開發者來說是一個強大的編輯器引擎，可以方便快速接入各類組件和中間件。而對於運營人員（CitizenDeveloper）來說同樣也很重要，針對不同的產品和業務場景，需要定製基礎業務模版和和業務配置，方便他們快速地進行差異化的功能設計。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"協作能力和數據分析能力就不言自明瞭。"},{"type":"text","marks":[{"type":"strong"}],"text":"低代碼平臺的核心就是降低對專業性的要求。"},{"type":"text","text":"因此，使用者無論是誰，都應該有更高的效率提升。而數據統計和分析是所有平臺都應該具備的基礎能力，這裏就不詳細描述了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼，"},{"type":"text","marks":[{"type":"strong"}],"text":"整理了核心能力如下：基礎資料的搭建、基礎資料的接入、業務編排能力、界面渲染能力、代碼轉換能力以及運行時能力、協作能力和數據分析能力。以上就是我認爲的低代碼方案應該具備的能力模型。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲什麼說low-code是恰逢其時呢？"},{"type":"text","marks":[{"type":"strong"}],"text":"因爲無論是跨端和跨平臺領域的強大適配能力，還是大前端工程體系的有力支撐，都已經將低代碼領域的價值逐步推到人們面前，低代碼是業務發展和技術探索的必然選擇。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"2020年IMWeb團隊在低代碼領域不斷優化升級面向運營場景的頁面搭建平臺Vision"},{"type":"text","text":"，在真正意義上實現了對運營系統和素材開發的解耦，併兼容React,Vue, JQuery 等不同技術棧，實現了PC、H5、微信小程序的可視化運營的頁面搭建。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/31\/31c37e96dd27cabe7bbd713d6a5c3efc.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與此同時，在Vision系統的基礎上，我們沉澱出一套可視化搭建引擎Gems，針對日漸增加的B側需求，"},{"type":"text","marks":[{"type":"strong"}],"text":"以Gems爲核心開發了專注於搭建管理系統的平臺Hulk，實現了相對運營頁面更爲複雜的管理頁面甚至數據接口的可視化搭建與生成。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/87\/876f636fbaa4dc7b99f8a5e5dae9be18.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"我們的目標是通過Hulk實現對80%日常業務頁面的“0代碼”搭建。"},{"type":"text","text":"通過Node.js統一管理數據接口，可以通過圖形化配置，快速創建接口，組合不同數據源的數據；支持多組件靈活配置生成頁面的能力，擴展組件庫，開發常用組件；複雜頁面和接口邏輯支持低代碼擴展。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Low-Code領域的發展在2020年極其迅猛。從最早的通過模塊化搭建解決營銷活動領域的問題發展到現在可以通過 low-code來解決內部複雜的中後臺業務需求，既適用於面向C側用戶的產品運營，也貼合B側用戶的數據管理需求。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"5. 全棧開發持續深耕"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"從DevOps到NoOps的路徑之一，便是目前大家都在嘗試的Serverless了。"},{"type":"text","text":"自從2012年有了Serverless的概念開始，至今已經8個年頭了。近年來隨着國內的雲廠商，如騰訊雲、阿里雲、華爲雲對Serverless的支持，並且伴隨着小程序雲開發的普及，國內的開發者對Serverless的使用已經非常熟悉了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今年9月CodingSans 聯合其9個合作伙伴，發佈了Serverless2020 年度狀態報告。調查結果顯示：有75%的開發者會在公司使用這項技術。如此高的Yes也基本反映出了這樣的技術已經被大衆普遍接受並使用。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/fb\/fb9ceda42e3430ef9eb29fb67e3681d1.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們可以看到開發者選擇應用Serverless的場景有很多，比如：爲小程序、Web、Mobile提供基礎性的API服務，大規模批處理任務處理，Web站點、DevOps的工具以及GraphQLAPI能力。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/1e\/1eaa17bf51c1def1c33df9abb8b30357.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"目前最大的難題是調試，這主要是由Serverless的架構複雜性所引起的。"},{"type":"text","text":"而供應商之間的巨大差異也使得更換或者說遷移供應商變得非常得不償失。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"與其說Serverless是一項技術，不如說Serverless是一種理想的工作模式，是一種專注於業務價值的思考。"},{"type":"text","text":"單純的通過函數進行業務交付，而不再需要關心解決業務問題之外的事情，比如：那些非常繁瑣的基礎設施。託管服務可以讓開發者更專注於編寫業務函數，從而減少對機器資源、降低運維成本的考慮，可以讓開發者更專注的爲產品和用戶創造價值。隨着雲廠商對於Serverless的支持，後續會有越來越多的開發者，可以體會到雲時代給大家帶來的便利。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"IMWeb團隊開始Serverless的實踐也非常早。隨着騰訊雲的發展，在2019年就已經將SCF落地在業務中了。"},{"type":"text","text":"而2020年爲了提升 SCF的開發體驗，又完成了開發體驗的全面升級，可以"},{"type":"text","marks":[{"type":"strong"}],"text":"在10分鐘內完成一個雲函數的上線[7]"},{"type":"text","text":"。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d3\/d364d5c3d79d29993b79d189da3ae2c0.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"IMWeb團隊更宏大的全棧開發計劃也在2020年穩步進行中。跟隨着公司上雲的戰略，2020年團隊"},{"type":"text","marks":[{"type":"strong"}],"text":"依託於雲提供的基礎能力"},{"type":"text","text":"進行了一系列的"},{"type":"text","marks":[{"type":"strong"}],"text":"全棧架構演進"},{"type":"text","text":"。與時俱進的制定了新的研發基礎規範、持續性的豐富業務基礎組件、打造更佳完善監控和告警體系，並結合公司內優秀的開源項目協同共建，"},{"type":"text","marks":[{"type":"strong"}],"text":"持續深耕全棧開發"},{"type":"text","text":"。目前已經在業務中"},{"type":"text","marks":[{"type":"strong"}],"text":"落地了多個由前端主導的業務解決方案"},{"type":"text","text":"。這不僅減少了後臺人力的投入，也極大得拓展了前端的邊界，提升了前端在業務中的價值。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/44\/44870612fa815c22b41bce2d9ad80a56.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"6. DevOps漸進增強"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"研發效能是2020年提到的比較多的一個熱詞，特別是在騰訊內部，提到效能不得不提到近幾年非常火熱的DevOps，開發運維一體化流程，CI\/CD流程的串聯，幫助業務提升研發效能。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/6c\/6c641edd87b3fcc8496c1dbacfe89bde.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在2020的DevOpsSurvey 中，DevOps帶來的正面影響獲得了99%的認可度："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/98\/98294b76dffe697024d345f52c9cb2ec.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不過，想要完全達到DevOps的效果，難度是很大的，DevOps鏈路涉及到非常多的工具鏈，使用學習成本較高，在當前服務穩定的情況下，遷移DevOps技術棧將遇到不小的挑戰。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"IMWeb在DevOps實踐是基於業務上雲，在"},{"type":"text","marks":[{"type":"strong"}],"text":"雲原生"},{"type":"text","text":"的基礎上完成的。其中包括："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Node服務上容器平臺STKE（基於K8s定製）"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CDN對接騰訊雲COS平臺"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"BFF層、小程序等使用Serverless服務"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CI規範化構建、檢查、測試流程"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"IMWeb自研Thanos平臺串聯DevOps一體化流程"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"對於DevOps各流程的把控和規範，IMWeb團隊自研Thanos研發效能平臺，幫助在線教育部所有前後端團隊業務完成DevOps轉型："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f7\/f73b630c264c32b3d0fad569a20bc656.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"7. WebRTC持續升溫"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着互聯網的不斷加速和音視頻技術的不斷髮展，許多以音視頻技術爲依託的產品相繼面世，比如：直播、短視頻等等。從3G到4G，再到即將到來的5G時代，移動網絡的帶寬和質量越來越高，海量低延遲直播、互動直播也成爲了可能。音頻技術發展到今天，實際已經非常成熟了。從H264\/H265、VP8\/VP9以及後面的AV1編解碼器，解決了視頻壓縮率的問題；而5G的商用，解決了帶寬的問題。這兩個問題解決後，各行各業都開始使用音視頻技術來實現更佳的用戶體驗，比如：音視頻會議、直播帶貨、在線教育、遠程醫療、娛樂遊戲等等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2020年由於疫情的影響，大家更多地認識和了解到音視頻相關的行業。音視頻技術底層離不開編解碼標準的發展。"},{"type":"text","marks":[{"type":"strong"}],"text":"而就在今年，新一代國際視頻編解碼標準（H.266\/VVC）正式出爐，其後續的落地實踐非常值得關注。"},{"type":"text","text":"從行業應用的發展來看，圍繞音視頻直播一定會有三個發展方向：更快、更便宜、更智能。"},{"type":"text","marks":[{"type":"strong"}],"text":"之前音視頻領域有兩大技術路線：一類是RTC，它主要用於滿足多人會議中的低延時互動；另一類是流媒體直播\/點播，主要滿足於對延時要求不大的高併發低成本場景。"},{"type":"text","text":"而端上的音視頻處理技術主要圍繞更智能，諸如人臉識別、美顏、降噪、超分等處理優化來展開, 行業中也有更多的實踐落地，從後端到前端都在探索更爲極致的體驗。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"WebRTC有個特別宏偉的願景：可以在瀏覽器上快速開發出各種音視頻應用。但這早已不再僅僅是願景，而是已經在逐步成爲現實。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/e2\/e20a525193015a474a265d8ec96a1173.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"    "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從Chrome、Firefox到近幾年蘋果Safari的加入與支持，各個雲服務廠商、騰訊雲、阿里雲、網易雲、七牛雲以及諸如專門音視頻服務商（聲網和即構科技等等），都將WebRTC納入瀏覽器實時音視頻首選方案。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從StackOverflow Trends 和GoogleTrends來看：WebRTC的熱度不斷上升，而且由於"},{"type":"text","marks":[{"type":"strong"}],"text":"2020年初疫情的影響，直播帶貨、在線會議和在線教育等遠程實時音視頻技術的也迎來了風口，關注度急劇上升"},{"type":"text","text":"。下面是我們總結的WebRTC應用層面的知識圖譜："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/df\/dfa6327180fa41c171c59743a5869cb0.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"早在2016年IMWeb團隊就率先對WebRTC進行探索和實踐。我們是騰訊公司內最早將WebRTC落地於業務的團隊之一，也是騰訊雲WebRTC直播能力最主要的使用者。2020年初，由於疫情，在線教育迎來爆發式的增長。爲了保障受疫情影響而無法返校的學生能夠繼續通過線上課程完成學業，我們開展了“"},{"type":"text","marks":[{"type":"strong"}],"text":"停課不停學"},{"type":"text","text":"”活動。在此期間對原有的WebRTC互動直播+CDN 雲直播能力進行了全面升級，集成了快直播能力與語音舉手功能，使更多的用戶可以享受WebRTC帶來的低延遲、高性能的互動直播體驗。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"疫情漸漸平緩，IMWeb音視頻小分隊的腳步沒有因此而停緩。2020下半年，我們又做爲公司內勇於第一個喫螃蟹的人，相繼上線了騰訊課堂的Web視頻連麥能力，推出了團隊自研的WebRTCSDK 與之相配套使用的LokiPlayer播放器。"},{"type":"text","marks":[{"type":"strong"}],"text":"LokiPlayer集WebRTC互動直播、快直播、雲直播、降級流控、點播等能力於一身，本身就已是集大成者，又通過提供基於插槽與注入實現的插件化能力保證播放器與SDK本身都可以被業務靈活的擴展。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b2\/b2a4659e384803011bb8c9f1339dfca6.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在2021年，我們將繼續深入研究音視頻的"},{"type":"text","marks":[{"type":"strong"}],"text":"底層原理"},{"type":"text","text":"，探索更多在Web瀏覽器能得到應用的技術，"},{"type":"text","marks":[{"type":"strong"}],"text":"持續性地優化"},{"type":"text","text":"諸如音視頻體驗、音視頻質量以及測試與定位等能力。結合wasm，將之前無法想象的功能逐個實踐、逐個實現落地。明年將與"},{"type":"text","marks":[{"type":"strong"}],"text":"終端播放器一起對外進行開源。如果你恰好是Web音視頻技術的使用者，千萬不要錯過！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"三、展望2021技術趨勢"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":"br"}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"技術的核心價值是爲業務創造價值。那麼，如何能快速滿足業務發展訴求呢？首先，我們始終離不開解決成本、效率、質量三者之間的平衡。"},{"type":"text","marks":[{"type":"strong"}],"text":"因此，提升基礎物料的可用性、提升開發工具的便捷性、完善動態運營的靈活性以及解決產品質量的穩定性，這些永遠都會在我們的日常工作中持續進行，並且在追求極致的道路上永無止境！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正所謂分久必合，合久必分。無論是選擇極權式的中臺化解決方案，亦或是選擇去中心化的業務自制模式，都可以提升技術在業務的影響力。當然選擇什麼樣的方式，這與企業自身的基因和團隊發展的階段有很大的關係。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"在垂直領域的技術發展方面，我們對2021年可以做一些展望："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"三大框架的同質化會越來越明顯，而周邊配套還在可持續的發展中。"},{"type":"text","marks":[{"type":"strong"}],"text":"從開發者的基數上可以看到未來一年React還是會持續性地領先"},{"type":"text","text":"，但這並不妨礙Vue的優秀；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由於可維護性和系統的複雜度上升，"},{"type":"text","marks":[{"type":"strong"}],"text":"TS未來一年依舊會保持強勁的勢頭吞噬JS的版圖，"},{"type":"text","text":"未來會有更多的開源框架和基礎組件擁抱TS社區。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"大前端領域的前端工程化如今已經慢慢成熟和穩定了，而在未來一段時間，更多是基於全棧開發的工程化體系的建設。"},{"type":"text","marks":[{"type":"strong"}],"text":"前端開發者會更多的借鑑後臺開發的經驗去加速這一歷史進程的速度，儘快完成全棧研發體系的升級和探索。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着WebAssembly持續性的發展，會有越來越多的產品在業務上落地WASM這項技術。"},{"type":"text","marks":[{"type":"strong"}],"text":"而隨着WASM的發展瀏覽器桌面應用化的趨勢也會越來越明顯。"},{"type":"text","text":"WebOS未來是否能夠落地，相信WASM在其中一定扮演了重要的角色。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"小程序的標準化雖然提上了日程，但是由於有微信這樣超級APP的存在，標準化的道路註定不會平坦。"},{"type":"text","text":"跨端開發上最耀眼的明星還是Flutter，而蘋果公司發佈的SwiftUI也在路上了。從開發者的角度來看，多端同構是一種美好的願望，但是任重道遠，仍然需要長期且持續性的攻堅克難；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"與其說是Serverless不斷地持續升溫，不如說是泛前端的時代已經到來。前端團隊尋求價值的渴望驅使着開發者們不斷突破着自己的工作範圍；"},{"type":"text","marks":[{"type":"strong"}],"text":"前端服務化的工作模式已經從萌芽階段發展到路人皆知的階段了，"},{"type":"text","text":"大前端服務化的趨勢已經是這個時代不可逆轉的趨勢了。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"隨着5G網絡的普及和手機硬件的不斷提升，流量瓶頸和渲染性能在未來一年會有質的提升，這其中最大的受益者就是從事音視頻領域的開發者。"},{"type":"text","marks":[{"type":"strong"}],"text":"相信在未來的一年裏，音視頻領域一定是百花齊放的狀態。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"低代碼的場景天然的靶場就是在B端業務中進行抽象和實現。而"},{"type":"text","marks":[{"type":"strong"}],"text":"隨着產業互聯網的提出，整個行業進入了ToB的轉型期，未來的低代碼會越來越受到大廠的重視。"},{"type":"text","text":"當然，"},{"type":"text","marks":[{"type":"strong"}],"text":"低代碼還是要持續解決三大問題：基礎平臺的能力完善、開發質量更加可控，以及低代碼產物的可維護性提升。"},{"type":"text","text":"可以遇見的未來低代碼會火爆的表現，並且會在生產中綻放光彩。"}]}]}]},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頭圖：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：IMWeb團隊"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：https:\/\/mp.weixin.qq.com\/s\/JEkX2mqxvq1-hCCX7btjcQ"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：2020年大前端技術趨勢解讀"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"來源：雲加社區 - 微信公衆號 [ID：QcloudCommunity]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"轉載：著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。"}]}]}