前端月趨勢(shì)榜：4 月最熱門(mén)的 20 個(gè)前端開(kāi)源項(xiàng)目

作者：貓哥 2021-05-06 09:23:10

貓哥每月給大家推薦一篇上個(gè)月的前端月趨勢(shì)榜的 20 大項(xiàng)目，方便大家知道最近都開(kāi)源了哪些好的前端項(xiàng)目，還有用到的主流前端技術(shù)棧又是哪些，以免錯(cuò)過(guò)了好的開(kāi)源項(xiàng)目。

GitHub 上面有個(gè) Trending 榜 (趨勢(shì)榜)，在 Trending 頁(yè)面，你可以看到最近一些熱門(mén)的開(kāi)源項(xiàng)目或者開(kāi)發(fā)者，這個(gè)頁(yè)面可以算是很多人主動(dòng)獲取一些開(kāi)源項(xiàng)目和活躍開(kāi)發(fā)者最好的途徑。

所以貓哥會(huì)在每周的周一給大家推薦一篇上周的 前端周趨勢(shì)榜的 10 大項(xiàng)目 ，每月給大家推薦一篇上個(gè)月的 前端月趨勢(shì)榜的 20 大項(xiàng)目 ，方便大家知道最近都開(kāi)源了哪些好的前端項(xiàng)目，還有用到的主流前端技術(shù)棧又是哪些，以免錯(cuò)過(guò)了好的開(kāi)源項(xiàng)目。

1. headless-ui

一組完全沒(méi)有樣式的，完全可訪問(wèn)的 UI 組件，旨在與 Tailwind CSS 完美集成。

https://github.com/tailwindlabs/headlessui

2. react-flow

React Flow 是一個(gè)用于構(gòu)建基于節(jié)點(diǎn)的圖的庫(kù)。您可以輕松實(shí)現(xiàn)自定義節(jié)點(diǎn)類型，并且它附帶一些組件，例如迷你地圖和圖形控件。隨意查看示例或閱讀博客文章以開(kāi)始使用。

https://github.com/wbkd/react-flow

3. Vite

Vite，一個(gè)基于瀏覽器原生 ES imports 的開(kāi)發(fā)服務(wù)器。

利用瀏覽器去解析 imports，在服務(wù)器端按需編譯返回，完全跳過(guò)了打包這個(gè)概念，服務(wù)器隨起隨用。

同時(shí)不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會(huì)隨著模塊增多而變慢。針對(duì)生產(chǎn)環(huán)境則可以把同一份代碼用 rollup 打。

雖然現(xiàn)在還比較粗糙，但這個(gè)方向我覺(jué)得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問(wèn)題。

Vite 具有以下特點(diǎn)：

快速的冷啟動(dòng)
即時(shí)熱模塊更新（HMR，Hot Module Replacement）
真正按需編譯

https://github.com/vitejs/vite

4. tailwindcss

一個(gè)實(shí)用程序優(yōu)先的 CSS 框架，用于快速構(gòu)建自定義用戶界面。

無(wú)需離開(kāi)您的 HTML，即可快速建立現(xiàn)代網(wǎng)站。

Tailwind CSS 是一個(gè)功能類優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標(biāo)記語(yǔ)言中組合起來(lái)，構(gòu)建出任何設(shè)計(jì)。

https://github.com/tailwindlabs/tailwindcss

5. tauri

Tauri 是用于為所有主要桌面平臺(tái)構(gòu)建超小型快速二進(jìn)制文件的框架。開(kāi)發(fā)人員可以集成可編譯為 HTML，JS 和 CSS 的任何前端框架，以構(gòu)建其用戶界面。該應(yīng)用程序的后端是帶有銹源的二進(jìn)制文件，帶有可與前端進(jìn)行交互的 API。

Tauri 應(yīng)用程序中的用戶界面目前 winit 在 macOS 和 Windows 上以及 gtk 在 Linux 上通過(guò) Tauri-team 培養(yǎng)并維護(hù)的 WRY 作為窗口處理庫(kù)加以利用，WRY 可以利用 macOS 上的 WebKit，Windows 和 Linux 上的 WebKitGTK。

https://github.com/tauri-apps/tauri

6. vscode

