前端月趨勢(shì)榜:3 月最流行的 20 個(gè)前端開(kāi)源項(xiàng)目

清明雨后

相信很多人都沒(méi)有逛 GitHub 的習(xí)慣，因此總會(huì)有開(kāi)源信息的不對(duì)稱(chēng)，有哪些優(yōu)秀的前端開(kāi)源項(xiàng)目值得學(xué)習(xí)的也不知道。

從 2018 年開(kāi)始，我就養(yǎng)成了每天逛 GitHub 的習(xí)慣，一般在早上上班前或者中午午休的時(shí)候都會(huì)逛一下。

看看每天都開(kāi)源了哪些好的前端項(xiàng)目，還有用到的主流前端技術(shù)棧又是哪些，值得我去學(xué)習(xí)的。

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)目。

平時(shí)如何發(fā)現(xiàn)好的開(kāi)源項(xiàng)目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發(fā)現(xiàn)優(yōu)秀開(kāi)源項(xiàng)目

1. javascript-algorithms

該倉(cāng)庫(kù)包含了多種基于 JavaScript 的算法與數(shù)據(jù)結(jié)構(gòu)。

每種算法和數(shù)據(jù)結(jié)構(gòu)都有自己的 README，包含相關(guān)說(shuō)明和鏈接，以便進(jìn)一步閱讀 (還有 YouTube 視頻) 。

數(shù)據(jù)結(jié)構(gòu)包含了 鏈表、雙向鏈表、隊(duì)列、棧、哈希表(散列)、堆、優(yōu)先隊(duì)列、字典樹(shù)、樹(shù)、優(yōu)先隊(duì)列、二叉查找樹(shù)、AVL 樹(shù)、紅黑樹(shù)、線(xiàn)段樹(shù)、樹(shù)狀數(shù)組、圖、并查集、布隆過(guò)濾器

這項(xiàng)目還出了對(duì)應(yīng)的教學(xué)視頻，總共 81 個(gè)視頻講解，每個(gè)視頻大概 5 - 10分鐘左右，還能學(xué)習(xí)英語(yǔ)哦 ??

youtube 的教學(xué)視頻：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

我之前學(xué)習(xí)算法的時(shí)候，也在這個(gè)項(xiàng)目中收益良多呢！

而且這個(gè)項(xiàng)目還一直有維護(hù)和更新內(nèi)容哦！真的非常不錯(cuò)的一個(gè)項(xiàng)目！

https://github.com/trekhleb/javascript-algorithms

更多算法相關(guān)的項(xiàng)目推薦可以看看筆者之前的文章.

2. 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

3. 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

4. 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

5. Awesome

Awesome列出了各種有趣的話(huà)題。

平臺(tái)類(lèi)、編程語(yǔ)言、前端開(kāi)發(fā)、后端開(kāi)發(fā)、計(jì)算機(jī)科學(xué)、大數(shù)據(jù)、理論、圖書(shū)、編者、賭博、開(kāi)發(fā)環(huán)境、娛樂(lè)、資料庫(kù)、媒體、學(xué)、安全、內(nèi)容管理系統(tǒng)、硬件、商業(yè)、工作、聯(lián)網(wǎng)、分散系統(tǒng)、高等教育、大事記、測(cè)驗(yàn)、各種各樣的。

https://github.com/sindresorhus/awesome

6. 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

7. Front-End-Checklist

該項(xiàng)目是詳盡的關(guān)于前端開(kāi)發(fā)的清單，它列出了將 HTML 頁(yè)面投入生產(chǎn)之前需要進(jìn)行測(cè)試的所有元素。

它基于眾多前端開(kāi)發(fā)人員的多年經(jīng)驗(yàn)，其中一部分整合自其他的開(kāi)源清單。

內(nèi)容包含：

• Head
• HTML
• Webfonts
• CSS
• Images
• JavaScript
• Security
• Performance
• Accessibility
• SEO

https://github.com/thedaviddias/Front-End-Checklist

8. React

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

聲明式

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

React 相關(guān)的項(xiàng)目可以看: 一個(gè) React 技術(shù)揭秘的項(xiàng)目，自頂向下的 React 源碼分析。

9. material-ui

