2020年大前端技術趨勢解讀

Lead

如今的前端早已不再拘泥于滿足頁面展示,而是開始延展到通過全棧來閉環產品。這表明前端已經有能力透過業務深入產業,繼而影響商業結果。這種表象的改變背后是本質的轉變,從更為宏觀的角度來說,前端正在通過持續的技術革新和技術融合不斷突破自身邊界,進而重新定義自身價值。

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

回顧今年的技術趨勢

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

開源站點bestofjs.org收錄了Github上1500個開源項目,并且還基于?GithubTrending API?的公開數據,更新統計這些項目的Stars新增趨勢。基于Bestofjs去年的2019年JavaScript明星項目(https://risingstars.js.org/2019/zh)報告和近一年Trending排行數據,下面展示了Top30的前端重點項目,并對此進行簡單的介紹。

相比于去年,學習資源越來越豐富了,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年度趨勢

1、TypeScript爆發增長

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

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

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

數據來源:stateofjs2019

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

數據來源:StackOverflow Survey Result 2020

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

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

2、三大框架React當先

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

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

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

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

1

React

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

2

Vue.js

2020年Vue.js的重大變化無疑是Vue.js3.0 的發布,有了非常多新特性,總結如下:

對Vue.js進行了完全Typescript重構,讓Vue.js源碼易于閱讀、開發和維護;

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

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

3

Angular

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

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

Angularv11 在繼v10棄用IE9、10和IEmobile 支持后,將其完全刪除;

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

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

3、WASM展露頭角

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

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

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

短短幾年的時間里,WebAssembly取得了長足的進展。

Ability

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

Producer

目前大約有15種編程語言可以以穩定的、面向生產的方式編譯到WebAssembly。其中包括:.Net,AssemblyScript,C,Haskell,Rust和Zig等,還有更多的正在開發中。

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在音視頻以及其他過去前端無法觸及的領域的可行性實踐。

4、Low-Code恰逢其時

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

區分一下no-codelow-codepro-code

no-code:自己編程給自己用,給用戶的感覺就是一個軟件。因此,平臺不會給自己定位成一個“編程工具”。主要是通過圖形化的操作來降低學習曲線,類似PPT、Excel等。在垂直領域的特定場景中,才能做到好用。

low-code:編程給其他人用,通過降低專業難度,讓運營人員(CitizenDeveloper)也參與進來。平臺評估好預制的場景和需求,減少從頭寫代碼的成本,一定程度上可以通過圖形化的方式滿足業務訴求。

pro-code:日常軟件開發過程中的手寫代碼,可以通過邏輯和模塊復用來進行提效。

區分了概念之后,還需要考慮面向的用戶。不同的用戶對應著不同的解決方案。用戶大致分為三類:前端開發人員、后臺開發人員、產品運營人員。

為什么要做低代碼?

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

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

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

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

雖然是low-code的設計方案,但還是希望輸出的代碼是可以進行二次開發的,因此最好能pro-codelow-code互相轉換。編程產物分為初級產物、中間產物和最終產物。產物的豐富程度,直接決定了平臺的可復用性和靈活性。無論是基于低代碼開發和源碼的混合開發,還是基于低代碼平臺的二次開發,都是low-code平臺需要考慮的事情。

運行時能力也非常重要,對開發者來說是一個強大的編輯器引擎,可以方便快速接入各類組件和中間件。而對于運營人員(CitizenDeveloper)來說同樣也很重要,針對不同的產品和業務場景,需要定制基礎業務模版和和業務配置,方便他們快速地進行差異化的功能設計。

協作能力和數據分析能力就不言自明了。低代碼平臺的核心就是降低對專業性的要求因此,使用者無論是誰,都應該有更高的效率提升。而數據統計和分析是所有平臺都應該具備的基礎能力,這里就不詳細描述了。

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

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

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

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

我們的目標是通過Hulk實現對80%日常業務頁面的“0代碼”搭建通過Node.js統一管理數據接口,可以通過圖形化配置,快速創建接口,組合不同數據源的數據;支持多組件靈活配置生成頁面的能力,擴展組件庫,開發常用組件;復雜頁面和接口邏輯支持低代碼擴展。

Low-Code領域的發展在2020年極其迅猛。從最早的通過模塊化搭建解決營銷活動領域的問題發展到現在可以通過 low-code來解決內部復雜的中后臺業務需求,既適用于面向C側用戶的產品運營,也貼合B側用戶的數據管理需求。

5、全棧開發持續深耕

DevOpsNoOps的路徑之一,便是目前大家都在嘗試的Serverless自從2012年有了Serverless的概念開始,至今已經8個年頭了。近年來隨著國內的云廠商,如騰訊云、阿里云、華為云對Serverless的支持,并且伴隨著小程序云開發的普及,國內的開發者對Serverless的使用已經非常熟悉了。

今年9月CodingSans 聯合其9個合作伙伴,發布了Serverless2020 年度狀態報告。調查結果顯示:有75%的開發者會在公司使用這項技術。如此高的Yes也基本反映出了這樣的技術已經被大眾普遍接受并使用。

我們可以看到開發者選擇應用Serverless的場景有很多,比如:為小程序、Web、Mobile提供基礎性的API服務,大規模批處理任務處理,Web站點、DevOps的工具以及GraphQLAPI能力。

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

與其說Serverless是一項技術,不如說Serverless是一種理想的工作模式,是一種專注于業務價值的思考單純的通過函數進行業務交付,而不再需要關心解決業務問題之外的事情,比如:那些非常繁瑣的基礎設施。托管服務可以讓開發者更專注于編寫業務函數,從而減少對機器資源、降低運維成本的考慮,可以讓開發者更專注的為產品和用戶創造價值。隨著云廠商對于Serverless的支持,后續會有越來越多的開發者,可以體會到云時代給大家帶來的便利。

IMWeb團隊開始Serverless的實踐也非常早。隨著騰訊云的發展,在2019年就已經將SCF落地在業務中了。而2020年為了提升 SCF的開發體驗,又完成了開發體驗的全面升級,可以10分鐘內完成一個云函數的上線

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

6、DevOps漸進增強

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

在2020的DevOpsSurvey 中,DevOps帶來的正面影響獲得了99%的認可度:

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

IMWeb在DevOps實踐是基于業務上云,在云原生的基礎上完成的。其中包括:

  • Node服務上容器平臺STKE(基于K8s定制)

  • CDN對接騰訊云COS平臺

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

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

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

對于DevOps各流程的把控和規范,IMWeb團隊自研Thanos研發效能平臺,幫助在線教育部所有前后端團隊業務完成DevOps轉型:

7、WebRTC持續升溫

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

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

WebRTC有個特別宏偉的愿景:可以在瀏覽器上快速開發出各種音視頻應用。但這早已不再僅僅是愿景,而是已經在逐步成為現實。

? ?

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

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

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

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

在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技術的相關實踐。

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

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

精選前端好文,伴你不斷成長

我是若川歡迎關注!可點擊

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/276346.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/276346.shtml
英文地址,請注明出處:http://en.pswp.cn/news/276346.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HTML默認樣式表CSS屬性

轉載鏈接:http://www.xiao-a.com/index.php/archives/440.html 開始的時候 *{margin:0;padding:0;},當需要使用邊距的時候,就需要還原HTML默認CSS值了。以前一直在找這份 文檔,今天偶然在w3上看到了。除了inline和block的定義&…

第六集 MSF構思階段項目團隊的組建

第六集 MSF構思階段項目團隊的組建__Note轉載于:https://www.cnblogs.com/zencorn/archive/2009/10/18/1585495.html

lc濾波器是利用電感的感抗_你對LC諧振電路你都了解嗎

根據在電路中電感器L和電容C的連接方式不同,可以有兩種LC諧振電路,LC并聯諧振電路和LC串聯諧振電路。LC并聯、串聯諧振電路在應用中的變化較多,是電路中分析的一個難點,只有掌握LC并聯、串聯電路的阻抗特性等基本概念,…

給小程序再減重 30% 的秘密?(京喜小程序首頁瘦身實踐)

前言—在 web 開發場景,減少代碼體積雖然是性能優化的一個方向,還沒到錙銖必較的程度。但是在小程序場景,由于代碼包上傳階段限制了主包 2M 和總包 16M(近期微信官方正在內測將總包上限調整至 20M )的尺寸,…

rfc mail content-type

轉載鏈接:http://www.w3.org/Protocols/rfc1341/0_TableOfContents.html RFC 郵件正文類型列表: Note: this is a hypertext versionof RFC1341 which has been obsoletedby RFC1521, of which no hypertextversion currently exists. Text …

Coolite Toolkit入門指南

Coolite Toolkit 簡介 Coolite Toolkit 是一個支持ASP.NET AJAX的Web控件Coolite Toolkit是基于跨瀏覽器的ExtJS 庫開發而來的,并且簡化了開發步驟,包含有豐富的Ajax運用Coolite Toolkit和ExtJS 都是開源的可能通過SVN直接獲取Coolite 的代碼簡單的說,就…

本周ASP.NET英文技術文章推薦[10/21 – 10/27]

這一篇是《本周ASP.NET英文技術文章推薦》系列的第一篇,在這個系列中,我將介紹5-10篇比較有價值的、本周發布的、與ASP.NET相關的英文技術文章,幫助各位朋友從良莠不齊的大量文章中挑出一些我認為非常有價值閱讀的,在進行一段簡要…

vim 離線安裝_VIM學習筆記 插件列表(Plugin)

由于zhihu的垃圾編輯器不支持表格,請查看以下完整格式:http://yyq123.github.io/learn-vim/learn-vim-plugin.html說明:本列表完全基于作者的主觀體驗,既不客觀也不完整;建議使用vim-plug或Vundle等插件管理器&#xf…

3 年前端面經和他在創業公司的成長歷程

在掘金上當了幾年的伸手黨,最近也準備輸出一些自己的東西。關于我首先介紹一下我自己,17 年畢業于一所 211 學校,但是由于大學四年馳騁在召喚師峽谷,畢業時也沒有找到一份大廠的工作,隨便找了一家創業公司簽了三方就去…

Spring.NET學習筆記9——打造簡易的依賴注入框架(練習篇) Level 100

我們在第三篇中學習里一個簡易的IoC框架。今天我們接著上次的程序,實現帶參數構造函數對象的實例和屬性的注入 。  我們知道可以通過反射獲取類的構造函數及參數(GetConstructors方法);可以獲取屬性和屬性的類型(GetProperties方法)。通過Activator的C…

PHP 利用Mail_MimeDecode類提取郵件正文

參考鏈接:http://blog.csdn.net/dmtnewtons_blog/article/details/18765289 rfc mail content-type: 參考鏈接:http://blog.csdn.net/dmtnewtons_blog/article/details/19327105 根據主流的郵件解析類Mail_MimeDecode,提取郵件正…

android 單元測試

首先AndroidManifest.xml View Code <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"package"com.travelsky.test" android:versionCode"1"androi…

申萬一級行業日指數_基金收評 | 指數震蕩走弱,軍工股成兩市主線!后期行情如何?...

收評君復盤日記(2020年9月21日)三大指數集體收跌&#xff0c;北向資金全天大幅凈流出近65億元&#xff0c;軍工板塊表現強勢。盤面回顧9月21日&#xff0c;兩市全天高開低走&#xff0c;早盤指數弱勢震蕩&#xff0c;三大指數盤中一度翻紅&#xff0c;但隨后震蕩走弱&#xff0…

若川的2016年度總結,畢業工作

可以點擊上方的標簽若川的故事、年度總結&#xff0c;查看往期文章有讀者反饋說看我年度總結系列比我源碼系列更有啟發。所以打算把2016-2018的年度總結發布到公眾號聲明原創&#xff0c;希望對大家有所啟發。&#xff08;雖然我的每一年都過得非常普通...&#xff09;以下是正…

jQuery之Ajax

轉載鏈接&#xff1a;http://cargoj.iteye.com/blog/1008047 1 . jQuery幫助之Ajax請求&#xff08;一&#xff09;jQuery.ajax(options) 2 . jQuery幫助之Ajax請求&#xff08;二&#xff09;jQuery.get(url,[data],[callback] 3 . jQuery幫助之Ajax請求&#xff08;三&am…

深入淺出之正則表達式(二)

深入淺出之正則表達式&#xff08;二&#xff09; http://dragon.cnblogs.com/archive/2006/05/09/394923.html 前言&#xff1a; 本文是前一片文章《深入淺出之正則表達式&#xff08;一&#xff09;》的續篇&#xff0c;在本文中講述了正則表達式中的組與向后引用&…

MVC(溫習深入)

MVC&#xff08;Model-View-Controller&#xff0c;模型—視圖—控制器模式&#xff09;是軟件工程中的一種軟件架構模式。它把軟件系統分為三個基本部分&#xff1a;模型&#xff08;Model&#xff09;&#xff0c;視圖&#xff08;View&#xff09;和控制器&#xff08;Contr…

面試官問:能否模擬實現JS的new操作符(高頻考點)

可以點擊上方的話題JS基礎系列&#xff0c;查看往期文章這篇文章寫于2018年11月05日&#xff0c;new模擬實現&#xff0c;Object.create是面試高頻考點&#xff0c;之前發布在掘金有近2萬人閱讀&#xff0c;現在發布到公眾號聲明原創。1. 前言這是面試官問系列的第一篇&#xf…

Linux環境下設置IPDNSGateway

轉載鏈接&#xff1a;http://www.myhack58.com/Article/sort099/sort0102/2011/29291.htm 在Linux中不管你是做服務器還是只是平常使用&#xff0c;上網肯定都是最重要和不可缺少的一個因素之一&#xff0c;所以就涉及到它的ip gateway dns等network配置和使用。但是設置Linux…

跟我一起學WCF(2)——利用.NET Remoting技術開發分布式應用

一、引言 上一篇博文分享了消息隊列&#xff08;MSMQ&#xff09;技術來實現分布式應用&#xff0c;在這篇博文繼續分享下.NET平臺下另一種分布式技術——.NET Remoting。 二、.NET Remoting 介紹 2.1 .NET Remoting簡介 .NET REmoting與MSMQ不同&#xff0c;它不支持離線可得&…