JavaScript 生態(tài)圈和技術(shù)趨勢(shì),這一年發(fā)生了這些變化 ...
今天,我來(lái)帶大家看看 2021 年 state-of-js 的調(diào)查結(jié)果:
速覽
下面是我挑出來(lái)的幾個(gè)比較重點(diǎn)的,我們先來(lái)速覽一下:
- 可選鏈操作符使用率已經(jīng)高達(dá) 85% 。
- 空值合并操作符( ?? )使用率提升了 21% 。
- 將近 50% 的受訪者在使用 Shadow DOM API 。
- esbuild 是滿意度調(diào)查中同比增長(zhǎng)最大的工具。
- Vite 97%26%
- 當(dāng)前有 5.6% 的受訪者正在使用 Deno 。
- 一些老牌 JS 庫(kù) Axios、Lodash 和 Moment 仍然是最受歡迎的。
- TypeScript JavaScript Elm
JS特性 - 語(yǔ)言
Proxy
Proxy 在各種框架和庫(kù)中使用的越來(lái)越多了(特別是 Vue.js 3.0 開(kāi)始使用后),所以了解到它的同學(xué)也越來(lái)越多,但是實(shí)際使用率沒(méi)有太大變化。
Promise.allSettled()
Promise.allSettled() 我還沒(méi)用過(guò),用法類似于 Promise.all ,區(qū)別是:它所有給定的 promise 不管是 fulfilled 還是 rejected 狀態(tài),只要全部返回后它就會(huì)返回。在你不關(guān)心所有的異步任務(wù)是不是都必須成功的時(shí)候可能會(huì)用到它。
Dynamic Import
動(dòng)態(tài)導(dǎo)入:只有 15% 的人還不知道它,接近 50% 的小伙伴都用過(guò)了,一般會(huì)在懶加載的時(shí)候用到。
Nullish Coalescing
空值合并運(yùn)算符:這玩意這么多人都在用嗎?用過(guò)的小伙伴可以在評(píng)論區(qū)說(shuō)一下,我平時(shí)用的比較多的還是 || 或者 && 。
空值合并操作符( ?? ),會(huì)在左側(cè)的操作數(shù)為 null 或者 undefined 時(shí),返回其右側(cè)操作數(shù),否則返回左側(cè)操作數(shù)。
和 || 的區(qū)別是, || 會(huì)在左側(cè)是 0 的時(shí)候也返回右側(cè),而 ?? 會(huì)返回 0 。
const baz = 0 ?? 42;
console.log(baz); // 0
const conard = 0 || 42;
console.log(conard); // 42
Optional Chaining
可選鏈:使用率已經(jīng)高達(dá) 85% ,非常實(shí)用的特性,不多說(shuō)了。
Private Fields
私有屬性:只有 20% 的人用過(guò),我們?cè)陬惱锩娑x的屬性或方法默認(rèn)情況下都是公有的,可以通過(guò)在前面加個(gè) # 來(lái)變成私有的(僅在類內(nèi)部可以訪問(wèn))。
class ClassWithPrivateField {
#privateField;
}
class ClassWithPrivateMethod {
#privateMethod() {
return 'hello ConardLi';
}
}
BigInt
BigInt 可以解決 Number 的精度丟失問(wèn)題,一般大于 2^53 的數(shù)我們建議用 BigInt 來(lái)表示,不過(guò)現(xiàn)在使用率還很低,大家通常還是用一些庫(kù)去處理數(shù)字。
String.prototype.replaceAll()
replaceAll :可以讓我們按照一個(gè)正則進(jìn)行更靈活的字符串替換,第一年參加調(diào)查, Chrome85 才開(kāi)始支持的函數(shù),已經(jīng)有這么多人用過(guò)了,真的是一個(gè)非常實(shí)用的函數(shù):
const regex = /ConardLi/ig;
console.log(p.replaceAll(regex, '棒!'));
JS特性 - 瀏覽器 API
Service Workers
Service Worker :一個(gè)服務(wù)器與瀏覽器之間的中間人角色,它可以攔截當(dāng)前網(wǎng)站所有的請(qǐng)求,我們可以在這中間做很多靈活的判斷和處理,只有 8% 的人不知道它了,使用率已經(jīng)高達(dá) 45% 。
Intl
Intl 瀏覽器給我們提供的一個(gè)原生的用來(lái)做國(guó)際化的 API ,國(guó)際化的需求一般比較復(fù)雜,反正我們國(guó)際化都是用庫(kù),省心很多,這個(gè)還沒(méi)用過(guò)。
Web Audio API
控制 Web 音頻的 API ,只有特定領(lǐng)域的開(kāi)發(fā)者才會(huì)用到,變化也不大。
WebGL
Web 圖形化的需求越來(lái)越復(fù)雜多樣, WebGL 的普及也不可避免。現(xiàn)在大多數(shù)人都有過(guò)了解,但是使用者還局限在特定領(lǐng)域,今年的增長(zhǎng)率已經(jīng)有了小的變化,相信未來(lái)會(huì)迎來(lái)一個(gè)爆發(fā)增長(zhǎng)~
Web Animations API
dom 上的 animate 函數(shù),就屬于 Web Animations API 中的一個(gè),我們?nèi)粘J褂?CSS 實(shí)現(xiàn)的一些動(dòng)畫,都可以借助它轉(zhuǎn)換成 JS 實(shí)現(xiàn):
document.getElementById("CoonardLi").animate(
[
{ transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
{ color: '#431236', offset: 0.3 },
], {
duration: 3000,
iterations: Infinity
}
);
這個(gè)應(yīng)該大家都有了解過(guò)吧,一般 XXX 網(wǎng)頁(yè)動(dòng)畫實(shí)戰(zhàn) 這樣的課程和文章都會(huì)提到,但是實(shí)際開(kāi)發(fā)中實(shí)現(xiàn)動(dòng)畫還是用 CSS 或者一些 JS 庫(kù)比較多一點(diǎn)。
WebRTC
WebRTC ( Web Real-Time Communications ) 是一項(xiàng)實(shí)時(shí)通訊技術(shù),可以在網(wǎng)絡(luò)應(yīng)用或者站點(diǎn),在不借助中間媒介的情況下,建立瀏覽器之間點(diǎn)對(duì)點(diǎn)的連接,實(shí)現(xiàn)視頻流和(或)音頻流或者其他任意數(shù)據(jù)的傳輸。
同樣,也是特定領(lǐng)域(如直播)會(huì)用到的 API ,使用者很局限。
Web Speech API
用于處于 Web 音頻的 API ,也是特定需求場(chǎng)景才會(huì)用到的 API,使用率很低,變化也不大。
Websocket
這個(gè)調(diào)查里使用率最高的 Web API 了,不用多說(shuō),只有 4% 不知道它是啥東西了 ...
Shadow DOM
Shadow DOM 是 Web Components 里面的一個(gè)重要 API:瀏覽器將模板、樣式表、屬性、 JavaScript 碼等,封裝成一個(gè)獨(dú)立的 DOM 元素。外部的設(shè)置無(wú)法影響到其內(nèi)部,而內(nèi)部的設(shè)置也不會(huì)影響到外部,與瀏覽器處理原生網(wǎng)頁(yè)元素(比如 <video> 元素)的方式很像。
Shadow DOM 最大的好處有兩個(gè),一是可以向用戶隱藏細(xì)節(jié),直接提供組件,二是可以封裝內(nèi)部樣式表,不會(huì)影響到外部。
// attachShadow() creates a shadow root.
let shadow = div.attachShadow({ mode: 'open' });
let inner = document.createElement('b');
inner.appendChild(document.createTextNode('Conard Li Hiding in the shadows'));
// shadow root supports the normal appendChild method.
shadow.appendChild(inner);
div.querySelector('b'); // empty
這個(gè)使用率已經(jīng)這么高了嗎?大家在開(kāi)發(fā)里有用到過(guò)嗎?
Page Visibility API
頁(yè)面可見(jiàn)性 API,可以幫助我們檢測(cè)當(dāng)前用戶是不是還在當(dāng)前頁(yè)面,當(dāng)網(wǎng)頁(yè)被最小化或者切換到其他 tab 的時(shí)候,會(huì)觸發(fā)一個(gè) visibilitychange 事件,我們就可以在這個(gè)時(shí)候去停掉一些耗時(shí)的操作來(lái)節(jié)省資源。
document.addEventListener(visibilityChange, handleVisibilityChange, false);
function handleVisibilityChange() {
if (document.hidden) {
// 頁(yè)面隱藏了
} else {
// 頁(yè)面又活躍了
}
}
一個(gè)挺好用的 API ,兼容性也不錯(cuò),大家可以用起來(lái)~
JS特性 - 其他技術(shù)
PWA
PWA 使用率今年漲幅挺大的,也是屬于一個(gè)比較成熟的技術(shù)了。
WebAssembly
WebAssembly 有 88% 的人都有了解過(guò),但是使用率只有 15% ,相比去年只增加了 5% ,它給 Web 開(kāi)發(fā)帶來(lái)了更多的可能性,相信未來(lái)會(huì)得到爆發(fā)式增長(zhǎng)。
JS 庫(kù)
滿意度
這張圖挺有意思的,按照 S、A、B、C 四個(gè)等級(jí)的滿意度,對(duì)比了前端框架、服務(wù)端框架、測(cè)試庫(kù)、構(gòu)建工具、移動(dòng)和桌面端技術(shù)、Monorepo 工具,下面我們來(lái)逐個(gè)部分看一下。
時(shí)間變化
紫色代表人氣下降,藍(lán)色代表人氣上升,向上代表用的人越來(lái)越多,向右代表有更多的人想學(xué)習(xí)它。
怎么看起來(lái)大家今年都不太想學(xué)東西了呢?哈哈,另外對(duì)一些新型的庫(kù)比如 Sevelte 學(xué)習(xí)欲望還是有增長(zhǎng)的。
前端框架
使用率
使用率今年整體都沒(méi)有太大變化, React 依然以 80% 的使用率 高居榜首,因?yàn)檎{(diào)查的老外比較多,所以 Angular 比 Vue.js 使用率還要高,不過(guò)前者已經(jīng)是下降趨勢(shì)了。另外 Svelte 的使用率在今年有了 5% 的增長(zhǎng)。
滿意率
Solid.js 是一匹黑馬,今年以 90% 的滿意率高居榜首,不過(guò)它的使用率只有 3% ,滿意度自然也就高一點(diǎn)。
React 的滿意度已經(jīng)連續(xù)三年下降,來(lái)到了第三位,不過(guò)在使用率這么高的情況下仍然有 84% 的滿意度,依然堅(jiān)挺!
Ember.js 應(yīng)該是崩了,使用率和滿意率都連續(xù)下降... 沒(méi)救了。
后端框架
使用率
幾乎沒(méi)變化 ... Express 依然占據(jù)霸主地位,今年新出來(lái)的框架不少,像 Remix 僅有 5% 的使用率。
不過(guò),有點(diǎn)震驚, Koa 去哪了?難倒只有中國(guó)人用嗎???
滿意率
新出來(lái)的框架更能滿足大家的痛點(diǎn),所以滿意度普遍較高, SvelteKit 以 96% 的滿意度高居榜首。
測(cè)試框架
Jest 仍然是最常用的測(cè)試框架, Testing Library 的使用率增長(zhǎng)不多,但是滿意度高達(dá) 96% 。
移動(dòng)端和客戶端
使用率
今年 Elctron 來(lái)到了使用率的第一位,不過(guò)仍然只有 36% 的人用過(guò)它,RN 是第二位,二者應(yīng)該就分別是桌面端和移動(dòng)端最常用的技術(shù)了。
滿意率
值得注意的是,今年新出的 Tauri 占據(jù)了榜首,不過(guò)它只有 3% 的使用率。
Tauri 是一個(gè) Electron 的替代技術(shù),主要用來(lái)解決 Electron 包體積和內(nèi)存消耗過(guò)大的問(wèn)題。
構(gòu)建工具
使用率
webpack 仍然是使用率最高的框架, tsc 依托于 TypeScript 的大火來(lái)到了第二位,并且還有 17% 的增長(zhǎng)。另外表現(xiàn)最為亮眼的還是 Vite ,第一年推出就有了 30% 的使用率。
滿意率
滿意度上今年出現(xiàn)了非常大的分歧, Snowpack 的滿意度下降了 24% ,相比 swc 的滿意度提升了 14% 。而 Vite 以恐怖的 98% 的滿意度來(lái)到第一位!。 Gulp 應(yīng)該是沒(méi)救了,使用率和滿意度都在持續(xù)降低。
Monorepo 工具
使用率
滿意度
Monorepo 今年第一次參加調(diào)查,表示這種開(kāi)發(fā)方式越來(lái)越普及了。但是使用率最高的 Lerna 依然只有 25% 、被吹上天的 pnpm 也只有 13% 的使用率。
其他
工具庫(kù)
jQuery 已經(jīng)跌到 11% 了嗎? Axios 為啥使用率還這么高,大家不用 Fetch 嗎?
JS 運(yùn)行時(shí)
Node.js 比 Browser 還高? Deno 擁有了 5.6 的使用率 ...
可以編譯成 JS 的語(yǔ)言
TypeScript 占據(jù)絕對(duì)霸主地位。
評(píng)估指標(biāo)
在評(píng)估是否使用一個(gè)庫(kù)時(shí),考慮最多的因素是什么?
文檔 > 開(kāi)發(fā)體驗(yàn) > 用戶體驗(yàn) > 用戶規(guī)模 > 社區(qū) > 開(kāi)發(fā)者和團(tuán)隊(duì)
對(duì) JS 的看法
JS 生態(tài)是不是變化的太快了
口口聲聲的喊,學(xué)不動(dòng)了的人都去哪了?為什么同意這個(gè)觀點(diǎn)的人越來(lái)越少了呢?
JS 的主要痛點(diǎn)
依賴管理 > 代碼架構(gòu) > 狀態(tài)管理 > 調(diào)試 > 日期管理 > 編寫模塊 > 查找包 > 異步
頒獎(jiǎng)
- 空值合并運(yùn)算符 ( ?? ) 使用率增長(zhǎng)了 21% 。
- esbuild 只有兩歲,使用率提升了 20% 。
- Vite 成為最受關(guān)注和滿意度最高的技術(shù)。
調(diào)查范圍
最后還得吐槽一下,和 state-of-css 一樣, state-of-js 的中國(guó)參與者仍然很少 ...