快速構(gòu)建漂亮的 React 應(yīng)用程序。

Material-UI 是一個(gè)簡(jiǎn)單且可自定義的組件庫(kù)，用于構(gòu)建更快，更美觀(guān)，更易于訪(fǎng)問(wèn)的 React 應(yīng)用程序。遵循您自己的設(shè)計(jì)系統(tǒng)，或從材料設(shè)計(jì)開(kāi)始。

https://github.com/mui-org/material-ui

10. tailwindcss

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

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

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

https://github.com/tailwindlabs/tailwindcss

11. edex-ui

一個(gè)跨平臺(tái)，可定制的科幻小說(shuō)終端模擬器，具有先進(jìn)的監(jiān)控和觸摸屏支持。

它深受 DEX-UI 和 TRON Legacy 電影效果的啟發(fā)，是一個(gè)類(lèi)似于科幻電腦界面的全屏桌面應(yīng)用程序。

提供了可視化動(dòng)態(tài)監(jiān)測(cè)系統(tǒng)性能的圖表、資源列表、觸屏鍵盤(pán)等等，使其看起來(lái)非常高端大氣上檔次，另外還完美的支持終端操作，并且支持 Window、macOS、Linux 系統(tǒng)。

作為從小就喜歡黑科技的貓哥來(lái)說(shuō)，已經(jīng)按耐不住要裝 X 啦！

詳情可以看看下方鏈接:

https://github.com/GitSquared/edex-ui

12. You-Dont-Know-JS

該項(xiàng)目為 YDNJS(You Don’t Know JS) 圖書(shū)系列，包含一系列深入探討 JavaScript 語(yǔ)言核心機(jī)制的書(shū)籍。

內(nèi)容大綱

• 入門(mén)與進(jìn)階
• 作用域與閉包
• this 與對(duì)象原型
• 類(lèi)型與文法
• 異步與性能
• ES6 與未來(lái)

https://github.com/getify/You-Dont-Know-JS

13. 33-js-concepts

JavaScript開(kāi)發(fā)者應(yīng)懂的 33 個(gè)概念

這個(gè)項(xiàng)目是為了幫助開(kāi)發(fā)者掌握 JavaScript 概念而創(chuàng)立的。它不是必備，但在未來(lái)學(xué)習(xí)（JavaScript）中，可以作為一篇指南。

目錄

調(diào)用堆棧
原始類(lèi)型
值類(lèi)型和引用類(lèi)型
隱式,?顯式,?名義和鴨子類(lèi)型
==?與?===,?typeof?與?instanceof
this,?call,?apply?和?bind
函數(shù)作用域,?塊級(jí)作用域和詞法作用域
閉包
map,?reduce,?filter?等高階函數(shù)
表達(dá)式和語(yǔ)句
變量提升
Promise
立即執(zhí)行函數(shù),?模塊化,?命名空間
遞歸
算法
數(shù)據(jù)結(jié)構(gòu)
消息隊(duì)列和事件循環(huán)
setTimeout,?setInterval?和?requestAnimationFrame
繼承,?多態(tài)和代碼復(fù)用
按位操作符,?類(lèi)數(shù)組對(duì)象和類(lèi)型化數(shù)組
DOM?樹(shù)和渲染過(guò)程
new?與構(gòu)造函數(shù),?instanceof?與實(shí)例
原型繼承與原型鏈
Object.create?和?Object.assign
工廠(chǎng)函數(shù)和類(lèi)
設(shè)計(jì)模式
Memoization
純函數(shù),?函數(shù)副作用和狀態(tài)變化
耗性能操作和時(shí)間復(fù)雜度
JavaScript?引擎
二進(jìn)制,?十進(jìn)制,?十六進(jìn)制,?科學(xué)記數(shù)法
偏函數(shù),?柯里化,?Compose?和?Pipe
代碼整潔之道

而且每個(gè)主題都包含了相關(guān)的精彩文章和視頻，非常適合學(xué)習(xí)。

https://github.com/leonardomso/33-js-concepts

14. 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

15. clean-code-javascript

優(yōu)秀的 JS 代碼規(guī)范。

比如：對(duì)相同類(lèi)型的變量使用相同的關(guān)鍵字

Bad：

