Github前端項目排名(2016-04-04)
1、前言
近幾年前端技術突飛猛進，從 RequireJS 到 AngularJS 再到 React，彷佛天天都有新的技術誕生。而大神們總能第一時間獲取到最新資訊，在咱們還在刀耕火種的年代就使用上各類高新技術，甚是膜拜。javascript
爲了遇上時代的腳步，加上昨天閒着蛋痛。。。就打算去 Github 研究一波，看看你們都在幹什麼。萬一找到一個潛力股項目在萌芽階段，而後我就去讀懂它的源代碼，努力成爲項目主要貢獻者，等星星上來以後，不就成爲又一個大牛了嗎！(想一想就好...)。因而項目按星星排序，一個個研究。。。忽然發現這樣子太笨了，不如寫個爬蟲把全部信息都捉取過來弄個排行榜吧。正計劃中又發現這個網站Github Rank，上面寫着 by Github API v3。原來有 Github 有開放 api 的，還tm寫爬蟲那不是逗嗎。。。css
2、使用Nodejs生成排行榜
因而乎就用 Nodejs 編寫了簡單的腳本，自動生成前端項目的排行榜。前端項目指使用語言類型爲 JavaScript 、 CSS 和 HTML 的項目。具體代碼以下，你們能夠複製過去玩玩，只要使用node index.js就能夠生成最新的前端項目排行榜，固然若是你想自定義排行榜類型的話，修改一下源碼，也很簡單（代碼使用了一些 ES6 的語法，若是你們對 ES6 不太熟悉，強烈推薦查看阮一峯老師的開源電子書 ECMAScript 6入門）。此外要注意的一點是生成的文檔爲 markdown 格式，因此你還須要一個相關的編輯器查看。 這份代碼也能夠在個人 Github 上查看。html
var https = require('https');
var fs = require('fs');
var options = {
protocol: 'https:',
host: 'api.github.com',
path: '/search/repositories?q=language:javascript+language:css+language:html+stars:>=10000&sort=stars&order=desc&per_page=100',
method: 'GET',
headers: {
'User-Agent': 'frontend-repos-ranking',
}
};
var getRepos = new Promise(function(resolve, reject) {
var req = https.request(options, (res) => {
var data = '';
res.setEncoding('utf8');
res.on('data', (chunk) => {
data += chunk;
});
res.on('end', () => {
resolve(data);
})
});
req.on('error', (e) => {
console.log(`problem with request: ${e.message}`);
});
req.end();
});
getRepos.then((repos) => {
var markdown =
`# frontend-repos-ranking
## ${(new Date()).toDateString()}
github上全部前端項目（HTML+CSS+JavaScript）的總排名！
本頁面使用nodejs結合github的api自動生成，您能夠經過運行\`node index.js\`來生成最新的排行榜。\n\n`;
markdown += ' Rank | Name(Description) | Star | Language | Created_At \n';
markdown += ' --- | --- | --- | --- | --- \n';
repos = JSON.parse(repos);
repos.items.forEach((item, index) => {
markdown += `${index+1}|[**${item.full_name}**](${item.html_url})<br><br>${item.description}|${item.stargazers_count}|${item.language}|${item.created_at.split('T')[0]}\n`;
});
fs.writeFile('README.md', markdown);
});
3、排行榜
接下來放出排名前100的前端項目，這樣我就能夠好好研究一下每個項目啦（hehe...）。
博客園裏的這表格樣式太醜了。。。推薦到個人 Github 上查看前端
| Rank | Name(Description) | Star | Language | Created_At |
|---|---|---|---|---|
| 1 | FreeCodeCamp/FreeCodeCamp The http://FreeCodeCamp.com open source codebase and curriculum. Learn to code and help nonprofits. |
101749 | JavaScript | 2014-12-24 |
| 2 | twbs/bootstrap The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. |
94459 | CSS | 2011-07-29 |
| 3 | mbostock/d3 A JavaScript visualization library for HTML and SVG. |
48331 | JavaScript | 2010-09-27 |
| 4 | angular/angular.js HTML enhanced for web apps |
48295 | JavaScript | 2010-01-06 |
| 5 | FortAwesome/Font-Awesome The iconic font and CSS toolkit |
41054 | HTML | 2012-02-17 |
| 6 | facebook/react A declarative, efficient, and flexible JavaScript library for building user interfaces. |
39549 | JavaScript | 2013-05-24 |
| 7 | jquery/jquery jQuery JavaScript Library |
38815 | JavaScript | 2009-04-03 |
| 8 | h5bp/html5-boilerplate A professional front-end template for building fast, robust, and adaptable web apps or sites. |
33483 | JavaScript | 2010-01-24 |
| 9 | meteor/meteor Meteor, the JavaScript App Platform |
33130 | JavaScript | 2012-01-19 |
| 10 | airbnb/javascript JavaScript Style Guide |
32896 | JavaScript | 2012-11-01 |
| 11 | daneden/animate.css A cross-browser library of CSS animations. As easy to use as an easy thing. |
30965 | CSS | 2011-10-12 |
| 12 | facebook/react-native A framework for building native apps with React. |
29822 | JavaScript | 2015-01-09 |
| 13 | getify/You-Dont-Know-JS A book series on JavaScript. @YDKJS on twitter. |
28689 | JavaScript | 2013-11-16 |
| 14 | hakimel/reveal.js The HTML Presentation Framework |
27192 | JavaScript | 2011-06-07 |
| 15 | impress/impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. |
26984 | JavaScript | 2011-12-28 |
| 16 | moment/moment Parse, validate, manipulate, and display dates in javascript. |
25424 | JavaScript | 2011-03-01 |
| 17 | adobe/brackets An open source code editor for the web, written in JavaScript, HTML and CSS. |
25028 | JavaScript | 2011-12-07 |
| 18 | jashkenas/backbone Give your JS App some Backbone with Models, Views, Collections, and Events |
24505 | JavaScript | 2010-09-30 |
| 19 | Semantic-Org/Semantic-UI Semantic is a UI component framework based around useful principles from natural language. |
24411 | JavaScript | 2013-04-08 |
| 20 | expressjs/express Fast, unopinionated, minimalist web framework for node. |
24289 | JavaScript | 2009-06-26 |
| 21 | mrdoob/three.js JavaScript 3D library. |
24145 | JavaScript | 2010-03-23 |
| 22 | socketio/socket.io Realtime application framework (Node.JS server) |
24047 | JavaScript | 2010-03-11 |
| 23 | blueimp/jQuery-File-Upload File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads. |
23220 | JavaScript | 2010-12-01 |
| 24 | driftyco/ionic Advanced HTML5 mobile development framework and SDK. Build incredible mobile apps with web technologies you already know and love. Best friends with AngularJS. |
23142 | JavaScript | 2013-08-20 |
| 25 | zurb/foundation-sites The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device. |
23026 | JavaScript | 2011-10-13 |
| 26 | google/material-design-icons Material Design icons by Google |
23014 | CSS | 2014-10-08 |
| 27 | resume/resume.github.com Resumes generated using the GitHub informations |
21789 | JavaScript | 2011-02-06 |
| 28 | nodejs/node Node.js JavaScript runtime ✨����✨ |
21699 | JavaScript | 2014-11-26 |
| 29 | NARKOZ/hacker-scripts Based on a true story |
21456 | JavaScript | 2015-11-21 |
| 30 | necolas/normalize.css A collection of HTML element and attribute style-normalizations |
20603 | HTML | 2011-05-04 |
| 31 | gulpjs/gulp The streaming build system |
20300 | JavaScript | 2013-07-04 |
| 32 | google/material-design-lite Material Design Lite Components in HTML/CSS/JS |
19866 | HTML | 2015-01-14 |
| 33 | harvesthq/chosen Chosen is a library for making long, unwieldy select boxes more friendly. |
19239 | HTML | 2011-04-18 |
| 34 | TryGhost/Ghost Just a blogging platform |
19015 | JavaScript | 2013-05-04 |
| 35 | nnnick/Chart.js Simple HTML5 Charts using the tag |
18875 | JavaScript | 2013-03-17 |
| 36 | jashkenas/underscore JavaScript's utility _ belt |
17789 | JavaScript | 2009-10-25 |
| 37 | Modernizr/Modernizr Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. |
17706 | JavaScript | 2009-09-25 |
| 38 | ariya/phantomjs Scriptable Headless WebKit |
17545 | HTML | 2010-12-27 |
| 39 | Dogfalo/materialize Materialize, a CSS Framework based on Material Design |
17470 | JavaScript | 2014-09-12 |
| 40 | caolan/async Async utilities for node and the browser |
17083 | JavaScript | 2010-06-01 |
| 41 | select2/select2 Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. |
16753 | JavaScript | 2012-03-04 |
| 42 | reactjs/redux Predictable state container for JavaScript apps |
16538 | JavaScript | 2015-05-29 |
| 43 | tastejs/todomvc Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, and many more |
16505 | JavaScript | 2011-06-03 |
| 44 | emberjs/ember.js Ember.js - A JavaScript framework for creating ambitious web applications |
16016 | JavaScript | 2011-05-25 |
| 45 | vuejs/vue Simple yet powerful library for building modern web interfaces. |
15884 | JavaScript | 2013-07-29 |
| 46 | lodash/lodash A modern JavaScript utility library delivering modularity, performance, & extras. |
15689 | JavaScript | 2012-04-07 |
| 47 | Prinzhorn/skrollr Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love). |
15327 | HTML | 2012-03-18 |
| 48 | callemall/material-ui React Components that Implement Google's Material Design. |
15085 | JavaScript | 2014-08-18 |
| 49 | FezVrasta/bootstrap-material-design Material design theme for Bootstrap 3 |
14861 | CSS | 2014-08-18 |
| 50 | babel/babel Babel is a compiler for writing next generation JavaScript. |
14783 | JavaScript | 2014-09-28 |
| 51 | Polymer/polymer Build modern apps using web components |
14750 | HTML | 2012-08-23 |
| 52 | kenwheeler/slick the last carousel you'll ever need |
14153 | JavaScript | 2014-03-24 |
| 53 | numbbbbb/the-swift-programming-language-in-chinese 中文版 Apple 官方 Swift 教程《The Swift Programming Language》 |
14101 | CSS | 2014-06-03 |
| 54 | mozilla/pdf.js PDF Reader in JavaScript |
14036 | JavaScript | 2011-04-26 |
| 55 | balderdashy/sails Realtime MVC Framework for Node.js |
14032 | JavaScript | 2012-03-18 |
| 56 | bower/bower A package manager for the web |
13899 | JavaScript | 2012-09-07 |
| 57 | yahoo/pure A set of small, responsive CSS modules that you can use in every web project. |
13831 | HTML | 2013-04-22 |
| 58 | webpack/webpack A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders" modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. |
13806 | JavaScript | 2012-03-10 |
| 59 | alvarotrigo/fullPage.js fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple |
13559 | JavaScript | 2013-09-20 |
| 60 | hammerjs/hammer.js A javascript library for multi-touch gestures :// You can touch this |
13496 | JavaScript | 2012-03-02 |
| 61 | less/less.js Leaner CSS |
13455 | JavaScript | 2010-02-20 |
| 62 | usablica/intro.js A better way for new feature introduction and step-by-step users guide for your website and project. |
13361 | JavaScript | 2013-03-10 |
| 63 | Leaflet/Leaflet �� JavaScript library for mobile-friendly interactive maps |
13245 | JavaScript | 2010-09-22 |
| 64 | defunkt/jquery-pjax pushState + ajax = pjax |
13223 | JavaScript | 2011-02-26 |
| 65 | google/web-starter-kit Web Starter Kit - a workflow for multi-device websites |
13149 | HTML | 2014-04-07 |
| 66 | angular/material Material design for Angular |
13112 | JavaScript | 2014-07-01 |
| 67 | bevacqua/dragula �� Drag and drop so simple it hurts |
13025 | JavaScript | 2015-04-13 |
| 68 | t4t5/sweetalert A beautiful replacement for JavaScript's "alert" |
13002 | JavaScript | 2014-09-30 |
| 69 | IanLunn/Hover A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS. |
12995 | CSS | 2014-01-02 |
| 70 | sahat/hackathon-starter A boilerplate for Node.js web applications |
12812 | CSS | 2013-11-13 |
| 71 | twbs/ratchet Build mobile apps with simple HTML, CSS, and JavaScript components. |
12763 | CSS | 2012-08-17 |
| 72 | enaqx/awesome-react A collection of awesome things regarding React ecosystem. |
12707 | JavaScript | 2014-08-06 |
| 73 | ajaxorg/ace Ace (Ajax.org Cloud9 Editor) |
12460 | JavaScript | 2010-10-27 |
| 74 | Unitech/pm2 Production process manager for Node.js apps with a built-in load balancer |
12387 | JavaScript | 2013-05-21 |
| 75 | twitter/typeahead.js typeahead.js is a fast and fully-featured autocomplete library |
12320 | JavaScript | 2013-02-19 |
| 76 | facebook/immutable-js Immutable persistent data collections for Javascript which increase efficiency and simplicity. |
12200 | JavaScript | 2014-07-02 |
| 77 | ftlabs/fastclick Polyfill to remove click delays on browsers with touch UIs |
12136 | JavaScript | 2012-02-13 |
| 78 | videojs/video.js Video.js - open source HTML5 & Flash video player |
12056 | JavaScript | 2010-05-14 |
| 79 | angular-ui/bootstrap Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue! |
11989 | JavaScript | 2012-10-05 |
| 80 | reactjs/react-router A complete routing solution for React.js |
11918 | JavaScript | 2014-05-16 |
| 81 | photonstorm/phaser Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. |
11820 | JavaScript | 2013-04-12 |
| 82 | GitbookIO/gitbook Modern book format and toolchain using Git and Markdown |
11675 | JavaScript | 2014-03-31 |
| 83 | adam-p/markdown-here Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending. |
11651 | JavaScript | 2012-05-13 |
| 84 | typicode/json-server Get a full fake REST API with zero coding in less than 30 seconds (seriously) |
11442 | JavaScript | 2013-11-27 |
| 85 | designmodo/Flat-UI Flat UI Free - Design Framework (html/css3/less/js). Flat UI is based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites. |
11415 | JavaScript | 2013-03-03 |
| 86 | dhg/Skeleton Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development |
11403 | CSS | 2011-04-30 |
| 87 | kriskowal/q A tool for creating and composing asynchronous promises in JavaScript |
11349 | JavaScript | 2010-09-04 |
| 88 | zenorocha/clipboard.js ✂️ Modern copy to clipboard. No Flash. Just 3kb gzipped �� |
11323 | JavaScript | 2015-09-18 |
| 89 | ecomfe/echarts A powerful charting and visualization library for browser |
11102 | JavaScript | 2013-04-03 |
| 90 | facebook/flux Application Architecture for Building User Interfaces |
11069 | JavaScript | 2014-07-20 |
| 91 | angular/angular-seed Seed project for angular apps. |
11055 | HTML | 2010-12-24 |
| 92 | tobiasahlin/SpinKit A collection of loading indicators animated with CSS |
10942 | CSS | 2013-12-12 |
| 93 | dimsemenov/PhotoSwipe JavaScript image gallery for mobile and desktop, modular, framework independent |
10833 | JavaScript | 2011-04-07 |
| 94 | rstacruz/nprogress For slim progress bars like on YouTube, Medium, etc |
10817 | JavaScript | 2013-08-20 |
| 95 | jasmine/jasmine DOM-less simple JavaScript testing framework |
10702 | JavaScript | 2008-12-02 |
| 96 | gruntjs/grunt Grunt: The JavaScript Task Runner |
10676 | JavaScript | 2011-09-21 |
| 97 | petkaantonov/bluebird �� ⚡ Bluebird is a full featured promise library with unmatched performance. |
10484 | JavaScript | 2013-09-07 |
| 98 | request/request Simplified HTTP request client. |
10450 | JavaScript | 2011-01-23 |
| 99 | pugjs/pug Jade - robust, elegant, feature rich template engine for Node.js |
10416 | JavaScript | 2010-06-23 |
| 100 | madrobby/zepto Zepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API |
10378 | HTML | 2010-09-20 |
4、總結
有朝一日我會把上面的所有項目都研究一遍的。。。vue