前端月趨勢榜：6 月又增加了很多熱門項目呀 - 20 個前端開源項目 - 2106
大家好，我是你們的 貓哥，那個不喜歡吃魚、又不喜歡喵 的超級貓 ~
GitHub 上面有個 Trending 榜 (趨勢榜)，在 Trending 頁面，你可以看到最近一些熱門的開源項目或者開發(fā)者，這個頁面可以算是很多人主動獲取一些開源項目和活躍開發(fā)者最好的途徑。
所以貓哥會在每周的周一給大家推薦一篇上周的 前端周趨勢榜的 10 大項目，每月給大家推薦一篇上個月的 前端月趨勢榜的 20 大項目，方便大家知道最近都開源了哪些好的前端項目，還有用到的主流前端技術(shù)棧又是哪些，以免錯過了好的開源項目。
平時如何發(fā)現(xiàn)好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發(fā)現(xiàn)優(yōu)秀開源項目
1. nocodb
NocoDB 是 Airtable 的開源替代方案，可以“一鍵”將 MySQL、PostgreSQL、SQL Server、SQLite 和 MariaDB 轉(zhuǎn)換為智能電子表格，提供了豐富的電子表格界面，支持搜索、排序、過濾、隱藏列等功能。
https://github.com/nocodb/nocodb
2. prisma
Prisma 是包含以下工具的下一代 ORM：
Prisma Client：針對Node.js和TypeScript的自動生成且類型安全的查詢生成器 Prisma Migrate：聲明性數(shù)據(jù)建模和遷移系統(tǒng) Prisma Studio：用于查看和編輯數(shù)據(jù)庫中數(shù)據(jù)的GUI Prisma Client 可以在任何 Node.js 或 TypeScript 后端應用程序（包括無服務器應用程序和微服務）中使用。這可以是 REST API，GraphQL API，gRPC API 或任何其他需要數(shù)據(jù)庫的東西。
https://github.com/prisma/prisma
3. n8n
n8n 是一款開源的自動工作流服務，類似 IFTTT、Zapier，可以互聯(lián)互通包括 GitHub、Dropbox、Google、NextCLoud、RSS、Slack、Telegram 在內(nèi)的幾十款在線服務。實現(xiàn)當 A 條件發(fā)生，觸發(fā) B 服務這樣的自動工作流程。
https://github.com/n8n-io/n8n
4. electron
electron 是一個使用 JavaScript、HTML 和 CSS 構(gòu)建跨平臺的桌面應用程序。
它基于 Node.js 和 Chromium，被 Atom 編輯器和許多其他應用程序使用。
https://github.com/electron/electron
5. next.js
這是一個用于 生產(chǎn)環(huán)境的 React 框架。
Next.js 為您提供生產(chǎn)環(huán)境所需的所有功能以及最佳的開發(fā)體驗：包括靜態(tài)及服務器端融合渲染、 支持 TypeScript、智能化打包、 路由預取等功能 無需任何配置。
https://github.com/vercel/next.js
6. tailwindcss
一個實用程序優(yōu)先的 CSS 框架，用于快速構(gòu)建自定義用戶界面。
無需離開您的 HTML，即可快速建立現(xiàn)代網(wǎng)站。
Tailwind CSS 是一個功能類優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標記語言中組合起來，構(gòu)建出任何設計。
https://github.com/tailwindlabs/tailwindcss
7. React
一個聲明性，高效且靈活的 JavaScript 庫，用于構(gòu)建用戶界面。
聲明式
React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應用的每一個狀態(tài)設計簡潔的視圖，當數(shù)據(jù)改變時 React 能有效地更新并正確地渲染組件。
以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調(diào)試。
組件化
創(chuàng)建擁有各自狀態(tài)的組件，再由這些組件構(gòu)成更加復雜的 UI。
組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應用中傳遞數(shù)據(jù)，并使得狀態(tài)與 DOM 分離。
一次學習，隨處編寫
無論你現(xiàn)在正在使用什么技術(shù)棧，你都可以隨時引入 React 來開發(fā)新特性，而不需要重寫現(xiàn)有代碼。
React 還可以使用 Node 進行服務器渲染，或使用 React Native 開發(fā)原生移動應用。
https://github.com/facebook/react
React 相關的項目可以看: 一個 React 技術(shù)揭秘的項目，自頂向下的 React 源碼分析。
8. Vite
Vite，一個基于瀏覽器原生 ES imports 的開發(fā)服務器。
利用瀏覽器去解析 imports，在服務器端按需編譯返回，完全跳過了打包這個概念，服務器隨起隨用。
同時不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會隨著模塊增多而變慢。針對生產(chǎn)環(huán)境則可以把同一份代碼用 rollup 打。
雖然現(xiàn)在還比較粗糙，但這個方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。
Vite 具有以下特點：
快速的冷啟動 即時熱模塊更新（HMR，Hot Module Replacement） 真正按需編譯
https://github.com/vitejs/vite
9. graphql-engine
Hasura GraphQL Engine 是一個超快的 GraphQL 服務器，可以讓你基于 Postgres 數(shù)據(jù)庫快速簡歷 GraphQL API 服務。通過數(shù)據(jù)庫事件實現(xiàn) webhook triggers ，其 remote schemas 用于構(gòu)建業(yè)務邏輯。
https://github.com/hasura/graphql-engine
10. vscode
Visual Studio Code 是一個運行于 OS X，Windows 和 Linux 之上的，針對于編寫現(xiàn)代 Web 和云應用的跨平臺編輯器。
也是當今天前端最流行的編輯器！
https://github.com/microsoft/vscode
11. zx
zx 是一個更方便、更友好幫助開發(fā)者寫腳本的工具。
Bash 很好，但是在編寫腳本的時候，人們通常會選擇一種更方便的編程語言，JavaScript 就是一個很完美的選擇。但是標準的 Node.js 庫在使用之前需要許多額外的操作，比如安裝、引入庫等，zx 提供一個包裝器 child_process，用于轉(zhuǎn)義參數(shù)并提供合并的默認值。
#!/usr/bin/env zx
await $`cat package.json | grep name`
let branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`
await Promise.all([
$`sleep 1; echo 1`,
$`sleep 2; echo 2`,
$`sleep 3; echo 3`,
])
let name = 'foo bar'
await $`mkdir /tmp/${name}`
https://github.com/google/zx
12. animate.css
Animate.css 是一個有趣的，跨瀏覽器的 css3 動畫庫，內(nèi)置了很多典型的 css3 動畫，兼容性好使用方便。
https://github.com/animate-css/animate.css
13. bootstrap
Bootstrap 是快速開發(fā) Web 應用程序的前端工具包。它是一個 CSS，HTML 和 JS 的集合，它使用了最新的瀏覽器技術(shù)，給你的 Web 開發(fā)提供了時尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。
https://github.com/twbs/bootstrap
14. Vue.js
Vue.js 是一個漸進式 JavaScript 框架，也是目前前端最流行的框架。
易用
已經(jīng)會了 HTML、CSS、JavaScript？即刻閱讀指南開始構(gòu)建應用！
靈活
不斷繁榮的生態(tài)系統(tǒng)，可以在一個庫和一套完整框架之間自如伸縮。
高效
20kB min+gzip 運行大小 超快虛擬 DOM 最省心的優(yōu)化
https://github.com/vuejs/vue
Vue 相關的項目可以看看：推薦 7 個 Vue2、Vue3 源碼解密分析的開源項目 和 Vue3 的學習教程匯總、源碼解釋項目、支持的 UI 組件庫、優(yōu)質(zhì)實戰(zhàn)項目 ，你會找到 Vue 的學習寶藏庫。
15. playwright
Node.js 庫可通過單個 API 自動化 Chromium，F(xiàn)irefox 和 WebKit。
Playwright 由 Microsoft 創(chuàng)建，是一個開放源代碼瀏覽器自動化框架，使 JavaScript 工程師可以在 Chromium，Webkit 和 Firefox 瀏覽器上測試其 Web 應用程序。
https://github.com/microsoft/playwright
16. docz
docz 強大簡單的文檔管理工具
使用 docz 我們可以用來方便的編寫以及發(fā)布文檔，同時提供漂亮友好的交互，可以快速的制作一個產(chǎn)品級的站點，使用了 mdx 文件（還是markdown），同時可以方便的集成到自己的 web 項目中。
https://github.com/pedronauck/docz
17. docusaurus
Docusaurus 幫你快速構(gòu)建并優(yōu)化網(wǎng)站，讓你專注于創(chuàng)作內(nèi)容。
https://github.com/facebook/docusaurus
18. TypeScript
為 JavaScript 提供靜態(tài)類型安全性的 JavaScript 的超集。
贏得了轉(zhuǎn)譯者與競爭對手 Flow 的戰(zhàn)斗，幾乎成為前端和后端開發(fā)的標準。
DefinitelyTyped 項目為 7000 多個軟件包提供了其他類型！
https://github.com/microsoft/TypeScript
更多學習資料請看 推薦 7 個學習 TypeScript 的寶庫。
19. ant-design
一套企業(yè)級 UI 設計語言和 React 組件庫。
? 特性
?? 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風格。 ?? 開箱即用的高質(zhì)量 React 組件。 ?? 使用 TypeScript 開發(fā)，提供完整的類型定義文件。 ?? 全鏈路開發(fā)和設計工具體系。 ?? 數(shù)十個國際化語言支持。 ?? 深入每個細節(jié)的主題定制能力。
https://github.com/ant-design/ant-design
20. react-use
必不可少的 React Hooks 集合. libreact 的端口
https://github.com/streamich/react-use
最后
好了，6 月的前端月趨勢榜中最熱門的 20 大前端開源項目就是上面那些了。
大家發(fā)現(xiàn)了沒有，上面的項目中的很多個，貓哥都已經(jīng)推薦過了的。
這個世界發(fā)展的真相就是馬太效應，強者越強，弱者越弱。
開源項目也符合上面的規(guī)律，好的開源項目， Star 數(shù)會越來越多，會得到很多外力的推廣(比如貓哥的推薦)，并且是呈現(xiàn)出指數(shù)型增長的。
往期精文請看下方寶藏倉庫，請慎入！
https://github.com/FrontEndGitHub/FrontEndGitHub
往期精文
微信搜索 前端GitHub，回復 電子書 就送你 1000+ 本精華編程電子書；回復 1024 送你一套完整的 前端 視頻教程，絕對免費，無套路獲取。。
不知不覺，原創(chuàng)文章已經(jīng)寫到第 49 期了呢，幾乎每一篇都是貓哥精心挑選的優(yōu)質(zhì)開源項目，推送的每一篇文章里面的項目幾乎都是對前端開發(fā)很有幫助的。
更新并運營大半年不易，大佬們看完文章后順手點個贊或者轉(zhuǎn)發(fā)吧，就當給貓哥一點鼓勵吧，謝謝。
貓哥周六帶無人機去大觀濕地公園玩了一圈，做了個有意思的視頻，分享給大家看看，預告一下，視頻里，貓哥有真人出鏡哦 ??