getUserInfo();?
getClientData();?
getCustomerRecord();

Good：

getUser();

再比如：使用可搜索的命名

在開(kāi)發(fā)過(guò)程中，我們閱讀代碼的時(shí)間會(huì)遠(yuǎn)遠(yuǎn)超過(guò)編寫(xiě)代碼的時(shí)間，因此保證代碼的可讀性與可搜索會(huì)非常重要。切記，沒(méi)事不要坑自己。

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 是一個(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

17. nodebestpractices

Node.js 最佳實(shí)踐。

這個(gè)項(xiàng)目是對(duì) Node.js 最佳實(shí)踐中排名最高的內(nèi)容的總結(jié)和分享。

這里是最大的匯集，且每周都在增長(zhǎng) - 當(dāng)前，超過(guò) 50 個(gè)最佳實(shí)現(xiàn)，樣式指南，架構(gòu)建議已經(jīng)呈現(xiàn)。

目錄

• 項(xiàng)目結(jié)構(gòu)實(shí)踐 (5)
• 異常處理實(shí)踐 (11)
• 編碼規(guī)范實(shí)踐 (12)
• 測(cè)試和總體質(zhì)量實(shí)踐 (8)
• 進(jìn)入生產(chǎn)實(shí)踐 (16)
• 新: 安全實(shí)踐(23)
• Performance Practices (coming soon)

比如 錯(cuò)誤處理最佳實(shí)踐 中 使用 Async-Await 和 promises 用于異步錯(cuò)誤處理

TL;DR: 使用回調(diào)的方式處理異步錯(cuò)誤可能是導(dǎo)致災(zāi)難的最快的方式(a.k.a the pyramid of doom)。對(duì)您的代碼來(lái)說(shuō)，最好的禮物就是使用規(guī)范的 promise 庫(kù)或 async-await 來(lái)替代，這會(huì)使其像 try-catch 一樣更加簡(jiǎn)潔，具有熟悉的代碼結(jié)構(gòu)。

否則: Node.js 回調(diào)特性, function(err, response), 是導(dǎo)致不可維護(hù)代碼的一個(gè)必然的方式。究其原因，是由于混合了隨意的錯(cuò)誤處理代碼，臃腫的內(nèi)嵌，蹩腳的代碼模式。

https://github.com/goldbergyoni/nodebestpractices

18. ant-design

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

? 特性

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

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

19. 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

20. strapi

strapi 是一個(gè)先進(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等）、移動(dòng)應(yīng)用，甚至是物聯(lián)網(wǎng)。

• 強(qiáng)大的 CLI：腳手架項(xiàng)目和 API 不停機(jī)操作 。

• SQL & NoSQL 數(shù)據(jù)庫(kù)：使用 Mongo 作為主數(shù)據(jù)庫(kù)，同時(shí)支持 Postgres、MySQL 等。

https://github.com/strapi/strapi

最后

好了，3 月的前端月趨勢(shì)榜中最熱門(mén)的 20 大前端開(kāi)源項(xiàng)目就是上面那些了。

這個(gè)世界發(fā)展的真相就是馬太效應(yīng)，強(qiáng)者越強(qiáng)，弱者越弱。

開(kāi)源項(xiàng)目也符合上面的規(guī)律，好的開(kāi)源項(xiàng)目， Star 數(shù)會(huì)越來(lái)越多，會(huì)得到很多外力的推廣(比如H5-Dooring)，并且是呈現(xiàn)出指數(shù)型增長(zhǎng)的。

初級(jí)前端與高級(jí)前端之間，很大原因就是投入學(xué)習(xí)前端的時(shí)間、經(jīng)驗(yàn)的差別，其實(shí)就是信息差。

如果有一個(gè)地方能又快又好的獲得這些優(yōu)質(zhì)的前端信息，那么將會(huì)大大縮短從初級(jí)到高級(jí)的時(shí)間。

筆者最近在趣談前端的實(shí)戰(zhàn)訓(xùn)練營(yíng)中也準(zhǔn)備了幾個(gè)有意思且實(shí)用的前端項(xiàng)目, 大家可以學(xué)習(xí)研究一下:

我會(huì)定期同步一些可視化實(shí)踐方面的最新進(jìn)展.