Github前端项目排名

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\`来生成最新的排行榜。\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);
});

三、排行榜

接下来放出排名前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

四、总结

有朝一日我会把上面的全部项目都研究一遍的。。。