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