以下內(nèi)容來(lái)自公眾號(hào)逆鋒起筆,關(guān)注每日干貨及時(shí)送達(dá)
出品 | OSC開(kāi)源社區(qū)(ID:oschina2013)本文介紹的項(xiàng)目是 JavaScript Rising Stars 對(duì) JavaScript 領(lǐng)域的 2021 年度總結(jié),參考的指標(biāo)是各個(gè)項(xiàng)目在 GitHub 上于過(guò)去 12 個(gè)月新增的 star 數(shù)量。
最受歡迎項(xiàng)目
前端框架
Node.js 框架
構(gòu)建工具
Vue 生態(tài)圈
React 生態(tài)圈
CSS in JavaScript
測(cè)試框架
移動(dòng)開(kāi)發(fā)
桌面開(kāi)發(fā)
靜態(tài)網(wǎng)站生成器
狀態(tài)管理
GraphQL
zx
Vite
Next.js
React
Tauri
Tailwind CSS
VS Code
Slidev
NocoDB
Vue.js
年度流行項(xiàng)目是 zx,一個(gè)由谷歌推出的全新的工具,可用于以 JavaScript 或 TypeScript 編寫(xiě)簡(jiǎn)單的命令行腳本。基本上它可以讓你在代碼中嵌入任何 bash 表達(dá)式(ls,?cat,?git...等任何命令!),并?await?使用?JavaScript 模板字符串的結(jié)果。它引入了由幾個(gè)流行的軟件包提供的實(shí)用工具:node-fetch?與瀏覽器中?fetch?有著相同的 API, 可創(chuàng)建 HTTP 請(qǐng)求。
fs-extra?可處理文件系統(tǒng)操作。
globby?以用戶(hù)友好模式來(lái)匹配給定的文件名。
其次,Vite 是一個(gè)使用 esbuild 編譯器的,有著優(yōu)秀性能的構(gòu)建工具。出生時(shí),它僅與 Vue.js 社區(qū)相連,但現(xiàn)在它為主流的 UI 框架都提供了支持:React、Svelte、Lit。排在第三位的 Next.js 依舊保持了其在 React 世界中 “元框架” 的領(lǐng)先地位。第五名,Tauri 是一個(gè)使用 Web 技術(shù)構(gòu)建桌面應(yīng)用程序的解決方案。與 Electron 相比,它是用 Rust 編寫(xiě)的,而且它不在每一個(gè)應(yīng)用程序中搭載 Node.js 運(yùn)行時(shí)。1.0 測(cè)試版剛于 5 月發(fā)布的。它沒(méi)有進(jìn)入前十名,但 Astro 是今年最值得注意的項(xiàng)目之一。Astro 是一個(gè)加載速度更快的建站工具,因?yàn)樗褂幂^少的 JavaScript。它的概念接近于靜態(tài)網(wǎng)站生成(SSG),但關(guān)鍵的區(qū)別在于,Astro 可以讓你在網(wǎng)頁(yè)中引入被稱(chēng)為 “島嶼” 的動(dòng)態(tài)互動(dòng)部分。在客戶(hù)端渲染動(dòng)態(tài)組件時(shí)可應(yīng)用不同的策略:最厲害的部分之一是 Astro 頁(yè)面可以用任何框架編寫(xiě)的 HTML 和組件組合來(lái)構(gòu)建。React、Vue.js 或 Svelte...React
Vue.js
Svelte
Angular
Solid
自我們開(kāi)展 JavaScript Rising Stars 活動(dòng)以來(lái),React 首次成為頭號(hào) UI 框架,但如果我們考慮到 Vue.js 被分成了兩個(gè)倉(cāng)庫(kù)(第二和第三版本),實(shí)際上 Vue.js 才是第一名。最大的變化是 Svelte 的崛起,它超越 Angular 占據(jù)第三位。越來(lái)越多的工具或組件將 Svelte 納入目標(biāo)框架中(例如我們提到的 Vite)。今年的主要頭條新聞之一是,Svelte 的創(chuàng)造者 Rich Harris 正在加入 Next.js 背后的 Vercel 團(tuán)隊(duì)。與 Next.js 一樣,Svelte 也有自己的元框架來(lái)構(gòu)建高性能的應(yīng)用程序:SvelteKit。微信搜索readdot,關(guān)注后回復(fù)視頻教程獲取23種精品資料第五名的 Solid 是 React 的一個(gè)有趣的替代品。組件是用 JSX 編寫(xiě)的,但它不像 React 那樣依賴(lài)虛擬 DOM。它也啟發(fā)了 Mitosis,一個(gè)針對(duì)任何框架編寫(xiě)和編譯組件的工具:React, Vue.js, Angular, Svelte...
Next.js
Nest
Strapi
Remix
Nuxt
主要的 UI 框架都有自己的 “元框架” 來(lái)構(gòu)建現(xiàn)代和可擴(kuò)展的應(yīng)用程序,提供諸如路由、服務(wù)器端渲染、提前靜態(tài)生成頁(yè)面、為生產(chǎn)優(yōu)化構(gòu)建...等功能。Remix,一個(gè)構(gòu)建 React 應(yīng)用的全棧框架,是這個(gè)類(lèi)別中的新秀。它也是今年最大的故事之一。它是由 React Router 的作者創(chuàng)建的,在 10 月之前,它只對(duì)付費(fèi)支持者開(kāi)放。該項(xiàng)目自公開(kāi)以來(lái)得到了很多助力(以及 300 萬(wàn)美元的種子資金,這也有幫助!)。它的座右銘很明確:“Web 基礎(chǔ),現(xiàn)代用戶(hù)體驗(yàn)”,因?yàn)樗?API 盡可能遵循 web 標(biāo)準(zhǔn)(HTTP響應(yīng),表單提交...)。要處理表單提交,你可以...只做正常的表單提交。這似乎是顯而易見(jiàn)的,但開(kāi)發(fā)人員更習(xí)慣于寫(xiě)?event.preventDefault()?來(lái)避免表單提交。最重要的是,即使 JavaScript 被禁用,表單也能正常工作。Remix 挑戰(zhàn)了我們認(rèn)為理所當(dāng)然的行為,用注重用戶(hù)和開(kāi)發(fā)者體驗(yàn)的新方法 "remixing" 舊原則,這真是太有趣了。此外,它還以一種非常聰明的方式處理嵌套路由,能夠以一種有效的方式加載一個(gè)給定頁(yè)面上所有組件所需的數(shù)據(jù),而不是產(chǎn)生瀑布式的 HTTP 調(diào)用,而這往往會(huì)導(dǎo)致屏幕上出現(xiàn)大量的旋轉(zhuǎn)指標(biāo)。除了這些元框架,在第二位的 Nest 是更傳統(tǒng)的服務(wù)器端 Node.js 框架的領(lǐng)導(dǎo)者,不與任何 UI 庫(kù)相聯(lián)系。最后在第三位的 Strapi 是 “Headless CMS” 的領(lǐng)導(dǎo)者,就是那些提供豐富的儀表盤(pán)讓用戶(hù)管理數(shù)據(jù)和現(xiàn)代 API 讓開(kāi)發(fā)者從數(shù)據(jù)中建立任何東西的應(yīng)用程序。最新版本提供了一個(gè)建立在 React 組件庫(kù)之上的設(shè)計(jì)系統(tǒng)。Vite
esbuild
swc
Turborepo
Nx
在 2021 年,早已存在的趨勢(shì)更進(jìn)一步。對(duì)原生 ES 模塊的接納仍在繼續(xù)。Vite已經(jīng)被廣泛采用(比 snowpack 更快),引領(lǐng)了一個(gè)新的工具生態(tài)系統(tǒng)(如Vitest,一個(gè)基于 ES 的現(xiàn)代測(cè)試框架)。ES 模塊也在 Node.js 生態(tài)系統(tǒng)中逐漸被接納,但這并不容易。TypeScript 甚至在 Node.js 中推遲了對(duì) ES 模塊的支持。出于對(duì)性能的考慮,越來(lái)越多的前端工具開(kāi)始用其他語(yǔ)言構(gòu)建的(見(jiàn) awesome-js-tooling-not-in-js)。Lee Robinson 寫(xiě)道,Rust 是 JavaScript 基礎(chǔ)設(shè)施的未來(lái)。Rust 特別有趣,因?yàn)樗扔泻芎玫男阅埽峙c JavaScript 有互操作性。NAPI-RS允許 JavaScript 和 Rust 在沒(méi)有任何序列化成本的情況下相互通信。Next.js 正押注 SWC,這是一個(gè)可擴(kuò)展的 Rust 編譯器,允許他們將最流行的 Babel 插件移植到 Rust。Parcel2 已經(jīng)發(fā)布了一個(gè)新的 Rust 編譯器。Rome 工具鏈也正在用 Rust 重寫(xiě),但其創(chuàng)始人之一Jamie Kyle 剛悄無(wú)聲息地離開(kāi)了公司。Rust 顯然是領(lǐng)先的非 JS 語(yǔ)言,但它并不是唯一提供出色性能的語(yǔ)言。Bun 是用 Zig 寫(xiě)的。Turborepo 和 esbuild 是用 Go 寫(xiě)的。值得注意的是,Evan Wallace ?離開(kāi)了 Figma:這可能讓他有更多的時(shí)間來(lái)研究 esbuild。在 monorepo 領(lǐng)域,Lerna 仍然被廣泛使用,但維護(hù)得不是很好。Nx,一個(gè)有助于大幅減少構(gòu)建時(shí)間的單引擎工具,一直在快速增長(zhǎng)。其較新的競(jìng)爭(zhēng)者Turborepo 在被 Vercel 收購(gòu)后受益于巨大的營(yíng)銷(xiāo)。Slidev
Vue Element Admin
Headless UI
Naive UI
vue-next
在 Vue 3 正式發(fā)布一年后,我們看到這個(gè)生態(tài)系統(tǒng)正伴隨著許多偉大的創(chuàng)新迅速發(fā)展。