Visual Studio Code 是一個(gè)運(yùn)行于 OS X，Windows 和 Linux 之上的，針對(duì)于編寫(xiě)現(xiàn)代 Web 和云應(yīng)用的跨平臺(tái)編輯器。

也是當(dāng)今天前端最流行的編輯器！

https://github.com/microsoft/vscode

7. Vue.js

Vue.js 是一個(gè)漸進(jìn)式 JavaScript 框架，也是目前前端最流行的框架。

易用

已經(jīng)會(huì)了 HTML、CSS、JavaScript？即刻閱讀指南開(kāi)始構(gòu)建應(yīng)用！

靈活

不斷繁榮的生態(tài)系統(tǒng)，可以在一個(gè)庫(kù)和一套完整框架之間自如伸縮。

高效

20kB min+gzip 運(yùn)行大小
超快虛擬 DOM
最省心的優(yōu)化

https://github.com/vuejs/vue

8. React

一個(gè)聲明性，高效且靈活的 JavaScript 庫(kù)，用于構(gòu)建用戶界面。

聲明式

React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個(gè)狀態(tài)設(shè)計(jì)簡(jiǎn)潔的視圖，當(dāng)數(shù)據(jù)改變時(shí) React 能有效地更新并正確地渲染組件。

以聲明式編寫(xiě) UI，可以讓你的代碼更加可靠，且方便調(diào)試。

組件化

創(chuàng)建擁有各自狀態(tài)的組件，再由這些組件構(gòu)成更加復(fù)雜的 UI。

組件邏輯使用 JavaScript 編寫(xiě)而非模板，因此你可以輕松地在應(yīng)用中傳遞數(shù)據(jù)，并使得狀態(tài)與 DOM 分離。

一次學(xué)習(xí)，隨處編寫(xiě)

無(wú)論你現(xiàn)在正在使用什么技術(shù)棧，你都可以隨時(shí)引入 React 來(lái)開(kāi)發(fā)新特性，而不需要重寫(xiě)現(xiàn)有代碼。

React 還可以使用 Node 進(jìn)行服務(wù)器渲染，或使用 React Native 開(kāi)發(fā)原生移動(dòng)應(yīng)用。

https://github.com/facebook/react

9. prisma

Prisma 是包含以下工具的下一代 ORM：

Prisma Client：針對(duì)Node.js和TypeScript的自動(dòng)生成且類型安全的查詢生成器
Prisma Migrate：聲明性數(shù)據(jù)建模和遷移系統(tǒng)
Prisma Studio：用于查看和編輯數(shù)據(jù)庫(kù)中數(shù)據(jù)的GUI
Prisma Client 可以在任何 Node.js 或 TypeScript 后端應(yīng)用程序（包括無(wú)服務(wù)器應(yīng)用程序和微服務(wù)）中使用。這可以是 REST API，GraphQL API，gRPC API 或任何其他需要數(shù)據(jù)庫(kù)的東西。

https://github.com/prisma/prisma

10. next.js

這是一個(gè)用于生產(chǎn)環(huán)境的 React 框架。

Next.js 為您提供生產(chǎn)環(huán)境所需的所有功能以及最佳的開(kāi)發(fā)體驗(yàn)：包括靜態(tài)及服務(wù)器端融合渲染、支持 TypeScript、智能化打包、路由預(yù)取等功能無(wú)需任何配置。

https://github.com/vercel/next.js

11. three.js

官網(wǎng)對(duì) Threejs 的介紹非常簡(jiǎn)單：“Javascript 3D library”。openGL 是一個(gè)跨平臺(tái) 3D/2D 的繪圖標(biāo)準(zhǔn)，WebGL 則是 openGL 在瀏覽器上的一個(gè)實(shí)現(xiàn)。web 前端開(kāi)發(fā)人員可以直接用 WebGL 接口進(jìn)行編程，但 WebGL 只是非常基礎(chǔ)的繪圖 API，需要編程人員有很多的數(shù)學(xué)知識(shí)、繪圖知識(shí)才能完成 3D 編程任務(wù)，而且代碼量巨大。Threejs 對(duì) WebGL 進(jìn)行了封裝，讓前端開(kāi)發(fā)人員在不需要掌握很多數(shù)學(xué)知識(shí)和繪圖知識(shí)的情況下，也能夠輕松進(jìn)行 web 3D 開(kāi)發(fā)，降低了門(mén)檻，同時(shí)大大提升了效率。

