前端月趨勢榜：3 月最流行的 20 個前端開源項目 - 0403
大家好，我是你們的 貓哥，那個不喜歡吃魚、又不喜歡喵 的超級貓 ~
相信很多人都沒有逛 GitHub 的習(xí)慣，因此總會有開源信息的不對稱，有哪些優(yōu)秀的前端開源項目值得學(xué)習(xí)的也不知道。
從 2018 年開始，我就養(yǎng)成了每天逛 GitHub 的習(xí)慣，一般在早上上班前或者中午午休的時候都會逛一下。
看看每天都開源了哪些好的前端項目，還有用到的主流前端技術(shù)棧又是哪些，值得我去學(xué)習(xí)的。
GitHub 上面有個 Trending 榜 (趨勢榜)，在 Trending 頁面，你可以看到最近一些熱門的開源項目或者開發(fā)者，這個頁面可以算是很多人主動獲取一些開源項目和活躍開發(fā)者最好的途徑。
所以貓哥會在每周的周一給大家推薦一篇上周的 前端周趨勢榜的 10 大項目，每月給大家推薦一篇上個月的 前端月趨勢榜的 20 大項目，方便大家知道最近都開源了哪些好的前端項目，還有用到的主流前端技術(shù)棧又是哪些，以免錯過了好的開源項目。
平時如何發(fā)現(xiàn)好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發(fā)現(xiàn)優(yōu)秀開源項目
1. javascript-algorithms
該倉庫包含了多種基于 JavaScript 的算法與數(shù)據(jù)結(jié)構(gòu)。
每種算法和數(shù)據(jù)結(jié)構(gòu)都有自己的 README，包含相關(guān)說明和鏈接，以便進(jìn)一步閱讀 (還有 YouTube 視頻) 。
數(shù)據(jù)結(jié)構(gòu)包含了 鏈表、雙向鏈表、隊列、棧、哈希表(散列)、堆、優(yōu)先隊列、字典樹、樹、優(yōu)先隊列、二叉查找樹、AVL 樹、紅黑樹、線段樹、樹狀數(shù)組、圖、并查集、布隆過濾器
這項目還出了對應(yīng)的教學(xué)視頻，總共 81 個視頻講解，每個視頻大概 5 - 10分鐘左右，還能學(xué)習(xí)英語哦 ??
youtube 的教學(xué)視頻：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8
貓哥之前學(xué)習(xí)算法的時候，也在這個項目中收益良多呢！
而且這個項目還一直有維護(hù)和更新內(nèi)容哦！真的非常不錯的一個項目！
https://github.com/trekhleb/javascript-algorithms
更多算法相關(guān)的項目推薦可以看看這篇文章：7 個 GitHub 上超火的前端學(xué)習(xí)的數(shù)據(jù)結(jié)構(gòu)與算法項目
2. Vite
Vite，一個基于瀏覽器原生 ES imports 的開發(fā)服務(wù)器。
利用瀏覽器去解析 imports，在服務(wù)器端按需編譯返回，完全跳過了打包這個概念，服務(wù)器隨起隨用。
同時不僅有 Vue 文件支持，還搞定了熱更新，而且熱更新的速度不會隨著模塊增多而變慢。針對生產(chǎn)環(huán)境則可以把同一份代碼用 rollup 打。
雖然現(xiàn)在還比較粗糙，但這個方向我覺得是有潛力的，做得好可以徹底解決改一行代碼等半天熱更新的問題。
Vite 具有以下特點(diǎn)：
快速的冷啟動 即時熱模塊更新（HMR，Hot Module Replacement） 真正按需編譯
https://github.com/vitejs/vite
3. esbuild
它是一個「JavaScript」Bundler 打包和壓縮工具，它可以將「JavaScript」和「TypeScript」代碼打包分發(fā)在網(wǎng)頁上運(yùn)行。
esbuild 是一個用 Go 語言編寫的用于打包，壓縮 Javascript 代碼的工具庫。
它最突出的特點(diǎn)就是打包速度極快 （extremely fast），下圖是 esbuild 跟 webpack, rollup, Parcel 等打包工具打包效率的一個 benchmark:
https://github.com/evanw/esbuild
4. vscode
Visual Studio Code 是一個運(yùn)行于 OS X，Windows 和 Linux 之上的，針對于編寫現(xiàn)代 Web 和云應(yīng)用的跨平臺編輯器。
也是當(dāng)今天前端最流行的編輯器！
https://github.com/microsoft/vscode
5. Awesome
Awesome列出了各種有趣的話題。
平臺類、編程語言、前端開發(fā)、后端開發(fā)、計算機(jī)科學(xué)、大數(shù)據(jù)、理論、圖書、編者、賭博、開發(fā)環(huán)境、娛樂、資料庫、媒體、學(xué)、安全、內(nèi)容管理系統(tǒng)、硬件、商業(yè)、工作、聯(lián)網(wǎng)、分散系統(tǒng)、高等教育、大事記、測驗(yàn)、各種各樣的。
https://github.com/sindresorhus/awesome
6. next.js
這是一個用于 生產(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
7. Front-End-Checklist
該項目是詳盡的關(guān)于前端開發(fā)的清單，它列出了將 HTML 頁面投入生產(chǎn)之前需要進(jìn)行測試的所有元素。
它基于眾多前端開發(fā)人員的多年經(jīng)驗(yàn)，其中一部分整合自其他的開源清單。
內(nèi)容包含：
Head HTML Webfonts CSS Images JavaScript Security Performance Accessibility SEO
https://github.com/thedaviddias/Front-End-Checklist
8. React
一個聲明性，高效且靈活的 JavaScript 庫，用于構(gòu)建用戶界面。
聲明式
React 使創(chuàng)建交互式 UI 變得輕而易舉。為你應(yīng)用的每一個狀態(tài)設(shè)計簡潔的視圖，當(dāng)數(shù)據(jù)改變時 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ù)棧，你都可以隨時引入 React 來開發(fā)新特性，而不需要重寫現(xiàn)有代碼。
React 還可以使用 Node 進(jìn)行服務(wù)器渲染，或使用 React Native 開發(fā)原生移動應(yīng)用。
https://github.com/facebook/react
React 相關(guān)的項目可以看: 一個 React 技術(shù)揭秘的項目，自頂向下的 React 源碼分析。
9. material-ui
快速構(gòu)建漂亮的 React 應(yīng)用程序。
Material-UI 是一個簡單且可自定義的組件庫，用于構(gòu)建更快，更美觀，更易于訪問的 React 應(yīng)用程序。遵循您自己的設(shè)計系統(tǒng)，或從材料設(shè)計開始。
https://github.com/mui-org/material-ui
10. tailwindcss
一個實(shí)用程序優(yōu)先的 CSS 框架，用于快速構(gòu)建自定義用戶界面。
無需離開您的 HTML，即可快速建立現(xiàn)代網(wǎng)站。
Tailwind CSS 是一個功能類優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標(biāo)記語言中組合起來，構(gòu)建出任何設(shè)計。
https://github.com/tailwindlabs/tailwindcss
11. edex-ui
一個跨平臺，可定制的科幻小說終端模擬器，具有先進(jìn)的監(jiān)控和觸摸屏支持。
它深受 DEX-UI 和 TRON Legacy 電影效果的啟發(fā)，是一個類似于科幻電腦界面的全屏桌面應(yīng)用程序。
提供了可視化動態(tài)監(jiān)測系統(tǒng)性能的圖表、資源列表、觸屏鍵盤等等，使其看起來非常高端大氣上檔次，另外還完美的支持終端操作，并且支持 Window、macOS、Linux 系統(tǒng)。
作為從小就喜歡黑科技的貓哥來說，已經(jīng)按耐不住要裝 X 啦！
詳情可以看看: 適用 Win、Mac、Linux，酷炫的極客界面 eDEX-UI
https://github.com/GitSquared/edex-ui
12. You-Dont-Know-JS
該項目為 YDNJS(You Don’t Know JS) 圖書系列，包含一系列深入探討 JavaScript 語言核心機(jī)制的書籍。
內(nèi)容大綱
入門與進(jìn)階 作用域與閉包 this 與對象原型 類型與文法 異步與性能 ES6 與未來
https://github.com/getify/You-Dont-Know-JS
13. 33-js-concepts
JavaScript開發(fā)者應(yīng)懂的 33 個概念
這個項目是為了幫助開發(fā)者掌握 JavaScript 概念而創(chuàng)立的。它不是必備，但在未來學(xué)習(xí)（JavaScript）中，可以作為一篇指南。
目錄
調(diào)用堆棧
原始類型
值類型和引用類型
隱式, 顯式, 名義和鴨子類型
== 與 ===, typeof 與 instanceof
this, call, apply 和 bind
函數(shù)作用域, 塊級作用域和詞法作用域
閉包
map, reduce, filter 等高階函數(shù)
表達(dá)式和語句
變量提升
Promise
立即執(zhí)行函數(shù), 模塊化, 命名空間
遞歸
算法
數(shù)據(jù)結(jié)構(gòu)
消息隊列和事件循環(huán)
setTimeout, setInterval 和 requestAnimationFrame
繼承, 多態(tài)和代碼復(fù)用
按位操作符, 類數(shù)組對象和類型化數(shù)組
DOM 樹和渲染過程
new 與構(gòu)造函數(shù), instanceof 與實(shí)例
原型繼承與原型鏈
Object.create 和 Object.assign
工廠函數(shù)和類
設(shè)計模式
Memoization
純函數(shù), 函數(shù)副作用和狀態(tài)變化
耗性能操作和時間復(fù)雜度
JavaScript 引擎
二進(jìn)制, 十進(jìn)制, 十六進(jìn)制, 科學(xué)記數(shù)法
偏函數(shù), 柯里化, Compose 和 Pipe
代碼整潔之道
而且每個主題都包含了相關(guān)的精彩文章和視頻，非常適合學(xué)習(xí)。
https://github.com/leonardomso/33-js-concepts
14. three.js
官網(wǎng)對 Threejs 的介紹非常簡單：“Javascript 3D library”。openGL 是一個跨平臺 3D/2D 的繪圖標(biāo)準(zhǔn)，WebGL 則是 openGL 在瀏覽器上的一個實(shí)現(xiàn)。web 前端開發(fā)人員可以直接用 WebGL 接口進(jìn)行編程，但 WebGL 只是非?；A(chǔ)的繪圖 API，需要編程人員有很多的數(shù)學(xué)知識、繪圖知識才能完成 3D 編程任務(wù)，而且代碼量巨大。Threejs 對 WebGL 進(jìn)行了封裝，讓前端開發(fā)人員在不需要掌握很多數(shù)學(xué)知識和繪圖知識的情況下，也能夠輕松進(jìn)行 web 3D 開發(fā)，降低了門檻，同時大大提升了效率。
https://github.com/mrdoob/three.js
15. clean-code-javascript
優(yōu)秀的 JS 代碼規(guī)范。
比如：對相同類型的變量使用相同的關(guān)鍵字
Bad：
getUserInfo();
getClientData();
getCustomerRecord();
Good：
getUser();
再比如：使用可搜索的命名
在開發(fā)過程中，我們閱讀代碼的時間會遠(yuǎn)遠(yuǎn)超過編寫代碼的時間，因此保證代碼的可讀性與可搜索會非常重要。切記，沒事不要坑自己。
Bad:
//525600到底啥意思？
for (var i = 0; i < 525600; i++) {
runCronJob();
}
Good:
// 聲明為全局變量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
runCronJob();
}
https://github.com/ryanmcdermott/clean-code-javascript
16. Vue.js
Vue.js 是一個漸進(jìn)式 JavaScript 框架，也是目前前端最流行的框架。
易用
已經(jīng)會了 HTML、CSS、JavaScript？即刻閱讀指南開始構(gòu)建應(yīng)用！
靈活
不斷繁榮的生態(tài)系統(tǒng)，可以在一個庫和一套完整框架之間自如伸縮。
高效
20kB min+gzip 運(yùn)行大小 超快虛擬 DOM 最省心的優(yōu)化
https://github.com/vuejs/vue
Vue 相關(guān)的項目可以看看：推薦 7 個 Vue2、Vue3 源碼解密分析的開源項目 和 Vue3 的學(xué)習(xí)教程匯總、源碼解釋項目、支持的 UI 組件庫、優(yōu)質(zhì)實(shí)戰(zhàn)項目 ，你會找到 Vue 的學(xué)習(xí)寶藏庫。
17. nodebestpractices
Node.js 最佳實(shí)踐。
這個項目是對 Node.js 最佳實(shí)踐中排名最高的內(nèi)容的總結(jié)和分享。
這里是最大的匯集，且每周都在增長 - 當(dāng)前，超過 50 個最佳實(shí)現(xiàn)，樣式指南，架構(gòu)建議已經(jīng)呈現(xiàn)。
目錄
項目結(jié)構(gòu)實(shí)踐 (5) 異常處理實(shí)踐 (11) 編碼規(guī)范實(shí)踐 (12) 測試和總體質(zhì)量實(shí)踐 (8) 進(jìn)入生產(chǎn)實(shí)踐 (16) 新: 安全實(shí)踐(23) Performance Practices (coming soon)
比如 錯誤處理最佳實(shí)踐 中 使用 Async-Await 和 promises 用于異步錯誤處理
TL;DR: 使用回調(diào)的方式處理異步錯誤可能是導(dǎo)致災(zāi)難的最快的方式(a.k.a the pyramid of doom)。對您的代碼來說，最好的禮物就是使用規(guī)范的 promise 庫或 async-await 來替代，這會使其像 try-catch 一樣更加簡潔，具有熟悉的代碼結(jié)構(gòu)。
否則: Node.js 回調(diào)特性, function(err, response), 是導(dǎo)致不可維護(hù)代碼的一個必然的方式。究其原因，是由于混合了隨意的錯誤處理代碼，臃腫的內(nèi)嵌，蹩腳的代碼模式。
https://github.com/goldbergyoni/nodebestpractices
18. ant-design
一套企業(yè)級 UI 設(shè)計語言和 React 組件庫。
? 特性
?? 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格。 ?? 開箱即用的高質(zhì)量 React 組件。 ?? 使用 TypeScript 開發(fā)，提供完整的類型定義文件。 ?? 全鏈路開發(fā)和設(shè)計工具體系。 ?? 數(shù)十個國際化語言支持。 ?? 深入每個細(xì)節(jié)的主題定制能力。
https://github.com/ant-design/ant-design
19. next.js
這是一個用于 生產(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
20. strapi
strapi 是一個先進(jìn)的 Node.js 內(nèi)容管理框架（headless-CMS），可以毫不費(fèi)力地構(gòu)建強(qiáng)大的 API 。
功能特性
現(xiàn)代化管理面板：優(yōu)雅、完全可定制、完全可擴(kuò)展的管理面板。
默認(rèn)安全：可重用策略、CSRF、CORS、P3P、Xframe、XSS 等等。
插件化：可在幾秒鐘內(nèi)安裝身份驗(yàn)證系統(tǒng)、內(nèi)容管理、自定義插件等等。
極速：基于 Node.js，Strapi 表現(xiàn)驚人。
前端不可知論者（Front-end Agnostic）: 可使用任何前端框架（React、Vue、Angular等）、移動應(yīng)用，甚至是物聯(lián)網(wǎng)。
強(qiáng)大的 CLI：腳手架項目和 API 不停機(jī)操作 。
SQL & NoSQL 數(shù)據(jù)庫：使用 Mongo 作為主數(shù)據(jù)庫，同時支持 Postgres、MySQL 等。
https://github.com/strapi/strapi
最后
好了，3 月的前端月趨勢榜中最熱門的 20 大前端開源項目就是上面那些了。
大家發(fā)現(xiàn)了沒有，上面的項目中的很多個，貓哥都已經(jīng)推薦過了的。
這個世界發(fā)展的真相就是馬太效應(yīng)，強(qiáng)者越強(qiáng)，弱者越弱。
開源項目也符合上面的規(guī)律，好的開源項目， Star 數(shù)會越來越多，會得到很多外力的推廣(比如貓哥的推薦)，并且是呈現(xiàn)出指數(shù)型增長的。
初級前端與高級前端之間，很大原因就是投入學(xué)習(xí)前端的時間、經(jīng)驗(yàn)的差別，其實(shí)就是信息差。
如果有一個地方能又快又好的獲得這些優(yōu)質(zhì)的前端信息，那么將會大大縮短從初級到高級的時間。
基于這個初衷，于是就誕生了 前端GitHub，能幫助前端開發(fā)人員節(jié)省時間的公眾號！
前端GitHub 專注于挖掘 GitHub 上優(yōu)秀的前端開源項目，并以專題的形式推薦，每專題大概 10 個好項目，每周會有一到三篇精華文章推送。
往期精文請看下方寶藏倉庫，請慎入！
https://github.com/FrontEndGitHub/FrontEndGitHub
微信搜 “前端GitHub”，回復(fù) “電子書” 即可以獲得下面 300 本技術(shù)精華書籍哦，貓哥 wx：CB834301747 。
往期精文
不知不覺，原創(chuàng)文章已經(jīng)寫到第 36 期了呢，幾乎每一篇都是貓哥精心挑選的優(yōu)質(zhì)開源項目，推送的每一篇文章里面的項目幾乎都是對前端開發(fā)很有幫助的。
原創(chuàng)不易，一篇優(yōu)質(zhì)的文章都是要肝幾個晚上才能肝出來的，花費(fèi)很多時間、精力去篩選和寫推薦理由，大佬們看完文章后，順手來個一鍵三連吧，就當(dāng)給貓哥一點(diǎn)鼓勵吧。