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