https://github.com/mrdoob/three.js

12. tiptap

基于 ProseMirror 的無(wú)頭，與框架無(wú)關(guān)且可擴(kuò)展的 RTF 編輯器。

https://github.com/ueberdosis/tiptap

13. Cypress

Cypress 是為現(xiàn)代網(wǎng)絡(luò)而構(gòu)建的下一代前端測(cè)試工具，用于解決開(kāi)發(fā)者和 QA 工程師在測(cè)試現(xiàn)代應(yīng)用程序時(shí)面臨的關(guān)鍵難題。

Cypress 簡(jiǎn)化了設(shè)置測(cè)試、編寫(xiě)測(cè)試、運(yùn)行測(cè)試和調(diào)試測(cè)試，支持端到端測(cè)試、集成測(cè)試和單元測(cè)試，支持測(cè)試在瀏覽器中運(yùn)行的任意內(nèi)容。支持 Mac OS、Linux 和 Windows 平臺(tái)。

https://github.com/cypress-io/cypress

14. deno

一個(gè)安全的 JavaScript 和 TypeScript 運(yùn)行時(shí)。

出于多種原因，2020 年是非常特殊的一年。最重要的一個(gè)：5 年以來(lái)的第一次，新星的總冠軍不是 Vue.js，而是 Deno……真是令人驚訝！

Deno 是 Node.js 的創(chuàng)建者 Ryan Dahl 的 JavaScript 運(yùn)行時(shí)。

憑借 10 年的經(jīng)驗(yàn)和對(duì) Node.js 的迭代經(jīng)驗(yàn)，它通常被視為 Node.js 的續(xù)集，因?yàn)樗梢孕迯?fù)或改進(jìn)許多要點(diǎn)。

https://github.com/denoland/deno

15. react-use

必不可少的 React Hooks 集合. libreact 的端口

https://github.com/streamich/react-use

16. esbuild

它是一個(gè)「JavaScript」Bundler 打包和壓縮工具，它可以將「JavaScript」和「TypeScript」代碼打包分發(fā)在網(wǎng)頁(yè)上運(yùn)行。

esbuild 是一個(gè)用 Go 語(yǔ)言編寫(xiě)的用于打包，壓縮 Javascript 代碼的工具庫(kù)。

它最突出的特點(diǎn)就是打包速度極快（extremely fast），下圖是 esbuild 跟 webpack, rollup, Parcel 等打包工具打包效率的一個(gè) benchmark:

https://github.com/evanw/esbuild

17. nuxt.js

易于使用的 Vue 框架, 使用 NuxtJS 充滿信心地構(gòu)建您的下一個(gè) Vue.js 應(yīng)用程序。一個(gè) 開(kāi)源框架，讓 Web 開(kāi)發(fā)變得簡(jiǎn)單而強(qiáng)大。

https://github.com/nuxt/nuxt.js

18. ant-design

一套企業(yè)級(jí) UI 設(shè)計(jì)語(yǔ)言和 React 組件庫(kù)。

:sparkles: 特性

:rainbow: 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格。
:package: 開(kāi)箱即用的高質(zhì)量 React 組件。
使用 TypeScript 開(kāi)發(fā)，提供完整的類型定義文件。
⚙️ 全鏈路開(kāi)發(fā)和設(shè)計(jì)工具體系。
:earth_africa: 數(shù)十個(gè)國(guó)際化語(yǔ)言支持。
:art: 深入每個(gè)細(xì)節(jié)的主題定制能力。

https://github.com/ant-design/ant-design

19. storybook

Storybook 是 UI 組件的開(kāi)發(fā)環(huán)境，它允許開(kāi)發(fā)者瀏覽組件庫(kù)，查看每個(gè)組件的不同狀態(tài)，以及交互地開(kāi)發(fā)和測(cè)試組件。

Storybook 在 app 之外運(yùn)行，這允許開(kāi)發(fā)者獨(dú)立地開(kāi)發(fā) UI 組件，這可以提高組件的重用性、可測(cè)試性和開(kāi)發(fā)速度。所以可以快速構(gòu)建，而不必?fù)?dān)心應(yīng)用程序特定的依賴關(guān)系。

特點(diǎn)：