2017新出爐的前端資源匯總

02-14

這我關於現在一些前端工作流的資源列表，現在前端圈很亂，而我是激進派的。我認為這並不是壞事兒，前端是一種強迫人學習的領域。其實與其說前端，我覺得是Web技術吧，如何將資源連接在一起，其本質內涵，從技術的角度，可以包括基本Web，語義網，數據挖掘，技術破解博弈；從產品的角度又可以包括設計，用戶體驗，用戶習慣思維等等……要平衡人機交互、機機交互，談何容易。讓我們重溫 Atwoods Law:

Any software that can be written in JavaScript will eventually be written in JavaScript.

下面的項目都列出了github的星數和npmjs上最近一個月的下載數

例如 github 106.5k/stars npmjs 93.3k/lm 指有10萬6千個github星，上個月在npmjs有9萬3千次下載。每個項目都給出了官網地址，github地址，npmjs地址。

註：在一個自分類里按stars數量排序，一般老框架的stars很高，但是npmjs下載量很低，新框架stars不太高，npmjs下載量很高，請特別留意lodash的下載量和bootstrap的stars數～～

UI框架

Bootstrap 3.3.7

老牌UI框架庫，4.X遙遙無期，不過還是可以期待

官網github 106.5k/starsnpmjs 93.3k/lm

Semantic UI 2.2.7

語義化UI框架，比較奇怪的是使用16列系統而不是常見的12列，已經比較成熟

官網github 31.2k/starsnpmjs 17.3k/lm

Foundation 6.3.0

更老牌的UI框架庫

官網github 24.9k/starsnpmjs 55.2k/lm

Materialize 0.98.0

符合谷歌Material標準的UI框架，依賴jQuery，所以代碼風格比較傳統

官網github 24.4k/starsnpmjs 3.9k/lm

Material-UI 0.16.7

基於谷歌Material標準，基於React的UI框架庫，其實坑很大，開發代碼的模式和其他人畫風不一樣，可以參考作者自己的網站代碼風格

官網github 23k/starsnpmjs 215.7k/lm

應用框架

React 15.4.2

臉書出品，值得信賴

官網github 59.3k/starsnpmjs 3090.2k/lm

BackBoneJS 1.3.3

老牌的應用框架，然而Coursera原來用這個框架後來改React了

官網github 26k/starsnpmjs 612.2k/lm

Angular 1.6.2

這裡指Angular 2.x，谷歌出品，請隨時留意3.X版本更新信息

官網github 20.4k/starsnpmjs 744.6k/lm

CSS預處理器

Less 2.7.2

官網github 14.4k/starsnpmjs 2212.2k/lm

Sass 4.5.0

本質上是提供sass和scss兩種語法的，前者更接近py/ruby那樣的感覺，後者更接近原生css

這裡指node-sass

官網github 3.4k/starsnpmjs 3511.6k/lm

自動化工具

Gulp 3.9.1

自動化前端工作，你確定你不考慮嘗試下Webpack嗎？

官網github 25.1k/starsnpmjs 2869k/lm

Webpack 2.2.1

自動解析模塊依賴，方便的模塊打包工具，升級到2.X沒多久，文檔依然那麼爛

官網github 24k/starsnpmjs 4316.2k/lm

Yeoman 1.1.0

用來生成項目的項目，幫助用戶更快部署自定義項目。本質上生成的項目和github上的各種starter項目一樣，就是提供一些互動式問題能讓你生成這樣的starter項目方便用戶繼續開發與部署。

官網github 8.4k/starsnpmjs 356.8k/lm

圖標

Font Awesome 4.7.0

官網github 48.2k/starsnpmjs 646.4k/lm

Material Icon 3.0.1

官網github 27.9k/starsnpmjs 43.3k/lm

Fontello

官網github 4.9k/stars

Evil Icons 1.9.0

官網github 4.2k/starsnpmjs 3.2k/lm

常用網址

MDN

Mozilla開發者網路

網址

http://w3schools.com

網址

Can I use

很方便的工具，用來查詢你想使用的特性的平台支持程度

網址

Material Color

裡面有很多Material風格的顏色與配色

網址

其他

D3.js 4.5.0

功能非常豐富的數據可視化庫

官網github 60.1k/starsnpmjs 649.8k/lm

Moment.js 2.17.1

一個非常方便的日期/時間處理庫

官網github 29.8k/starsnpmjs 7300.8k/lm

Lodash 4.17.4

一個非常方便的函數式輔助庫，提供大量JavaScript原生沒有的功能，看我的下載量！看我的下載量！

官網github 21.4k/starsnpmjs 39995.9k/lm

Underscore.js 1.8.3

與Lodash類似的功能庫，傳說會和Lodash合併

官網github 20k/starsnpmjs 11226.5k/lm

Babel 6.22.1

代碼轉換器，讓你能用ES 2015去寫JavaScript代碼，然後自動將其轉換為瀏覽器能支持的兼容代碼

官網github 19.7k/starsnpmjs 6116.3k/lm

ESLint 3.15.0

代碼風格檢查工具

官網 github 6.8k/stars npmjs 5192k/lm

Flexbox Grid 6.3.1

一個很方便的格子排版庫，語法與Bootstrap類似，但是是使用CSS3的Flex特性實現的

官網github 5.2k/starsnpmjs 51.7k/lm

題圖 Designed by Freepik

文因互聯正在招聘前端開發工程師，請郵件聯繫 contact@memect.co