Github前端项目排名(2016-04-04)
一、前言
近几年前端技术日新月异，从 RequireJS 到 AngularJS 再到 React，似乎每天都有新的技术诞生。而大神们总能第一时间获取到最新资讯，在我们还在刀耕火种的年代就使用上各种高新技术，甚是膜拜。
为了赶上时代的脚步，加上昨天闲着蛋痛。。。就打算去 Github 研究一波，看看大家都在干什么。万一找到一个潜力股项目在萌芽阶段，然后我就去读懂它的源代码，努力成为项目主要贡献者，等星星上来之后，不就成为又一个大牛了吗！(想想就好...)。于是项目按星星排序，一个个研究。。。突然发现这样子太笨了，不如写个爬虫把所有信息都捉取过来弄个排行榜吧。正计划中又发现这个网站Github Rank，上面写着 by Github API v3。原来有 Github 有开放 api 的，还tm写爬虫那不是逗吗。。。
二、使用Nodejs生成排行榜
于是乎就用 Nodejs 编写了简单的脚本，自动生成前端项目的排行榜。前端项目指使用语言类型为 JavaScript 、 CSS 和 HTML 的项目。具体代码如下，大家可以复制过去玩玩，只要使用node index.js就可以生成最新的前端项目排行榜，当然如果你想自定义排行榜类型的话，修改一下源码，也很简单（代码使用了一些 ES6 的语法，如果大家对 ES6 不太熟悉，强烈推荐查看阮一峰老师的开源电子书 ECMAScript 6入门）。此外要注意的一点是生成的文档为 markdown 格式，所以你还需要一个相关的编辑器查看。 这份代码也可以在我的 Github 上查看。
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\`来生成最新的排行榜。
`;
markdown += ' Rank | Name(Description) | Star | Language | Created_At
';
markdown += ' --- | --- | --- | --- | ---
';
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]}
`;
});
fs.writeFile('README.md', markdown);
});三、排行榜
接下来放出排名前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 |
四、总结
有朝一日我会把上面的全部项目都研究一遍的。。。