diff --git a/.gitignore b/.gitignore index 10f7209..305af13 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,4 @@ -~$* \ No newline at end of file +~$* +v1.1/WebFrontEndStackv1.1.zip +node_modules +npm-debug.log \ No newline at end of file diff --git a/README.es-es.md b/README.es-es.md new file mode 100644 index 0000000..5e81c10 --- /dev/null +++ b/README.es-es.md @@ -0,0 +1,337 @@ +# Overflow Stack +The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): +http://overflowstack.github.io + +# Localization +English: +https://github.com/unruledboy/WebFrontEndStack/ + +中文: +https://github.com/unruledboy/WebFrontEndStack/blob/master/README.zh-cn.md + +Español: +https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md + + +# WebFrontEndStack +Web front-end stack: navegadores, plataformas, librerías, frameworks, herramientas etc. + +![Image of Web Front End Stack](Web Front End Stack.png) + +# Genera la imagen + +## Prepara el entorno +Tienes que tener instalado el Visual Studio 2010+ en Windows. + +1. Instalar [nodejs](https://nodejs.org). + +2. Instalar [Phantomjs](http://phantomjs.org). + +3. Instalar [Python 2.7](https://www.python.org/). + +4. ``npm install`` + +Si aparece algún error, comprueba las dependencias de [phantomjs-node](https://github.com/sgentle/phantomjs-node/wiki), [node-gyp](https://github.com/TooTallNate/node-gyp#installation). + +## Ejecución de comandos +``npm start`` para lanzar un servidor done ver el html. + +``npm run build`` para generar la imagen. + + +## Opciones +### Uso + node index task1 \[task2\] \[task3\] .. \[--option=value\] \[--option=value\] ... +#### Tareas +##### phantomjs + Genera la imagen +##### readme + Reconstruye los README. +##### updatestargazers + Actualiza los contadores de estrellas de los proyectos github. +#### Opciones +#### port + Default: 3000 +#### update_existed_stargazers + Default: false + +# ¿Por qué realizar esta tabla? +Alguna vez te has preguntado: +* ¿Cuantas tecnologías se incluyen en el desarrollo Front end? +* ¿Cuantas conozco? + + +No pude encontrar un diagrama muy completo que mostrase la pila de tecnologías involucradas en el desarrollo web front end, así realicé mi propia versión. + +Puede que haya errores, en categorías, enlaces o en nombres de +librerías, o puede que falte alguna que consideres importante, pero +bonito es que puedes modificarlo y arreglarlo como quieras. + +Puedes encontrar una vista previa del gráfico aquí (usa el ratón para +moverte / hacer zoom): + +https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm + + +# The Web Front End Stack + + +- Web Front End + - Navegadores + - [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) + - [Chrome](http://www.google.com/chrome/) + - [Firefox](https://www.mozilla.org/) + - [Safari](http://www.apple.com/safari/) + - [Opera](http://www.opera.com/) + - [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) + - [Netscape ;-)](https://en.wikipedia.org/wiki/Netscape) + - Protocolos + - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) + - URI + - Sesión + - Autenticación + - Petición + - Respuesta + - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) + - Compresión + - Minificación + - Server Push + - WebSocket + - The 3 Pillars + - HTML (HyperText Markup Language) + - CSS (Cascading Style Sheets) + - JavaScript + - Estándares + - W3C + - HTML + - CSS + - XHTML + - XML + - Conceptons principales + - HTML + - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) + - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) + - Attribute + - JavaScript + - [Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) + - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) + - [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) + - [JSON (JavaSript Object Notation)](https://developer.mozilla.org/en-US/docs/Glossary/JSON) + - [AJAX (Asynchronous JavaScript and XML)](https://developer.mozilla.org/en-US/docs/AJAX) + - CSS + - Selector + - Priority + - Specificity + - Box Model + - Motores de renderizado + - [Trident (IE)](https://en.wikipedia.org/wiki/Trident_(layout_engine)) + - [Blink / prev. WebKit (Chrome)](http://www.chromium.org/blink) + - [Gecko (Firefox)](https://developer.mozilla.org/en-us/docs/Mozilla/Gecko) + - [WebKit (Safari)](http://www.webkit.org/) + - [Blink / prev. Presto (Opera)](http://www.chromium.org/blink) + - [EdgeHTML (Edge)](https://en.wikipedia.org/wiki/EdgeHTML) + - Motores JavaScript + - [JScript (IE8- / ASP)](https://en.wikipedia.org/wiki/JScript) + - [Chakra (IE9+ / Edge)](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) + - [V8 (Chrome / Opera / Nodejs / MongoDB)](https://developers.google.com/v8/?hl=zh-CN) [[GitHub]](https://github.com/v8/v8/) + - [SpiderMonkey (Firefox)]( https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey) + - [JavaScriptCore (Safari)](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) + - Tiempo de ejecución + - Cookie + - Local Cache + - Session Storage + - Local Storage + - Componentes + - Extensiones + - Plugins + - Resources + - Images + - Icons + - Fonts + - Audios + - Videos + - Editores de texto + - [Sublime Text](http://www.sublimetext.com/) + - [WebStorm](https://www.jetbrains.com/webstorm/) + - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) + - [Vim](http://www.vim.org/) + - [Emacs](https://www.gnu.org/software/emacs/) + - [Brackets](http://brackets.io/) [[GitHub]](https://github.com/adobe/brackets/) + - [Light Table](http://lighttable.com/) [[GitHub]](https://github.com/LightTable/LightTable/) + - [Visual Studio](https://www.visualstudio.com/) + - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) + - Dreamweaver ;-) + - FrontPage / SharePoint Designer ;-) + - Build Tasks + - Minificación + - Compilación + - Concatenación + - Uglification + - Optimización de imágenes + - Tests unitarios + - Herramientas de tareas + - [Grunt](http://www.gruntjs.com/) [[GitHub]](https://github.com/cowboy/jquery-tiny-pubsub/) + - [Gulp](http://gulpjs.com/) [[GitHub]](https://github.com/gulpjs/gulp/) + - [Brunch](http://brunch.io/) [[GitHub]](https://github.com/brunch/brunch/) + - [Yeoman](http://yeoman.io/) + - Broccoli [[GitHub]](https://github.com/broccolijs/broccoli/) + - Depuración + - [Developer Tools](https://developer.chrome.com/devtools) + - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) + - Herramientas base + - [Node.js](https://nodejs.org/) [[GitHub]](https://github.com/joyent/node/) + - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) + - [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) + - Calidad + - [JSLint](http://www.jslint.com/) [[GitHub]](https://github.com/douglascrockford/JSLint/) + - [JSHint](http://jshint.com/) [[GitHub]](https://github.com/jshint/jshint/) + - [jscs](http://jscs.info/) [[GitHub]](https://github.com/jscs-dev/node-jscs) + - [Closure Linter](https://developers.google.com/closure/utilities/) + - Gestores de paquetes + - [npm](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) + - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) + - Test + - Herramientas + - [QUnit](https://qunitjs.com/) [[GitHub]](https://github.com/jquery/qunit/) + - [Jasmine](http://jasmine.github.io/) [[GitHub]](https://github.com/jasmine/jasmine/) + - [Mocha](https://mochajs.org/) [[GitHub]](https://github.com/mochajs/mocha/) + - [Selenium](http://www.seleniumhq.org/) [[GitHub]](https://github.com/SeleniumHQ/selenium/) + - [WebDriverIO](http://webdriver.io/) [[GitHub]](https://github.com/webdriverio/webdriverio/) + - [Protractor](http://www.protractortest.org/) + - [Chai](http://chaijs.com/) [[GitHub]](https://github.com/jfirebaugh/konacha/) + - [Sinon.JS](http://sinonjs.org/) [[GitHub]](https://github.com/cjohansen/Sinon.JS/) + - [Karma](http://karma-runner.github.io/) [[GitHub]](https://github.com/karma-runner/karma/) + - nodeunit [[GitHub]](https://github.com/caolan/nodeunit/) + - tape [[GitHub]](http://github.com/substack/tape) + - [nightmare](http://nightmarejs.org/) [[GitHub]](https://github.com/segmentio/nightmare) + - Composite + - [Sauce Labs](https://saucelabs.com/) + - [Browser Stack](https://www.browserstack.com/) + - [Browser Shots](http://browsershots.org/) + - [Browserling](https://www.browserling.com/) + - [Browser Sandbox](https://spoon.net/browsers/) + - [Cross Browser Testing](https://crossbrowsertesting.com/) + - [Browsera](http://www.browsera.com/) + - [SortSite](http://www.powermapper.com/products/sortsite/checks/browser-compatibility/) + - Librerías y frameworks + - JavaScript base library + - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) + - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) + - [Zepto](http://zeptojs.com/) [[GitHub]](https://github.com/madrobby/zepto/) + - [MooTool](http://mootools.net/) [[GitHub]](https://github.com/mootools/mootools-core/) + - Módulos + - ES6 Module + - CommonJS + - [webpack](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) + - [browserify](http://browserify.org/) [[GitHub]](https://github.com/substack/node-browserify/) + - AMD + - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) + - UMD + - umd [[GitHub]](https://github.com/umdjs/umd/) + - JavaScript Framework + - [AngularJS](https://angularjs.org/) [[GitHub]](https://github.com/angular/angular.js/) + - [Backbone](http://backbonejs.org/) [[GitHub]](https://github.com/jashkenas/backbone/) + - [Knockout](http://knockoutjs.com/) [[GitHub]](https://github.com/SteveSanderson/knockout/) + - [Ember](http://emberjs.com/) [[GitHub]](https://github.com/emberjs/ember.js/) + - [React](http://facebook.github.io/react/) [[GitHub]](https://github.com/facebook/react/) + - [polymer](https://www.polymer-project.org/) [[GitHub]](https://github.com/polymer/polymer/) + - [Deft.js](http://deftjs.org/) [[GitHub]](https://github.com/deftjs/DeftJS/) + - [Vue](http://vuejs.org/) [[GitHub]](https://github.com/yyx990803/vue/) + - [Riot](http://riotjs.com/) [[GitHub]](https://github.com/riot/riot) + - UI framework + - [Bootstrap](http://getbootstrap.com/) [[GitHub]](https://github.com/twbs/bootstrap/) + - [Semantic UI](http://semantic-ui.com/) [[GitHub]](https://github.com/Semantic-Org/Semantic-UI/) + - [Foundation](http://foundation.zurb.com/) [[GitHub]](https://github.com/zurb/foundation/) + - [Material UI](http://material-ui.com/) [[GitHub]](https://github.com/callemall/material-ui/) + - [WinJS](https://dev.windows.com/en-us/develop/winjs) [[GitHub]](https://github.com/winjs/winjs) + - [Pure](http://purecss.io/) [[GitHub]](https://github.com/yahoo/pure/) + - [Amaze UI](http://amazeui.org/) [[GitHub]](https://github.com/allmobilize/amazeui) + - WebSocket + - [Socket.io](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) + - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) + - Visualización de datos + - [D3](http://d3js.org/) [[GitHub]](https://github.com/mbostock/d3/wiki/Gallery/) + - [Echarts](http://echarts.baidu.com) [[GitHub]](https://github.com/ecomfe/esl/) + - [HighCharts](http://www.highcharts.com/) [[GitHub]](https://github.com/highslide-software/highcharts.com/) + - [Vis.js](http://visjs.org/) [[GitHub]](https://github.com/almende/vis/) + - [Flot](http://www.flotcharts.org/) [[GitHub]](https://github.com/flot/flot/) + - WebGL + - [Three.js](http://threejs.org/) [[GitHub]](https://github.com/mrdoob/three.js/) + - [Babylon.js](http://www.babylonjs.com/) [[GitHub]](https://github.com/BabylonJS/Babylon.js/) + - [Pixi.js](http://www.pixijs.com/) [[GitHub]](https://github.com/GoodBoyDigital/pixi.js/) + - CSS3 Animation + - [Animate.css](https://daneden.github.io/animate.css/) [[GitHub]](https://github.com/daneden/animate.css/) + - [bounce.js](http://bouncejs.com/) [[GitHub]](https://github.com/tictail/bounce.js/) + - [Effeckt.css](https://h5bp.github.io/Effeckt.css/) [[GitHub]](https://github.com/h5bp/Effeckt.css/) + - [move.js](https://visionmedia.github.io/move.js/) [[GitHub]](https://github.com/visionmedia/move.js/) + - Control de flujo + - ES6 + - Promise + - Generator + - ES7 + - yield + - await + - async [[GitHub]](https://github.com/caolan/async/) + - co [[GitHub]](https://github.com/tj/co/) + - Promise + - Bluebird [[GitHub]](https://github.com/petkaantonov/bluebird/) + - q [[GitHub]](https://github.com/kriskowal/q/) + - when.js [[GitHub]](https://github.com/cujojs/when/) + - Funcional + - [bacon.js](http://baconjs.github.io/) [[GitHub]](https://github.com/baconjs/bacon.js/) + - [immutable.js](https://facebook.github.io/immutable-js/) [[GitHub]](https://github.com/facebook/immutable-js/) + - [ramda](http://ramdajs.com/) [[GitHub]](http://github.com/ramda/ramda) + - [underscore.js](http://underscorejs.org/) [[GitHub]](https://github.com/jashkenas/underscore) + - [lodash](https://lodash.com/) [[GitHub]](https://github.com/lodash/lodash) + - [ReactiveX](http://reactivex.io/) [[GitHub]](https://github.com/Reactive-Extensions/RxJS) + - Mobile UI + - [jQuery Mobile](https://jquerymobile.com/) [[GitHub]](https://github.com/jquery/jquery-mobile/) + - [Jo](http://joapp.com/) [[GitHub]](https://github.com/davebalmer/jo/) + - [Dojo Mobile](https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) + - [Lungo](http://lungo.tapquo.com/) [[GitHub]](https://github.com/tapquo/Lungo.js/) + - Pre-procesadores CSS + - LESS + - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) + - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) + - Sass(SCSS) + - [Compass](http://compass-style.org/) [[GitHub]](https://github.com/chriseppstein/compass/) + - [Bourbon](http://bourbon.io/) [[GitHub]](https://github.com/thoughtbot/bourbon/) + - [Gumby](http://www.gumbyframework.com/) [[GitHub]](https://github.com/GumbyFramework/Gumby/) + - Stylus + - nib [[GitHub]](https://github.com/tj/nib/) + - Future Standards + - [babel](https://babeljs.io/) [[GitHub]](https://github.com/babel/babel) + - Plantillas + - [Handlebars](http://handlebarsjs.com/) [[GitHub]](https://github.com/wycats/handlebars.js/) + - [Haml](http://haml.info/) [[GitHub]](https://github.com/haml/haml/) + - [Slim](http://slim-lang.com/) [[GitHub]](https://github.com/slim-template/slim/) + - [Jade](http://jade-lang.com/) [[GitHub]](https://github.com/jadejs/jade/) + - [Ejs](http://www.embeddedjs.com/) + - [Spacebars](http://meteorcapture.com/spacebars/) + - [mustache](http://mustache.github.io/) [[GitHub]](https://github.com/janl/mustache.js/) + - Modernisation + - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) + - Reset + - Buenas prácticas + - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) + - Responsiveness + - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) + - Seguridad + - Sandbox + - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) + - [CORS](http://www.w3.org/TR/cors/) + - Lenguajes intermedios + - [CoffeeScript](http://coffeescript.org/) [[GitHub]](https://github.com/jashkenas/coffeescript/) + - [TypeScript](http://www.typescriptlang.org/) [[GitHub]](https://github.com/Microsoft/TypeScript/) + - ClojureScript [[GitHub]](https://github.com/clojure/clojurescript/) + - [JSX (Facebook)](http://facebook.github.io/react/docs/jsx-in-depth.html) + - Empaquetadores de Apps para móvil + - [PhoneGap / Cordova](https://cordova.apache.org/) [[GitHub]](https://github.com/apache/cordova-android/) + - [MUI](http://dev.dcloud.net.cn/mui/) [[GitHub]](https://github.com/dcloudio/mui/) + - [React Native](https://facebook.github.io/react-native/) [[GitHub]](https://github.com/facebook/react-native/) + - [Ionic](http://ionicframework.com/) [[GitHub]](https://github.com/driftyco/ionic/) + - Desktop Application Development + - [Electron](http://electron.atom.io/) [[GitHub]](https://github.com/atom/electron) + - [NW.js](http://nwjs.io/) [[GitHub]](https://github.com/nwjs/nw.js) + + diff --git a/README.md b/README.md index 49d09d4..8a15b0a 100644 --- a/README.md +++ b/README.md @@ -1,78 +1,331 @@ -# WebFrontEndStack -web front end stack: browsers, platforms, libraries, frameworks, tools etc. - -![Image of Web Front End Stack](Web%20Front%20End%20Stack.png) - -# What and why? -Have you ever wondered: -* what technologies web front end really includes? -* how many do I possess? +# Overflow Stack +The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): +http://overflowstack.github.io +# Localization +中文: +https://github.com/unruledboy/WebFrontEndStack/blob/master/README.zh-cn.md -I could not find a really comprehensive diagram that shows the web front end technology stack, so I come up with my own version. - -There might be issues here and there, like the category, the individual ones, but the beautity is you can modify it as you want. - - -# The Web Front End Stack - +Español: +https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md -Sencha, jQueryMobile, Kendo UI, Jo, WinkUI, DojoMobile, Lungo | Mobile UI -PhoneGap, Cordova, Appcelerator Titanium, appMobi, trigger.io | Platforms - -CoffeeScript, TypeScript, Dart, LiveScript, ClojureScript | Intermediate Languages - -SSL, OAuth, Sandbox, XSS, CSRF, CORS | Security - -SEO | Responsiveness, CDN | Practices - -Normalize, Reset | Modernisation - -Markdown, Handlebars, Haml, Slim Ruby, Jade | Template +# WebFrontEndStack +Web front-end stack: browsers, platforms, libraries, frameworks, tools etc. -SCSS, LESS (Hat), SASS (Compass, Bourbon, Gumby), Stylus (Nib), ... | CSS Pre-processors +![Image of Web Front End Stack](Web Front End Stack.png) -Bootstrap, ZURB, YUI, Ext JS, Toast, YAML, ResponsiveGS, Semantic UI, Foundation | UI framework +# Generate image yourself -AngularJS, Backbone, Knockout, Ember, React, polymer, flux, Dojo, Deft.js | JavaScript framework +## Prepare for environment +You should have Visual Studio 2010+ installed in Windows. -jQuery, Prototype, Zepto, MooTools,Underscore, RequireJS | JavaScript base library +1. Install [nodejs](https://nodejs.org). (Shoule be >= iojs 1.8.0) -QUnit, Jasmine, Mocha, Selenium, WebDriverJS, Nightwatch.js, Phantom.js, Protractor, Chai, Sinon, Karma | Test +2. Install [Phantomjs](http://phantomjs.org). -NPM, Bower | Package +3. Install [Python 2.7](https://www.python.org/). -JSLint, JSHint, jscs, Closure Linter, SonarQube | Quality +4. ``npm install`` -YSlow, jsPerf, Speed Tracer, Dynatrace, PageSpeed | Perf +If the error occurs, you can check the dependence of [phantomjs-node](https://github.com/sgentle/phantomjs-node/wiki), [node-gyp](https://github.com/TooTallNate/node-gyp#installation). -Developer Tools , Firebug, Dragonfly, Fiddler | Debug +## Run commands +``npm start`` for start a server to open the html directly. -Grunt, Gulp, Brunch, Yeoman, Lineman, Cake, Broccoli, webpack, browserify | Build +``npm run build`` for generate the image. -Minification, Compilation, Concatenation,Uglification, Image Optimization, Unit Testing | Build Tasks -Sublime Text, WebStorm, Atom, Vim, Emacs, Brackets, Light Table, Visual Studio | Editors +## Options +```bash -Cookie, Local Cache, Session Storage, Local Storage, Components (extensions, plugins...), Resources (images, fonts, videos...)|Runtime - -Chakra (IE), V8 (Chrome), SpiderMonkey (Firefox), Nitro (Safari), V8 (Opera), (Chakra) Edge | JavaScript Engine + -h, --help Display help message. + -p, --port number (Default: 3000) Set the port what express listening. + -ues, --update_existed_stargazers (Default: false) Update project's stargazers including existed. + --phantomjs The task to generate the image. + --readme The task to update readme. + --updatestargazers The task to update the count of the stargazers. -Trident (IE), Blink / (prev. WebKit) (Chrome), Gecko (Firefox), WebKit (Safari), Blink / (prev. Presto) (Opera), EdgeHTML (Edge) | Rendering Engine +``` -DOM, Element, Attribute | Prototype, Scope, Closure, JSON, JSONP, AJAX | Selector, Priority, Specificity, Box Model | Core Concepts -W3C (HTML, CSS XHTML, XML, JSON...), ECMAScript (JavaScript), HTML5/CSS3 | Standards +# What and why? +Have you ever wondered: +* what technologies web front end really includes? +* how many do I possess? -HTML (HyperText Markup Language) | JavaScript | CSS (Cascading Style Sheets) | The 3 Pillars -Compression, Encryption, Minification, Server Push | HTTP/2 +I could not find a really comprehensive diagram that shows the web front end technology stack, so I come up with my own version. -URI, Session, Authentication, Request method (GET, POST, HEAD, PUT, DELETE, TRACE, OPTIONS, PATCH, CONNECT), Request (Headers, Body), Response (Headers, Body), Status Code (2xx, 3xx, 4xx, 5xx ...) | HTTP/1.1 +There might be issues here and there, like the category, the individual ones, but the beauty is you can modify it as you want. -Internet Explorer, Chrome, Firefox, Safari, Opera, Edge, Netscape ;-) | Browser +You can have a graphical preview here (use mouse to move / zoom): +https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm -OS +# The Web Front End Stack + + +- Web Front End + - Browser + - [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) + - [Chrome](http://www.google.com/chrome/) + - [Firefox](https://www.mozilla.org/) + - [Safari](http://www.apple.com/safari/) + - [Opera](http://www.opera.com/) + - [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) + - [Netscape ;-)](https://en.wikipedia.org/wiki/Netscape) + - Protocol + - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) + - URI + - Session + - Authentication + - Request + - Response + - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) + - Compression + - Minification + - Server Push + - WebSocket + - The 3 Pillars + - HTML (HyperText Markup Language) + - CSS (Cascading Style Sheets) + - JavaScript + - Standards + - W3C + - HTML + - CSS + - XHTML + - XML + - Core Concepts + - HTML + - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) + - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) + - Attribute + - JavaScript + - [Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) + - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) + - [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) + - [JSON (JavaSript Object Notation)](https://developer.mozilla.org/en-US/docs/Glossary/JSON) + - [AJAX (Asynchronous JavaScript and XML)](https://developer.mozilla.org/en-US/docs/AJAX) + - CSS + - Selector + - Priority + - Specificity + - Box Model + - Rendering Engine + - [Trident (IE)](https://en.wikipedia.org/wiki/Trident_(layout_engine)) + - [Blink / prev. WebKit (Chrome)](http://www.chromium.org/blink) + - [Gecko (Firefox)](https://developer.mozilla.org/en-us/docs/Mozilla/Gecko) + - [WebKit (Safari)](http://www.webkit.org/) + - [Blink / prev. Presto (Opera)](http://www.chromium.org/blink) + - [EdgeHTML (Edge)](https://en.wikipedia.org/wiki/EdgeHTML) + - JavaScript Engine + - [JScript (IE8- / ASP)](https://en.wikipedia.org/wiki/JScript) + - [Chakra (IE9+ / Edge)](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) + - [V8 (Chrome / Opera / Nodejs / MongoDB)](https://developers.google.com/v8/?hl=zh-CN) [[GitHub]](https://github.com/v8/v8/) + - [SpiderMonkey (Firefox)]( https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey) + - [JavaScriptCore (Safari)](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) + - Runtime + - Cookie + - Local Cache + - Session Storage + - Local Storage + - Components + - Extensions + - Plugins + - Resources + - Images + - Icons + - Fonts + - Audios + - Videos + - Editors + - [Sublime Text](http://www.sublimetext.com/) + - [WebStorm](https://www.jetbrains.com/webstorm/) + - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) + - [Vim](http://www.vim.org/) + - [Emacs](https://www.gnu.org/software/emacs/) + - [Brackets](http://brackets.io/) [[GitHub]](https://github.com/adobe/brackets/) + - [Light Table](http://lighttable.com/) [[GitHub]](https://github.com/LightTable/LightTable/) + - [Visual Studio](https://www.visualstudio.com/) + - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) + - Dreamweaver ;-) + - FrontPage / SharePoint Designer ;-) + - Build Tasks + - Minification + - Compilation + - Concatenation + - Uglification + - Image Optimization + - Unit Testing + - Build Tools + - [Grunt](http://www.gruntjs.com/) [[GitHub]](https://github.com/cowboy/jquery-tiny-pubsub/) + - [Gulp](http://gulpjs.com/) [[GitHub]](https://github.com/gulpjs/gulp/) + - [Brunch](http://brunch.io/) [[GitHub]](https://github.com/brunch/brunch/) + - [Yeoman](http://yeoman.io/) + - Broccoli [[GitHub]](https://github.com/broccolijs/broccoli/) + - Debug + - [Developer Tools](https://developer.chrome.com/devtools) + - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) + - Base Tools + - [Node.js](https://nodejs.org/) [[GitHub]](https://github.com/joyent/node/) + - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) + - [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) + - Quality + - [JSLint](http://www.jslint.com/) [[GitHub]](https://github.com/douglascrockford/JSLint/) + - [JSHint](http://jshint.com/) [[GitHub]](https://github.com/jshint/jshint/) + - [jscs](http://jscs.info/) [[GitHub]](https://github.com/jscs-dev/node-jscs) + - [Closure Linter](https://developers.google.com/closure/utilities/) + - Package + - [npm](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) + - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) + - [yarn](https://yarnpkg.com/) [[GitHub]](https://github.com/yarnpkg/yarn/) + - Test + - Tools + - [QUnit](https://qunitjs.com/) [[GitHub]](https://github.com/jquery/qunit/) + - [Jasmine](http://jasmine.github.io/) [[GitHub]](https://github.com/jasmine/jasmine/) + - [Mocha](https://mochajs.org/) [[GitHub]](https://github.com/mochajs/mocha/) + - [Selenium](http://www.seleniumhq.org/) [[GitHub]](https://github.com/SeleniumHQ/selenium/) + - [WebDriverIO](http://webdriver.io/) [[GitHub]](https://github.com/webdriverio/webdriverio/) + - [Protractor](http://www.protractortest.org/) + - [Chai](http://chaijs.com/) [[GitHub]](https://github.com/jfirebaugh/konacha/) + - [Sinon.JS](http://sinonjs.org/) [[GitHub]](https://github.com/cjohansen/Sinon.JS/) + - [Karma](http://karma-runner.github.io/) [[GitHub]](https://github.com/karma-runner/karma/) + - nodeunit [[GitHub]](https://github.com/caolan/nodeunit/) + - tape [[GitHub]](http://github.com/substack/tape) + - [nightmare](http://nightmarejs.org/) [[GitHub]](https://github.com/segmentio/nightmare) + - [Enzyme](http://airbnb.io/enzyme/) [[GitHub]](https://github.com/airbnb/enzyme) + - Composite + - [Sauce Labs](https://saucelabs.com/) + - [Browser Stack](https://www.browserstack.com/) + - [Browser Shots](http://browsershots.org/) + - [Browserling](https://www.browserling.com/) + - [Browser Sandbox](https://spoon.net/browsers/) + - [Cross Browser Testing](https://crossbrowsertesting.com/) + - [Browsera](http://www.browsera.com/) + - [SortSite](http://www.powermapper.com/products/sortsite/checks/browser-compatibility/) + - Frameworks / Libraries + - JavaScript base library + - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) + - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) + - [Zepto](http://zeptojs.com/) [[GitHub]](https://github.com/madrobby/zepto/) + - [MooTool](http://mootools.net/) [[GitHub]](https://github.com/mootools/mootools-core/) + - Modular + - ES6 Module + - CommonJS + - [webpack](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) + - [browserify](http://browserify.org/) [[GitHub]](https://github.com/substack/node-browserify/) + - AMD + - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) + - UMD + - umd [[GitHub]](https://github.com/umdjs/umd/) + - JavaScript Framework + - [AngularJS](https://angularjs.org/) [[GitHub]](https://github.com/angular/angular.js/) + - [Backbone](http://backbonejs.org/) [[GitHub]](https://github.com/jashkenas/backbone/) + - [Knockout](http://knockoutjs.com/) [[GitHub]](https://github.com/SteveSanderson/knockout/) + - [Ember](http://emberjs.com/) [[GitHub]](https://github.com/emberjs/ember.js/) + - [React](http://facebook.github.io/react/) [[GitHub]](https://github.com/facebook/react/) + - [polymer](https://www.polymer-project.org/) [[GitHub]](https://github.com/polymer/polymer/) + - [Deft.js](http://deftjs.org/) [[GitHub]](https://github.com/deftjs/DeftJS/) + - [Vue](http://vuejs.org/) [[GitHub]](https://github.com/yyx990803/vue/) + - [Riot](http://riotjs.com/) [[GitHub]](https://github.com/riot/riot) + - UI framework + - [Bootstrap](http://getbootstrap.com/) [[GitHub]](https://github.com/twbs/bootstrap/) + - [Semantic UI](http://semantic-ui.com/) [[GitHub]](https://github.com/Semantic-Org/Semantic-UI/) + - [Foundation](http://foundation.zurb.com/) [[GitHub]](https://github.com/zurb/foundation/) + - [Material UI](http://material-ui.com/) [[GitHub]](https://github.com/callemall/material-ui/) + - [WinJS](https://dev.windows.com/en-us/develop/winjs) [[GitHub]](https://github.com/winjs/winjs) + - [Pure](http://purecss.io/) [[GitHub]](https://github.com/yahoo/pure/) + - [Amaze UI](http://amazeui.org/) [[GitHub]](https://github.com/allmobilize/amazeui) + - [Onsne UI](https://onsen.io/) [[GitHub]](https://github.com/OnsenUI/OnsenUI) + - WebSocket + - [Socket.io](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) + - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) + - Data Visualization + - [D3](http://d3js.org/) [[GitHub]](https://github.com/mbostock/d3/wiki/Gallery/) + - [Echarts](http://echarts.baidu.com) [[GitHub]](https://github.com/ecomfe/esl/) + - [HighCharts](http://www.highcharts.com/) [[GitHub]](https://github.com/highslide-software/highcharts.com/) + - [Vis.js](http://visjs.org/) [[GitHub]](https://github.com/almende/vis/) + - [Flot](http://www.flotcharts.org/) [[GitHub]](https://github.com/flot/flot/) + - WebGL + - [Three.js](http://threejs.org/) [[GitHub]](https://github.com/mrdoob/three.js/) + - [Babylon.js](http://www.babylonjs.com/) [[GitHub]](https://github.com/BabylonJS/Babylon.js/) + - [Pixi.js](http://www.pixijs.com/) [[GitHub]](https://github.com/GoodBoyDigital/pixi.js/) + - CSS3 Animation + - [Animate.css](https://daneden.github.io/animate.css/) [[GitHub]](https://github.com/daneden/animate.css/) + - [bounce.js](http://bouncejs.com/) [[GitHub]](https://github.com/tictail/bounce.js/) + - [Effeckt.css](https://h5bp.github.io/Effeckt.css/) [[GitHub]](https://github.com/h5bp/Effeckt.css/) + - [move.js](https://visionmedia.github.io/move.js/) [[GitHub]](https://github.com/visionmedia/move.js/) + - Flow Controller + - ES6 + - Promise + - Generator + - ES7 + - yield + - await + - async [[GitHub]](https://github.com/caolan/async/) + - co [[GitHub]](https://github.com/tj/co/) + - Promise + - Bluebird [[GitHub]](https://github.com/petkaantonov/bluebird/) + - q [[GitHub]](https://github.com/kriskowal/q/) + - when.js [[GitHub]](https://github.com/cujojs/when/) + - Functional + - [bacon.js](http://baconjs.github.io/) [[GitHub]](https://github.com/baconjs/bacon.js/) + - [immutable.js](https://facebook.github.io/immutable-js/) [[GitHub]](https://github.com/facebook/immutable-js/) + - [ramda](http://ramdajs.com/) [[GitHub]](http://github.com/ramda/ramda) + - [underscore.js](http://underscorejs.org/) [[GitHub]](https://github.com/jashkenas/underscore) + - [lodash](https://lodash.com/) [[GitHub]](https://github.com/lodash/lodash) + - [ReactiveX](http://reactivex.io/) [[GitHub]](https://github.com/Reactive-Extensions/RxJS) + - Mobile UI + - [jQuery Mobile](https://jquerymobile.com/) [[GitHub]](https://github.com/jquery/jquery-mobile/) + - [Jo](http://joapp.com/) [[GitHub]](https://github.com/davebalmer/jo/) + - [Dojo Mobile](https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) + - [Lungo](http://lungo.tapquo.com/) [[GitHub]](https://github.com/tapquo/Lungo.js/) + - CSS Pre-processors + - LESS + - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) + - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) + - Sass(SCSS) + - [Compass](http://compass-style.org/) [[GitHub]](https://github.com/chriseppstein/compass/) + - [Bourbon](http://bourbon.io/) [[GitHub]](https://github.com/thoughtbot/bourbon/) + - [Gumby](http://www.gumbyframework.com/) [[GitHub]](https://github.com/GumbyFramework/Gumby/) + - Stylus + - nib [[GitHub]](https://github.com/tj/nib/) + - Future Standards + - [babel](https://babeljs.io/) [[GitHub]](https://github.com/babel/babel) + - Template + - [Handlebars](http://handlebarsjs.com/) [[GitHub]](https://github.com/wycats/handlebars.js/) + - [Haml](http://haml.info/) [[GitHub]](https://github.com/haml/haml/) + - [Slim](http://slim-lang.com/) [[GitHub]](https://github.com/slim-template/slim/) + - [Jade](http://jade-lang.com/) [[GitHub]](https://github.com/jadejs/jade/) + - [Ejs](http://www.embeddedjs.com/) + - [Spacebars](http://meteorcapture.com/spacebars/) + - [mustache](http://mustache.github.io/) [[GitHub]](https://github.com/janl/mustache.js/) + - Modernisation + - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) + - Reset + - Best Practices + - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) + - Responsiveness + - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) + - Security + - Sandbox + - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) + - [CORS](http://www.w3.org/TR/cors/) + - Intermediate Languages + - [CoffeeScript](http://coffeescript.org/) [[GitHub]](https://github.com/jashkenas/coffeescript/) + - [TypeScript](http://www.typescriptlang.org/) [[GitHub]](https://github.com/Microsoft/TypeScript/) + - ClojureScript [[GitHub]](https://github.com/clojure/clojurescript/) + - [JSX (Facebook)](http://facebook.github.io/react/docs/jsx-in-depth.html) + - Mobile Application Development + - [PhoneGap / Cordova](https://cordova.apache.org/) [[GitHub]](https://github.com/apache/cordova-android/) + - [MUI](http://dev.dcloud.net.cn/mui/) [[GitHub]](https://github.com/dcloudio/mui/) + - [React Native](https://facebook.github.io/react-native/) [[GitHub]](https://github.com/facebook/react-native/) + - [Ionic](http://ionicframework.com/) [[GitHub]](https://github.com/driftyco/ionic/) + - Desktop Application Development + - [Electron](http://electron.atom.io/) [[GitHub]](https://github.com/atom/electron) + - [NW.js](http://nwjs.io/) [[GitHub]](https://github.com/nwjs/nw.js) + + diff --git a/README.zh-cn.md b/README.zh-cn.md new file mode 100644 index 0000000..1153031 --- /dev/null +++ b/README.zh-cn.md @@ -0,0 +1,334 @@ +# 爆栈 +系统开发技术栈、Web前端开发技术栈、数据库技术栈、.NET技术栈！ +http://overflowstack.github.io + +# 本地化 +English: +https://github.com/unruledboy/WebFrontEndStack/ + +中文博客: +http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html + +Español: +https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md + + +# Web前端技术栈 +比较全面的浏览器、平台、类库、框架、工具等。 + +![Image of Web Front End Stack](Web Front End Stack.zh-cn.png) + +# 自行生成预览图 + +## 准备环境 +您应该安装Visual Studio 2010+。 + +1. 安装 [nodejs](https://nodejs.org). + +2. 安装 [Phantomjs](http://phantomjs.org). + +3. 安装 [Python 2.7](https://www.python.org/). + +4. ``npm install`` + +如果出现错误，您可以检查 [phantomjs-node] 的依赖(https://github.com/sgentle/phantomjs-node/wiki), [node-gyp](https://github.com/TooTallNate/node-gyp#installation). + +## 运行命令 +``npm start`` 运行服务并直接打开主html文件。 + +``npm run build`` 生成预览图。 + + +## 选项 +``` + + -h, --help Display this message. + -p, --port number (Default: 3000) Set the port what express listening. + -ues, --update_existed_stargazers (Default: false) Update project's stargazers including existed. + --phantomjs The task to generate the image. + --readme The task to update readme. + --updatestargazers The task to update the count of the stargazers. + +``` + +# 为什么？ +大家是否想过： +* Web前端开发究竟包含哪些技术呢？ +* 我所掌握的技术这个子集，在Web前端技术大系这个超集里面占的比例是多少呢？ +* 我究竟还没有掌握多少Web前端技术呢？ +* 面试的时候会考哪些技术呢？ + + +那么，Web前端开发是否也应该有这样的技术栈概览图呢？搜索了很久，没有找到一个符合我要求的“较为全面”地表述Web前端技术大系的图表。所以我们自行设计了这个Web前端技术栈。 + +这个图表里的分类未必准确，相关技术也难免会有遗漏，欢迎大家指点以便不断改进。 + +Web前端技术实在太繁多限于篇幅，，这里没有罗列一些技术。 + +您可以点击下面链接查看交互式预览图(用鼠标移动/缩放/点击节点打开相关网站)： + +https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm?locale=zh-cn + + +# Web前端技术栈 + + +- Web前端开发技术栈 + - 浏览器 + - [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) + - [Chrome](http://www.google.com/chrome/) + - [Firefox](https://www.mozilla.org/) + - [Safari](http://www.apple.com/safari/) + - [Opera](http://www.opera.com/) + - [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) + - [Netscape ;-)](https://en.wikipedia.org/wiki/Netscape) + - 协议 + - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) + - 链接 + - 会话 + - 授权 + - 请求 + - 响应 + - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) + - 压缩 + - 打包 + - 服务器端推送 + - WebSocket + - Web三剑客 + - HTML (HyperText Markup Language) + - CSS (Cascading Style Sheets) + - JavaScript + - 标准 + - W3C + - HTML + - CSS + - XHTML + - XML + - 核心概念 + - HTML + - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) + - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) + - Attribute + - JavaScript + - [Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) + - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) + - [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) + - [JSON (JavaSript Object Notation)](https://developer.mozilla.org/en-US/docs/Glossary/JSON) + - [AJAX (Asynchronous JavaScript and XML)](https://developer.mozilla.org/en-US/docs/AJAX) + - CSS + - Selector + - Priority + - Specificity + - Box Model + - 渲染引擎 + - [Trident (IE)](https://en.wikipedia.org/wiki/Trident_(layout_engine)) + - [Blink / prev. WebKit (Chrome)](http://www.chromium.org/blink) + - [Gecko (Firefox)](https://developer.mozilla.org/en-us/docs/Mozilla/Gecko) + - [WebKit (Safari)](http://www.webkit.org/) + - [Blink / prev. Presto (Opera)](http://www.chromium.org/blink) + - [EdgeHTML (Edge)](https://en.wikipedia.org/wiki/EdgeHTML) + - 脚本引擎 + - [JScript (IE8- / ASP)](https://en.wikipedia.org/wiki/JScript) + - [Chakra (IE9+ / Edge)](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) + - [V8 (Chrome / Opera / Nodejs / MongoDB)](https://developers.google.com/v8/?hl=zh-CN) [[GitHub]](https://github.com/v8/v8/) + - [SpiderMonkey (Firefox)]( https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey) + - [JavaScriptCore (Safari)](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) + - 运行时 + - Cookie + - Local Cache + - Session Storage + - Local Storage + - Components + - Extensions + - Plugins + - Resources + - Images + - Icons + - Fonts + - Audios + - Videos + - 编辑器 + - [Sublime Text](http://www.sublimetext.com/) + - [WebStorm](https://www.jetbrains.com/webstorm/) + - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) + - [Vim](http://www.vim.org/) + - [Emacs](https://www.gnu.org/software/emacs/) + - [Brackets](http://brackets.io/) [[GitHub]](https://github.com/adobe/brackets/) + - [Light Table](http://lighttable.com/) [[GitHub]](https://github.com/LightTable/LightTable/) + - [Visual Studio](https://www.visualstudio.com/) + - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) + - Dreamweaver ;-) + - FrontPage / SharePoint Designer ;-) + - 编译任务 + - 精简 + - 编译 + - 合并 + - 混淆 + - 图像优化 + - 单元测试 + - 编译工具 + - [Grunt](http://www.gruntjs.com/) [[GitHub]](https://github.com/cowboy/jquery-tiny-pubsub/) + - [Gulp](http://gulpjs.com/) [[GitHub]](https://github.com/gulpjs/gulp/) + - [Brunch](http://brunch.io/) [[GitHub]](https://github.com/brunch/brunch/) + - [Yeoman](http://yeoman.io/) + - Broccoli [[GitHub]](https://github.com/broccolijs/broccoli/) + - 调试 + - [Developer Tools](https://developer.chrome.com/devtools) + - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) + - 基础工具 + - [Node.js](https://nodejs.org/) [[GitHub]](https://github.com/joyent/node/) + - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) + - [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) + - 质量控制 + - [JSLint](http://www.jslint.com/) [[GitHub]](https://github.com/douglascrockford/JSLint/) + - [JSHint](http://jshint.com/) [[GitHub]](https://github.com/jshint/jshint/) + - [jscs](http://jscs.info/) [[GitHub]](https://github.com/jscs-dev/node-jscs) + - [Closure Linter](https://developers.google.com/closure/utilities/) + - 包管理 + - [npm](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) + - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) + - 测试 + - 工具 + - [QUnit](https://qunitjs.com/) [[GitHub]](https://github.com/jquery/qunit/) + - [Jasmine](http://jasmine.github.io/) [[GitHub]](https://github.com/jasmine/jasmine/) + - [Mocha](https://mochajs.org/) [[GitHub]](https://github.com/mochajs/mocha/) + - [Selenium](http://www.seleniumhq.org/) [[GitHub]](https://github.com/SeleniumHQ/selenium/) + - [WebDriverIO](http://webdriver.io/) [[GitHub]](https://github.com/webdriverio/webdriverio/) + - [Protractor](http://www.protractortest.org/) + - [Chai](http://chaijs.com/) [[GitHub]](https://github.com/jfirebaugh/konacha/) + - [Sinon.JS](http://sinonjs.org/) [[GitHub]](https://github.com/cjohansen/Sinon.JS/) + - [Karma](http://karma-runner.github.io/) [[GitHub]](https://github.com/karma-runner/karma/) + - nodeunit [[GitHub]](https://github.com/caolan/nodeunit/) + - tape [[GitHub]](http://github.com/substack/tape) + - [nightmare](http://nightmarejs.org/) [[GitHub]](https://github.com/segmentio/nightmare) + - 在线工具 + - [Sauce Labs](https://saucelabs.com/) + - [Browser Stack](https://www.browserstack.com/) + - [Browser Shots](http://browsershots.org/) + - [Browserling](https://www.browserling.com/) + - [Browser Sandbox](https://spoon.net/browsers/) + - [Cross Browser Testing](https://crossbrowsertesting.com/) + - [Browsera](http://www.browsera.com/) + - [SortSite](http://www.powermapper.com/products/sortsite/checks/browser-compatibility/) + - 库 / 框架 + - 基础库 + - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) + - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) + - [Zepto](http://zeptojs.com/) [[GitHub]](https://github.com/madrobby/zepto/) + - [MooTool](http://mootools.net/) [[GitHub]](https://github.com/mootools/mootools-core/) + - 模块化 + - ES6 Module + - CommonJS + - [webpack](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) + - [browserify](http://browserify.org/) [[GitHub]](https://github.com/substack/node-browserify/) + - AMD + - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) + - UMD + - umd [[GitHub]](https://github.com/umdjs/umd/) + - 框架 + - [AngularJS](https://angularjs.org/) [[GitHub]](https://github.com/angular/angular.js/) + - [Backbone](http://backbonejs.org/) [[GitHub]](https://github.com/jashkenas/backbone/) + - [Knockout](http://knockoutjs.com/) [[GitHub]](https://github.com/SteveSanderson/knockout/) + - [Ember](http://emberjs.com/) [[GitHub]](https://github.com/emberjs/ember.js/) + - [React](http://facebook.github.io/react/) [[GitHub]](https://github.com/facebook/react/) + - [polymer](https://www.polymer-project.org/) [[GitHub]](https://github.com/polymer/polymer/) + - [Deft.js](http://deftjs.org/) [[GitHub]](https://github.com/deftjs/DeftJS/) + - [Vue](http://vuejs.org/) [[GitHub]](https://github.com/yyx990803/vue/) + - [Riot](http://riotjs.com/) [[GitHub]](https://github.com/riot/riot) + - UI框架 + - [Bootstrap](http://getbootstrap.com/) [[GitHub]](https://github.com/twbs/bootstrap/) + - [Semantic UI](http://semantic-ui.com/) [[GitHub]](https://github.com/Semantic-Org/Semantic-UI/) + - [Foundation](http://foundation.zurb.com/) [[GitHub]](https://github.com/zurb/foundation/) + - [Material UI](http://material-ui.com/) [[GitHub]](https://github.com/callemall/material-ui/) + - [WinJS](https://dev.windows.com/en-us/develop/winjs) [[GitHub]](https://github.com/winjs/winjs) + - [Pure](http://purecss.io/) [[GitHub]](https://github.com/yahoo/pure/) + - [Amaze UI](http://amazeui.org/) [[GitHub]](https://github.com/allmobilize/amazeui) + - WebSocket + - [Socket.io](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) + - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) + - 数据可视化 + - [D3](http://d3js.org/) [[GitHub]](https://github.com/mbostock/d3/wiki/Gallery/) + - [Echarts](http://echarts.baidu.com) [[GitHub]](https://github.com/ecomfe/esl/) + - [HighCharts](http://www.highcharts.com/) [[GitHub]](https://github.com/highslide-software/highcharts.com/) + - [Vis.js](http://visjs.org/) [[GitHub]](https://github.com/almende/vis/) + - [Flot](http://www.flotcharts.org/) [[GitHub]](https://github.com/flot/flot/) + - WebGL + - [Three.js](http://threejs.org/) [[GitHub]](https://github.com/mrdoob/three.js/) + - [Babylon.js](http://www.babylonjs.com/) [[GitHub]](https://github.com/BabylonJS/Babylon.js/) + - [Pixi.js](http://www.pixijs.com/) [[GitHub]](https://github.com/GoodBoyDigital/pixi.js/) + - CSS3 动画 + - [Animate.css](https://daneden.github.io/animate.css/) [[GitHub]](https://github.com/daneden/animate.css/) + - [bounce.js](http://bouncejs.com/) [[GitHub]](https://github.com/tictail/bounce.js/) + - [Effeckt.css](https://h5bp.github.io/Effeckt.css/) [[GitHub]](https://github.com/h5bp/Effeckt.css/) + - [move.js](https://visionmedia.github.io/move.js/) [[GitHub]](https://github.com/visionmedia/move.js/) + - 流程控制 + - ES6 + - Promise + - Generator + - ES7 + - yield + - await + - async [[GitHub]](https://github.com/caolan/async/) + - co [[GitHub]](https://github.com/tj/co/) + - Promise + - Bluebird [[GitHub]](https://github.com/petkaantonov/bluebird/) + - q [[GitHub]](https://github.com/kriskowal/q/) + - when.js [[GitHub]](https://github.com/cujojs/when/) + - 函数式编程 + - [bacon.js](http://baconjs.github.io/) [[GitHub]](https://github.com/baconjs/bacon.js/) + - [immutable.js](https://facebook.github.io/immutable-js/) [[GitHub]](https://github.com/facebook/immutable-js/) + - [ramda](http://ramdajs.com/) [[GitHub]](http://github.com/ramda/ramda) + - [underscore.js](http://underscorejs.org/) [[GitHub]](https://github.com/jashkenas/underscore) + - [lodash](https://lodash.com/) [[GitHub]](https://github.com/lodash/lodash) + - [ReactiveX](http://reactivex.io/) [[GitHub]](https://github.com/Reactive-Extensions/RxJS) + - 手机 UI 框架 + - [jQuery Mobile](https://jquerymobile.com/) [[GitHub]](https://github.com/jquery/jquery-mobile/) + - [Jo](http://joapp.com/) [[GitHub]](https://github.com/davebalmer/jo/) + - [Dojo Mobile](https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) + - [Lungo](http://lungo.tapquo.com/) [[GitHub]](https://github.com/tapquo/Lungo.js/) + - CSS 预处理器 + - LESS + - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) + - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) + - Sass(SCSS) + - [Compass](http://compass-style.org/) [[GitHub]](https://github.com/chriseppstein/compass/) + - [Bourbon](http://bourbon.io/) [[GitHub]](https://github.com/thoughtbot/bourbon/) + - [Gumby](http://www.gumbyframework.com/) [[GitHub]](https://github.com/GumbyFramework/Gumby/) + - Stylus + - nib [[GitHub]](https://github.com/tj/nib/) + - 未来标准 + - [babel](https://babeljs.io/) [[GitHub]](https://github.com/babel/babel) + - 模板引擎 + - [Handlebars](http://handlebarsjs.com/) [[GitHub]](https://github.com/wycats/handlebars.js/) + - [Haml](http://haml.info/) [[GitHub]](https://github.com/haml/haml/) + - [Slim](http://slim-lang.com/) [[GitHub]](https://github.com/slim-template/slim/) + - [Jade](http://jade-lang.com/) [[GitHub]](https://github.com/jadejs/jade/) + - [Ejs](http://www.embeddedjs.com/) + - [Spacebars](http://meteorcapture.com/spacebars/) + - [mustache](http://mustache.github.io/) [[GitHub]](https://github.com/janl/mustache.js/) + - 统一化 + - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) + - Reset + - 最佳实践 + - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) + - Responsiveness + - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) + - 安全 + - Sandbox + - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) + - [CORS](http://www.w3.org/TR/cors/) + - 中间语言 + - [CoffeeScript](http://coffeescript.org/) [[GitHub]](https://github.com/jashkenas/coffeescript/) + - [TypeScript](http://www.typescriptlang.org/) [[GitHub]](https://github.com/Microsoft/TypeScript/) + - ClojureScript [[GitHub]](https://github.com/clojure/clojurescript/) + - [JSX (Facebook)](http://facebook.github.io/react/docs/jsx-in-depth.html) + - 移动应用开发 + - [PhoneGap / Cordova](https://cordova.apache.org/) [[GitHub]](https://github.com/apache/cordova-android/) + - [MUI](http://dev.dcloud.net.cn/mui/) [[GitHub]](https://github.com/dcloudio/mui/) + - [React Native](https://facebook.github.io/react-native/) [[GitHub]](https://github.com/facebook/react-native/) + - [Ionic](http://ionicframework.com/) [[GitHub]](https://github.com/driftyco/ionic/) + - 桌面应用开发 + - [Electron](http://electron.atom.io/) [[GitHub]](https://github.com/atom/electron) + - [NW.js](http://nwjs.io/) [[GitHub]](https://github.com/nwjs/nw.js) + + diff --git a/Web Front End Stack.es-es.png b/Web Front End Stack.es-es.png new file mode 100644 index 0000000..58809ce Binary files /dev/null and b/Web Front End Stack.es-es.png differ diff --git a/Web Front End Stack.png b/Web Front End Stack.png index 96876dd..172b9d0 100644 Binary files a/Web Front End Stack.png and b/Web Front End Stack.png differ diff --git a/Web Front End Stack.pptm b/Web Front End Stack.pptm deleted file mode 100644 index 934c93a..0000000 Binary files a/Web Front End Stack.pptm and /dev/null differ diff --git a/Web Front End Stack.zh-cn.png b/Web Front End Stack.zh-cn.png new file mode 100644 index 0000000..da4aa92 Binary files /dev/null and b/Web Front End Stack.zh-cn.png differ diff --git a/index.js b/index.js new file mode 100644 index 0000000..e99f91d --- /dev/null +++ b/index.js @@ -0,0 +1,294 @@ +/* global require, setTimeout, console, __dirname, process*/ +/** + * Builder + * @author zsx + */ +(function () { + "use strict"; + + const pageWidth = 2000; // Magic number! + const pageHeight = 3800; + + let Express = require('express'); + let path = require('path'); + let phantom = require("phantomjs-promise"); + let request = require("request"); + let async = require("async"); + let fs = require('fs'); + let commandLineArgs = require("command-line-args"); + + let app = new Express(); + + let cli = commandLineArgs([{ + name: "help", + alias: "h", + type: Boolean, + defaultOption: true, + description: "Display this message." + }, { + name: "port", + alias: "p", + type: Number, + defaultValue: 3000, + description: "(Default: 3000) Set the port what express listening." + }, { + name: "update_existed_stargazers", + alias: "ues", + type: Boolean, + defaultValue: false, + description: "(Default: false) Update project's stargazers including existed." + }, { + name: "phantomjs", + type: Boolean, + defaultValue: false, + description: "The task to generate the image." + }, { + name: "readme", + type: Boolean, + defaultValue: false, + description: "The task to update readme." + }, { + name: "updatestargazers", + type: Boolean, + defaultValue: false, + description: "The task to update the count of the stargazers." + }]); + let options = cli.parse(); + let httpServer = "http://127.0.0.1:" + options.port + "/"; + + let languages = []; + let jsonData = JSON.parse(fs.readFileSync('./ux/WebFrontEndStack.json', "utf-8")); // Require will lock the file. + + /** + * Tiemout + * @param int ms + * @return Promise + */ + function timeout(ms) { + return new Promise((resolve, reject) => { + setTimeout(resolve, ms, 'done'); + }); + } + /** + * Recursion to generate readme + * @param object object + * @param string language + * @param int deep + * @return string + */ + function buildReadme(object, language, deep) { + let deeper = deep + 1; + let deepString = new Array(deeper).join("\t") + "- "; + let ret = []; + let lang = ""; + if (object.languages) { + lang = object.languages[language]; + } + lang = lang || object.name; + + ret.push((function (deepString, name, url, github) { + let haveUrl = !!url; + let haveGitHub = !!github; + let ret = []; + ret.push(deepString); + ret.push((haveUrl ? "[" : "") + name + (haveUrl ? "](" + url + ")" : "")); + ret.push((haveGitHub ? " [\[GitHub\]](" + github + ")" : "")); + return ret.join(""); + })(deepString, lang, object.url, object.github)); + + if (object.children) { + object.children.map((value, index) => { + ret.push(buildReadme(value, language, deeper)); + }); + } + return ret.join("\n"); + } + + /** + * Update the stargazers of the GitHub repo + * Be careful! There have the rate limit! + * @see https://developer.github.com/v3/#increasing-the-unauthenticated-rate-limit-for-oauth-applications + * @return Promise + */ + function updatestargazers() { + return new Promise((resolve, reject) => { + + function getGitHubApi(github) { + let githubArray = github.split("/"); + // I want a sprintf T_T + return "https://api.github.com/repos/" + githubArray[3] + "/" + githubArray[4]; + } + + + let q = async.queue(function (object, callback) { + if (!object.github || (!options.update_existed_stargazers && object.stargazers)) { + callback(false); + return; + } + let githubUrl = getGitHubApi(object.github); + console.log("Getting " + githubUrl); + request({ + url: githubUrl, + headers: { + "User-Agent": "https://github.com/unruledboy/WebFrontEndStack" // GitHub required user-agent + } + }, (err, res, body) => { + if (!err && res.statusCode == 200) { + let json = JSON.parse(body); + if (json === null) { + callback(false); + return; + } + object.stargazers = json.stargazers_count; + callback(true); + } else { + if (res.statusCode == 403) { // Out of API limit! + console.error("Out of GitHub API limit!"); + console.error("The limit will be reset when " + new Date(res.headers['x-ratelimit-reset'] * 1000)); + q.kill(); + reject("Out of GitHub API limit!"); + } + callback(false); + } + }); + + }, 5); + q.drain = function () { + fs.writeFileSync('./ux/WebFrontEndStack.json', JSON.stringify(jsonData), "utf-8"); + resolve(); + }; + function addQueue(object) { + q.push(object, (noErr) => { + if (noErr) console.log(object.name + " = " + object.stargazers); + }); + if (object.children) { + object.children.forEach((val) => { + addQueue(val); + }); + } + } + addQueue(jsonData); + + return q; + }); + } + /** + * For running phantomjs to take a screenshot for the webpage + * @return Promise + */ + function phantomjs(language) { + let displayLanguage = language === "" ? "en" : language; + let promise = new Promise((resolve, reject) => { + return phantom.createAsync().then((phantom) => { + return phantom.createPageAsync(); + }).then((objects) => { + console.log("Setting viewportSize.."); + return objects.page.setAsync('viewportSize', { + width: pageWidth, + height: pageHeight + }); + }).then((objects) => { + console.log("Opening " + httpServer + "?locale=" + language + " for " + displayLanguage); + return objects.page.openAsync(httpServer + "?locale=" + language); + }).then((objects) => { + console.log("Rendered HTML, the image will be saved after 2 seconds."); + if (objects.ret[0] != "success") { + throw objects.ret[0]; + } + return timeout(2000).then(() => { + return objects.page.renderAsync(path.join(__dirname, 'Web Front End Stack' + (language === "" ? "" : ".") + language + '.png')); + }); + }).then((objects) => { + console.log("The image(" + displayLanguage + ") saved successfully!"); + objects.page.close(); + objects.phantom.exit(); + resolve(); + }); + }); + return promise; + + } + + + /** + * To rebuild the README.md + * @return Promise + */ + function readme(language) { + let extension = (language === "" ? "" : ".") + language; + let promise = new Promise((resolve, reject) => { + fs.readFile('./README' + extension + '.md', "utf-8", (err, content) => { + if (err) return reject(err); + resolve(content); + }); + }); + return promise.then((fileContent) => { + let ret = buildReadme(jsonData, language, 0); + fileContent = fileContent.replace(/<\!--BUILD_START-->[\d\D]+?<\!--BUILD_END-->/, "{%BuildStart%}"); + fs.writeFileSync('./README' + extension + '.md', fileContent.replace("{%BuildStart%}", "\n\n" + ret + "\n\n", "utf-8")); + console.log('Readme (' + language + ') built successfully!'); + }); + } + + + /** + * To start an express server + * @return Promise + */ + function server() { + return new Promise((resolve, reject) => { + return app + .set('port', options.port) + .set('view engine', 'html') + .use(Express.static(path.join(__dirname, '/ux'))) + .use('/', function (req, res) { + res.redirect('/WebFrontEndStack.htm?locale=' + req.query.locale); + }) + .listen(options.port, function () { + console.info('Express started on: http://127.0.0.1:' + options.port); + resolve(app); + }); + }); + } + + if (options.help) { + let usage = cli.getUsage({ + title: "Generator" + }); + console.log(usage); + return; + } + + let queue = []; + queue.push(server()); + + // Firstly, check languages. + + languages.push(""); + for (let item in jsonData.languages) { + languages.push(item); + } + + languages.map((val) => { + if (options.phantomjs) { + queue.push(phantomjs(val)); + } + if (options.readme) { + queue.push(readme(val)); + } + }); + + if (options.updatestargazers) { + queue.push(updatestargazers()); + } + + let promise = Promise.all(queue); + + if (queue.length > 1) { // for somebody who only want to start the server. + console.log("You can press Ctrl+C to exit if tasks finished."); + promise.then(() => { + console.log("OK!"); + process.exit(0); + }); + } +})(); diff --git a/package.json b/package.json new file mode 100644 index 0000000..c01eba2 --- /dev/null +++ b/package.json @@ -0,0 +1,39 @@ +{ + "name": "WebFrontEndStack", + "version": "2.0.0", + "description": "Generate a image for web front-end stack.", + "main": "index.js", + "scripts": { + "build": "node index --phantomjs --readme", + "start": "node index" + }, + "repository": { + "type": "git", + "url": "https://github.com/unruledboy/WebFrontEndStack.git" + }, + "keywords": [ + "Web", + "FrontEnd", + "Stack" + ], + "author": [ + "unruledboy ", + "zsx " + ], + "license": "ISC", + "bugs": { + "url": "https://github.com/unruledboy/WebFrontEndStack/issues" + }, + "homepage": "https://github.com/unruledboy/WebFrontEndStack", + "dependencies": { + "async": "^1.4.2", + "command-line-args": "^1.0.1", + "express": "^4.13.3", + "phantomjs-promise": "0.0.1", + "request": "^2.61.0" + }, + "devDependencies": { + "phantomjs": "^1.9.18", + "weak": "^1.0.0" + } +} diff --git a/ux/WebFrontEndStack.htm b/ux/WebFrontEndStack.htm new file mode 100644 index 0000000..26ded2c --- /dev/null +++ b/ux/WebFrontEndStack.htm @@ -0,0 +1,109 @@ + + + + + + Web Front End Stack + + + + + + + + + +
+
+
+

Web Front-end Stack v2.5

+
+
+

Wilson Chen (twitter@unruleboy) - unruledboy@gmail.com

+

zsx (GitHub@zsxsoft) - zsx@zsxsoft.com

+
+
+
+
+ + + diff --git a/ux/WebFrontEndStack.json b/ux/WebFrontEndStack.json new file mode 100644 index 0000000..f2e9017 --- /dev/null +++ b/ux/WebFrontEndStack.json @@ -0,0 +1,1119 @@ +{ + "name": "Web Front End", + "languages": { + "zh-cn": "Web前端开发技术栈", + "es-es": "Web Front End" + }, + "children": [{ + "name": "Browser", + "languages": { + "zh-cn": "浏览器", + "es-es": "Navegadores" + }, + "children": [{ + "name": "Internet Explorer", + "url": "http://windows.microsoft.com/en-us/internet-explorer/download-ie" + }, { + "name": "Chrome", + "url": "http://www.google.com/chrome/" + }, { + "name": "Firefox", + "url": "https://www.mozilla.org/" + }, { + "name": "Safari", + "url": "http://www.apple.com/safari/" + }, { + "name": "Opera", + "url": "http://www.opera.com/" + }, { + "name": "Edge", + "url": "https://www.microsoft.com/en-us/windows/microsoft-edge" + }, { + "name": "Netscape ;-)", + "url": "https://en.wikipedia.org/wiki/Netscape" + }] + }, { + "name": "Protocol", + "languages": { + "zh-cn": "协议", + "es-es": "Protocolos" + }, + "children": [{ + "name": "HTTP/1.1", + "url": "https://www.ietf.org/rfc/rfc2616.txt", + "children": [{ + "name": "URI", + "languages": { + "zh-cn": "链接" + } + }, { + "name": "Session", + "languages": { + "zh-cn": "会话", + "es-es": "Sesión" + } + }, { + "name": "Authentication", + "languages": { + "zh-cn": "授权", + "es-es": "Autenticación" + } + }, { + "name": "Request", + "languages": { + "zh-cn": "请求", + "es-es": "Petición" + } + }, { + "name": "Response", + "languages": { + "zh-cn": "响应", + "es-es": "Respuesta" + } + }] + }, { + "name": "HTTP/2", + "url": "https://en.wikipedia.org/wiki/HTTP/2", + "children": [{ + "name": "Compression", + "languages": { + "zh-cn": "压缩", + "es-es": "Compresión" + } + }, { + "name": "Minification", + "languages": { + "zh-cn": "打包", + "es-es": "Minificación" + } + }, { + "name": "Server Push", + "languages": { + "zh-cn": "服务器端推送" + } + }] + }, { + "name": "WebSocket" + }] + }, { + "name": "The 3 Pillars", + "languages": { + "zh-cn": "Web三剑客" + }, + "children": [{ + "name": "HTML (HyperText Markup Language)" + }, { + "name": "CSS (Cascading Style Sheets)" + }, { + "name": "JavaScript" + }] + }, { + "name": "Standards", + "languages": { + "zh-cn": "标准", + "es-es": "Estándares" + }, + "children": [{ + "name": "W3C", + "children": [{ + "name": "HTML" + }, { + "name": "CSS" + }, { + "name": "XHTML" + }, { + "name": "XML" + }] + }] + }, { + "name": "Core Concepts", + "languages": { + "zh-cn": "核心概念", + "es-es": "Conceptons principales" + }, + "children": [{ + "name": "HTML", + "children": [{ + "name": "DOM", + "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" + }, { + "name": "Element", + "url": "https://developer.mozilla.org/en-US/docs/Web/API/Element" + }, { + "name": "Attribute" + }] + }, { + "name": "JavaScript", + "children": [{ + "name": "Prototype", + "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype" + }, { + "name": "Scope", + "url": "https://developer.mozilla.org/en-US/docs/Glossary/Scope" + }, { + "name": "Closure", + "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" + }, { + "name": "JSON (JavaSript Object Notation)", + "url": "https://developer.mozilla.org/en-US/docs/Glossary/JSON" + }, { + "name": "AJAX (Asynchronous JavaScript and XML)", + "url": "https://developer.mozilla.org/en-US/docs/AJAX" + }] + }, { + "name": "CSS", + "children": [{ + "name": "Selector" + }, { + "name": "Priority" + }, { + "name": "Specificity" + }, { + "name": "Box Model" + }] + }] + }, { + "name": "Rendering Engine", + "languages": { + "zh-cn": "渲染引擎", + "es-es": "Motores de renderizado" + }, + "children": [{ + "name": "Trident (IE)", + "url": "https://en.wikipedia.org/wiki/Trident_(layout_engine)" + }, { + "name": "Blink / prev. WebKit (Chrome)", + "url": "http://www.chromium.org/blink", + "github": "" + }, { + "name": "Gecko (Firefox)", + "url": "https://developer.mozilla.org/en-us/docs/Mozilla/Gecko" + }, { + "name": "WebKit (Safari)", + "url": "http://www.webkit.org/" + }, { + "name": "Blink / prev. Presto (Opera)", + "url": "http://www.chromium.org/blink", + "github": "" + }, { + "name": "EdgeHTML (Edge)", + "url": "https://en.wikipedia.org/wiki/EdgeHTML" + }] + }, { + "name": "JavaScript Engine", + "languages": { + "zh-cn": "脚本引擎", + "es-es": "Motores JavaScript" + }, + "children": [{ + "name": "JScript (IE8- / ASP)", + "url": "https://en.wikipedia.org/wiki/JScript" + }, { + "name": "Chakra (IE9+ / Edge)", + "url": "https://en.wikipedia.org/wiki/Chakra_(JScript_engine)" + }, { + "name": "V8 (Chrome / Opera / Nodejs / MongoDB)", + "url": "https://developers.google.com/v8/?hl=zh-CN", + "github": "https://github.com/v8/v8/", + "stargazers": 2577 + }, { + "name": "SpiderMonkey (Firefox)", + "url": " https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey" + }, { + "name": "JavaScriptCore (Safari)", + "url": "https://en.wikipedia.org/wiki/WebKit#JavaScriptCore" + }] + }, { + "name": "Runtime", + "languages": { + "zh-cn": "运行时", + "es-es": "Tiempo de ejecución" + }, + "children": [{ + "name": "Cookie" + }, { + "name": "Local Cache" + }, { + "name": "Session Storage" + }, { + "name": "Local Storage" + }, { + "name": "Components", + "languages": { + "es-es": "Componentes" + }, + "children": [{ + "name": "Extensions", + "languages": { + "es-es": "Extensiones" + } + }, { + "name": "Plugins" + }] + }, { + "name": "Resources", + "children": [{ + "name": "Images" + }, { + "name": "Icons" + }, { + "name": "Fonts" + }, { + "name": "Audios" + }, { + "name": "Videos" + }] + }] + }, { + "name": "Editors", + "languages": { + "zh-cn": "编辑器", + "es-es": "Editores de texto" + }, + "children": [{ + "name": "Sublime Text", + "url": "http://www.sublimetext.com/" + }, { + "name": "WebStorm", + "url": "https://www.jetbrains.com/webstorm/" + }, { + "name": "Atom", + "url": "https://atom.io/", + "github": "https://github.com/atom/atom/", + "stargazers": 19510 + }, { + "name": "Vim", + "url": "http://www.vim.org/" + }, { + "name": "Emacs", + "url": "https://www.gnu.org/software/emacs/" + }, { + "name": "Brackets", + "url": "http://brackets.io/", + "github": "https://github.com/adobe/brackets/", + "stargazers": 23091 + }, { + "name": "Light Table", + "url": "http://lighttable.com/", + "github": "https://github.com/LightTable/LightTable/", + "stargazers": 7926 + }, { + "name": "Visual Studio", + "url": "https://www.visualstudio.com/" + }, { + "name": "Visual Studio Code (Linux & Mac)", + "url": "https://code.visualstudio.com/", + "github": "https://github.com/Microsoft/vscode", + "stargazers": 6652 + }, { + "name": "Dreamweaver ;-)" + }, { + "name": "FrontPage / SharePoint Designer ;-)" + }] + }, { + "name": "Build Tasks", + "languages": { + "zh-cn": "编译任务" + }, + "children": [{ + "name": "Minification", + "languages": { + "zh-cn": "精简", + "es-es": "Minificación" + } + }, { + "name": "Compilation", + "languages": { + "zh-cn": "编译", + "es-es": "Compilación" + } + }, { + "name": "Concatenation", + "languages": { + "zh-cn": "合并", + "es-es": "Concatenación" + } + }, { + "name": "Uglification", + "languages": { + "zh-cn": "混淆" + } + }, { + "name": "Image Optimization", + "languages": { + "zh-cn": "图像优化", + "es-es": "Optimización de imágenes" + } + }, { + "name": "Unit Testing", + "languages": { + "zh-cn": "单元测试", + "es-es": "Tests unitarios" + } + }] + }, { + "name": "Build Tools", + "languages": { + "zh-cn": "编译工具", + "es-es": "Herramientas de tareas" + }, + "children": [{ + "name": "Grunt", + "url": "http://www.gruntjs.com/", + "github": "https://github.com/cowboy/jquery-tiny-pubsub/", + "stargazers": 662 + }, { + "name": "Gulp", + "url": "http://gulpjs.com/", + "github": "https://github.com/gulpjs/gulp/", + "stargazers": 15661 + }, { + "name": "Brunch", + "url": "http://brunch.io/", + "github": "https://github.com/brunch/brunch/", + "stargazers": 4472 + }, { + "name": "Yeoman", + "url": "http://yeoman.io/" + }, { + "name": "Broccoli", + "github": "https://github.com/broccolijs/broccoli/", + "stargazers": 2391 + }] + }, { + "name": "Debug", + "languages": { + "zh-cn": "调试", + "es-es": "Depuración" + }, + "children": [{ + "name": "Developer Tools", + "url": "https://developer.chrome.com/devtools" + }, { + "name": "Firebug", + "url": "http://getfirebug.com/", + "github": "https://github.com/firebug/firebug/", + "stargazers": 924 + }] + }, { + "name": "Base Tools", + "languages": { + "zh-cn": "基础工具", + "es-es": "Herramientas base" + }, + "children": [{ + "name": "Node.js", + "url": "https://nodejs.org/", + "github": "https://github.com/joyent/node/", + "stargazers": 37851 + }, { + "name": "Phantom.js", + "url": "http://phantomjs.org/", + "github": "https://github.com/ariya/phantomjs/", + "stargazers": 14950 + }, { + "name": "SpiderMonkey", + "url": "https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" + }] + }, { + "name": "Quality", + "languages": { + "zh-cn": "质量控制", + "es-es": "Calidad" + }, + "children": [{ + "name": "JSLint", + "url": "http://www.jslint.com/", + "github": "https://github.com/douglascrockford/JSLint/", + "stargazers": 2382 + }, { + "name": "JSHint", + "url": "http://jshint.com/", + "github": "https://github.com/jshint/jshint/", + "stargazers": 5384 + }, { + "name": "jscs", + "url": "http://jscs.info/", + "github": "https://github.com/jscs-dev/node-jscs", + "stargazers": 3982 + }, { + "name": "Closure Linter", + "url": "https://developers.google.com/closure/utilities/" + }] + }, { + "name": "Package", + "languages": { + "zh-cn": "包管理", + "es-es": "Gestores de paquetes" + }, + "children": [{ + "name": "npm", + "url": "https://www.npmjs.com/", + "github": "https://github.com/npm/npm/", + "stargazers": 6816 + }, { + "name": "Bower", + "url": "http://bower.io/", + "github": "https://github.com/bower/bower/", + "stargazers": 12747 + }] + }, { + "name": "Test", + "languages": { + "zh-cn": "测试" + }, + "children": [{ + "name": "Tools", + "languages": { + "zh-cn": "工具", + "es-es": "Herramientas" + }, + "children": [{ + "name": "QUnit", + "url": "https://qunitjs.com/", + "github": "https://github.com/jquery/qunit/", + "stargazers": 3228 + }, { + "name": "Jasmine", + "url": "http://jasmine.github.io/", + "github": "https://github.com/jasmine/jasmine/", + "stargazers": 9303 + }, { + "name": "Mocha", + "url": "https://mochajs.org/", + "github": "https://github.com/mochajs/mocha/", + "stargazers": 7226 + }, { + "name": "Selenium", + "url": "http://www.seleniumhq.org/", + "github": "https://github.com/SeleniumHQ/selenium/", + "stargazers": 1563 + }, { + "name": "WebDriverIO", + "url": "http://webdriver.io/", + "github": "https://github.com/webdriverio/webdriverio/", + "stargazers": 1073 + }, { + "name": "Protractor", + "url": "http://www.protractortest.org/" + }, { + "name": "Chai", + "url": "http://chaijs.com/", + "github": "https://github.com/jfirebaugh/konacha/", + "stargazers": 977 + }, { + "name": "Sinon.JS", + "url": "http://sinonjs.org/", + "github": "https://github.com/cjohansen/Sinon.JS/", + "stargazers": 2230 + }, { + "name": "Karma", + "url": "http://karma-runner.github.io/", + "github": "https://github.com/karma-runner/karma/", + "stargazers": 5550 + }, { + "name": "nodeunit", + "github": "https://github.com/caolan/nodeunit/", + "stargazers": 1608 + }, { + "name": "tape", + "github": "http://github.com/substack/tape", + "stargazers": 1264 + }, { + "name": "nightmare", + "url": "http://nightmarejs.org/", + "github": "https://github.com/segmentio/nightmare", + "stargazers": 6110 + }] + }, { + "name": "Composite", + "languages": { + "zh-cn": "在线工具" + }, + "children": [{ + "name": "Sauce Labs", + "url": "https://saucelabs.com/" + }, { + "name": "Browser Stack", + "url": "https://www.browserstack.com/" + }, { + "name": "Browser Shots", + "url": "http://browsershots.org/" + }, { + "name": "Browserling", + "url": "https://www.browserling.com/" + }, { + "name": "Browser Sandbox", + "url": "https://spoon.net/browsers/" + }, { + "name": "Cross Browser Testing", + "url": "https://crossbrowsertesting.com/" + }, { + "name": "Browsera", + "url": "http://www.browsera.com/" + }, { + "name": "SortSite", + "url": "http://www.powermapper.com/products/sortsite/checks/browser-compatibility/" + }] + }] + }, { + "name": "Frameworks / Libraries", + "languages": { + "zh-cn": "库 / 框架", + "es-es": "Librerías y frameworks" + }, + "children": [{ + "name": "JavaScript base library", + "languages": { + "zh-cn": "基础库" + }, + "children": [{ + "name": "jQuery", + "url": "https://jquery.com/", + "github": "https://github.com/jquery/jquery/", + "stargazers": 35652 + }, { + "name": "Prototype", + "url": "http://prototypejs.org/", + "github": "https://github.com/sstephenson/prototype/", + "stargazers": 3022 + }, { + "name": "Zepto", + "url": "http://zeptojs.com/", + "github": "https://github.com/madrobby/zepto/", + "stargazers": 9109 + }, { + "name": "MooTool", + "url": "http://mootools.net/", + "github": "https://github.com/mootools/mootools-core/", + "stargazers": 2168 + }] + }, { + "name": "Modular", + "languages": { + "zh-cn": "模块化", + "es-es": "Módulos" + }, + "children": [{ + "name": "ES6 Module" + }, { + "name": "CommonJS", + "children": [{ + "name": "webpack", + "url": "http://webpack.github.io/", + "github": "https://github.com/webpack/webpack/", + "stargazers": 7271 + }, { + "name": "browserify", + "url": "http://browserify.org/", + "github": "https://github.com/substack/node-browserify/", + "stargazers": 8004 + }] + }, { + "name": "AMD", + "children": [{ + "name": "RequireJS", + "url": "http://requirejs.org/", + "github": "https://github.com/jrburke/requirejs/", + "stargazers": 8002 + }] + }, { + "name": "UMD", + "children": [{ + "name": "umd", + "github": "https://github.com/umdjs/umd/", + "stargazers": 2764 + }] + }] + }, { + "name": "JavaScript Framework", + "languages": { + "zh-cn": "框架" + }, + "children": [{ + "name": "AngularJS", + "url": "https://angularjs.org/", + "github": "https://github.com/angular/angular.js/", + "stargazers": 41780 + }, { + "name": "Backbone", + "url": "http://backbonejs.org/", + "github": "https://github.com/jashkenas/backbone/", + "stargazers": 22720 + }, { + "name": "Knockout", + "url": "http://knockoutjs.com/", + "github": "https://github.com/SteveSanderson/knockout/", + "stargazers": 6660 + }, { + "name": "Ember", + "url": "http://emberjs.com/", + "github": "https://github.com/emberjs/ember.js/", + "stargazers": 14555 + }, { + "name": "React", + "url": "http://facebook.github.io/react/", + "github": "https://github.com/facebook/react/", + "stargazers": 26617 + }, { + "name": "polymer", + "url": "https://www.polymer-project.org/", + "github": "https://github.com/polymer/polymer/", + "stargazers": 12217 + }, { + "name": "Deft.js", + "url": "http://deftjs.org/", + "github": "https://github.com/deftjs/DeftJS/", + "stargazers": 308 + }, { + "name": "Vue", + "url": "http://vuejs.org/", + "github": "https://github.com/yyx990803/vue/", + "stargazers": 6261 + }, { + "name": "Riot", + "url": "http://riotjs.com/", + "github": "https://github.com/riot/riot", + "stargazers": 7875 + }] + }, { + "name": "UI framework", + "languages": { + "zh-cn": "UI框架" + }, + "children": [{ + "name": "Bootstrap", + "url": "http://getbootstrap.com/", + "github": "https://github.com/twbs/bootstrap/", + "stargazers": 84763 + }, { + "name": "Semantic UI", + "url": "http://semantic-ui.com/", + "github": "https://github.com/Semantic-Org/Semantic-UI/", + "stargazers": 19552 + }, { + "name": "Foundation", + "url": "http://foundation.zurb.com/", + "github": "https://github.com/zurb/foundation/", + "stargazers": 20711 + }, { + "name": "Material UI", + "url": "http://material-ui.com/", + "github": "https://github.com/callemall/material-ui/", + "stargazers": 10048 + }, { + "name": "WinJS", + "url": "https://dev.windows.com/en-us/develop/winjs", + "github": "https://github.com/winjs/winjs", + "stargazers": 3621 + }, { + "name": "Pure", + "url": "http://purecss.io/", + "github": "https://github.com/yahoo/pure/", + "stargazers": 12367 + }, { + "name": "Amaze UI", + "url": "http://amazeui.org/", + "github": "https://github.com/allmobilize/amazeui", + "stargazers": 5965 + }] + }, { + "name": "WebSocket", + "children": [{ + "name": "Socket.io", + "url": "http://socket.io/", + "github": "https://github.com/Automattic/socket.io/", + "stargazers": 19169 + }, { + "name": "web-socket-js", + "github": "https://github.com/gimite/web-socket-js/", + "stargazers": 2115 + }] + }, { + "name": "Data Visualization", + "languages": { + "zh-cn": "数据可视化", + "es-es": "Visualización de datos" + }, + "children": [{ + "name": "D3", + "url": "http://d3js.org/", + "github": "https://github.com/mbostock/d3/wiki/Gallery/", + "stargazers": 40794 + }, { + "name": "Echarts", + "url": "http://echarts.baidu.com", + "github": "https://github.com/ecomfe/esl/", + "stargazers": 396 + }, { + "name": "HighCharts", + "url": "http://www.highcharts.com/", + "github": "https://github.com/highslide-software/highcharts.com/", + "stargazers": 4041 + }, { + "name": "Vis.js", + "url": "http://visjs.org/", + "github": "https://github.com/almende/vis/", + "stargazers": 2993 + }, { + "name": "Flot", + "url": "http://www.flotcharts.org/", + "github": "https://github.com/flot/flot/", + "stargazers": 4531 + }] + }, { + "name": "WebGL", + "children": [{ + "name": "Three.js", + "url": "http://threejs.org/", + "github": "https://github.com/mrdoob/three.js/", + "stargazers": 20758 + }, { + "name": "Babylon.js", + "url": "http://www.babylonjs.com/", + "github": "https://github.com/BabylonJS/Babylon.js/", + "stargazers": 2349 + }, { + "name": "Pixi.js", + "url": "http://www.pixijs.com/", + "github": "https://github.com/GoodBoyDigital/pixi.js/", + "stargazers": 8361 + }] + }, { + "name": "CSS3 Animation", + "languages": { + "zh-cn": "CSS3 动画" + }, + "children": [{ + "name": "Animate.css", + "url": "https://daneden.github.io/animate.css/", + "github": "https://github.com/daneden/animate.css/", + "stargazers": 24549 + }, { + "name": "bounce.js", + "url": "http://bouncejs.com/", + "github": "https://github.com/tictail/bounce.js/", + "stargazers": 3727 + }, { + "name": "Effeckt.css", + "url": "https://h5bp.github.io/Effeckt.css/", + "github": "https://github.com/h5bp/Effeckt.css/", + "stargazers": 9777 + }, { + "name": "move.js", + "url": "https://visionmedia.github.io/move.js/", + "github": "https://github.com/visionmedia/move.js/", + "stargazers": 2830 + }] + }, { + "name": "Flow Controller", + "languages": { + "zh-cn": "流程控制", + "es-es": "Control de flujo" + }, + "children": [{ + "name": "ES6", + "children": [{ + "name": "Promise" + }, { + "name": "Generator" + }] + }, { + "name": "ES7", + "children": [{ + "name": "yield" + }, { + "name": "await" + }] + }, { + "name": "async", + "github": "https://github.com/caolan/async/", + "stargazers": 14156 + }, { + "name": "co", + "github": "https://github.com/tj/co/", + "stargazers": 3502 + }, { + "name": "Promise", + "children": [{ + "name": "Bluebird", + "github": "https://github.com/petkaantonov/bluebird/", + "stargazers": 7530 + }, { + "name": "q", + "github": "https://github.com/kriskowal/q/", + "stargazers": 9460 + }, { + "name": "when.js", + "github": "https://github.com/cujojs/when/", + "stargazers": 2579 + }] + }] + }, { + "name": "Functional", + "languages": { + "zh-cn": "函数式编程", + "es-es": "Funcional" + }, + "children": [{ + "name": "bacon.js", + "url": "http://baconjs.github.io/", + "github": "https://github.com/baconjs/bacon.js/", + "stargazers": 4498 + }, { + "name": "immutable.js", + "url": "https://facebook.github.io/immutable-js/", + "github": "https://github.com/facebook/immutable-js/", + "stargazers": 7999 + }, { + "name": "ramda", + "url": "http://ramdajs.com/", + "github": "http://github.com/ramda/ramda", + "stargazers": 2792 + }, { + "name": "underscore.js", + "url": "http://underscorejs.org/", + "github": "https://github.com/jashkenas/underscore", + "stargazers": 15823 + }, { + "name": "lodash", + "url": "https://lodash.com/", + "github": "https://github.com/lodash/lodash", + "stargazers": 11071 + }, { + "name": "ReactiveX", + "url": "http://reactivex.io/", + "github": "https://github.com/Reactive-Extensions/RxJS", + "stargazers": 6720 + }] + }, { + "name": "Mobile UI", + "languages": { + "zh-cn": "手机 UI 框架" + }, + "children": [{ + "name": "jQuery Mobile", + "url": "https://jquerymobile.com/", + "github": "https://github.com/jquery/jquery-mobile/", + "stargazers": 9654 + }, { + "name": "Jo", + "url": "http://joapp.com/", + "github": "https://github.com/davebalmer/jo/", + "stargazers": 1227 + }, { + "name": "Dojo Mobile", + "url": "https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html" + }, { + "name": "Lungo", + "url": "http://lungo.tapquo.com/", + "github": "https://github.com/tapquo/Lungo.js/", + "stargazers": 2457 + }] + }] + }, { + "name": "CSS Pre-processors", + "languages": { + "zh-cn": "CSS 预处理器", + "es-es": "Pre-procesadores CSS" + }, + "children": [{ + "name": "LESS", + "children": [{ + "name": "LESS", + "url": "http://lesscss.org/", + "github": "https://github.com/less/less.js/", + "stargazers": 12679 + }, { + "name": "Hat", + "url": "http://lesshat.madebysource.com/", + "github": "https://github.com/csshat/lesshat/", + "stargazers": 2057 + }] + }, { + "name": "Sass(SCSS)", + "children": [{ + "name": "Compass", + "url": "http://compass-style.org/", + "github": "https://github.com/chriseppstein/compass/", + "stargazers": 6406 + }, { + "name": "Bourbon", + "url": "http://bourbon.io/", + "github": "https://github.com/thoughtbot/bourbon/", + "stargazers": 6178 + }, { + "name": "Gumby", + "url": "http://www.gumbyframework.com/", + "github": "https://github.com/GumbyFramework/Gumby/", + "stargazers": 2920 + }] + }, { + "name": "Stylus", + "children": [{ + "name": "nib", + "github": "https://github.com/tj/nib/", + "stargazers": 1520 + }] + }] + }, { + "name": "Future Standards", + "languages": { + "zh-cn": "未来标准" + }, + "children": [{ + "name": "babel", + "github": "https://github.com/babel/babel", + "url": "https://babeljs.io/", + "stargazers": 9712 + }] + }, { + "name": "Template", + "languages": { + "zh-cn": "模板引擎", + "es-es": "Plantillas" + }, + "children": [{ + "name": "Handlebars", + "url": "http://handlebarsjs.com/", + "github": "https://github.com/wycats/handlebars.js/", + "stargazers": 8808 + }, { + "name": "Haml", + "url": "http://haml.info/", + "github": "https://github.com/haml/haml/", + "stargazers": 2778 + }, { + "name": "Slim", + "url": "http://slim-lang.com/", + "github": "https://github.com/slim-template/slim/", + "stargazers": 3480 + }, { + "name": "Jade", + "url": "http://jade-lang.com/", + "github": "https://github.com/jadejs/jade/", + "stargazers": 8958 + }, { + "name": "Ejs", + "url": "http://www.embeddedjs.com/" + }, { + "name": "Spacebars", + "url": "http://meteorcapture.com/spacebars/" + }, { + "name": "mustache", + "url": "http://mustache.github.io/", + "github": "https://github.com/janl/mustache.js/", + "stargazers": 8139 + }] + }, { + "name": "Modernisation", + "languages": { + "zh-cn": "统一化" + }, + "children": [{ + "name": "Normalize", + "url": "http://necolas.github.io/normalize.css/", + "github": "https://github.com/necolas/normalize.css/", + "stargazers": 17966 + }, { + "name": "Reset" + }] + }, { + "name": "Best Practices", + "languages": { + "zh-cn": "最佳实践", + "es-es": "Buenas prácticas" + }, + "children": [{ + "name": "SEO", + "url": "https://en.wikipedia.org/wiki/Search_engine_optimization" + }, { + "name": "Responsiveness" + }, { + "name": "CDN", + "url": "https://en.wikipedia.org/wiki/Content_delivery_network" + }] + }, { + "name": "Security", + "languages": { + "zh-cn": "安全", + "es-es": "Seguridad" + }, + "children": [{ + "name": "Sandbox" + }, { + "name": "XSS", + "url": "https://en.wikipedia.org/wiki/Cross-site_scripting" + }, { + "name": "CORS", + "url": "http://www.w3.org/TR/cors/" + }] + }, { + "name": "Intermediate Languages", + "languages": { + "zh-cn": "中间语言", + "es-es": "Lenguajes intermedios" + }, + "children": [{ + "name": "CoffeeScript", + "url": "http://coffeescript.org/", + "github": "https://github.com/jashkenas/coffeescript/", + "stargazers": 11755 + }, { + "name": "TypeScript", + "url": "http://www.typescriptlang.org/", + "github": "https://github.com/Microsoft/TypeScript/", + "stargazers": 6379 + }, { + "name": "ClojureScript", + "github": "https://github.com/clojure/clojurescript/", + "stargazers": 4876 + }, { + "name": "JSX (Facebook)", + "url": "http://facebook.github.io/react/docs/jsx-in-depth.html" + }] + }, { + "name": "Mobile Application Development", + "languages": { + "zh-cn": "移动应用开发", + "es-es": "Empaquetadores de Apps para móvil" + }, + "children": [{ + "name": "PhoneGap / Cordova", + "url": "https://cordova.apache.org/", + "github": "https://github.com/apache/cordova-android/", + "stargazers": 1166 + }, { + "name": "MUI", + "url": "http://dev.dcloud.net.cn/mui/", + "github": "https://github.com/dcloudio/mui/", + "stargazers": 1476 + }, { + "name": "React Native", + "url": "https://facebook.github.io/react-native/", + "github": "https://github.com/facebook/react-native/", + "stargazers": 19802 + }, { + "name": "Ionic", + "url": "http://ionicframework.com/", + "github": "https://github.com/driftyco/ionic/", + "stargazers": 19472 + }] + }, { + "name": "Desktop Application Development", + "languages": { + "zh-cn": "桌面应用开发" + }, + "children": [{ + "name": "Electron", + "url": "http://electron.atom.io/", + "github": "https://github.com/atom/electron", + "stargazers": 16896 + }, { + "name": "NW.js", + "url": "http://nwjs.io/", + "github": "https://github.com/nwjs/nw.js", + "stargazers": 24680 + }] + }] +} diff --git a/ux/dndTree.js b/ux/dndTree.js new file mode 100644 index 0000000..3e5c8e0 --- /dev/null +++ b/ux/dndTree.js @@ -0,0 +1,568 @@ + +(function() { + var isPhantom = /PhantomJS/ig.test(navigator.userAgent); + var locale = location.search.split("locale=").pop().split("&").shift(); + + var parseName = function(object) { + if (!object.languages) return object.name; + return object.languages[locale] || object.name; + } + + // Get JSON data + var treeJSON = d3.json('WebFrontEndStack.json', function(error, treeData) { + + // Calculate total nodes, max label length + var totalNodes = 0; + var maxLabelLength = []; + // variables for drag/drop + var selectedNode = null; + var draggingNode = null; + // panning variables + var panSpeed = 200; + var panBoundary = 20; // Within 20px from edges will pan when dragging. + // Misc. variables + var i = 0; + var duration = 750; + var root; + + // size of the diagram + var viewerWidth = $(document).width(); + var viewerHeight = $(document).height(); + + var tree = d3.layout.tree() + .size([viewerHeight, viewerWidth]); + + // define a d3 diagonal projection for use by the node paths later on. + var diagonal = d3.svg.diagonal() + .projection(function(d) { + return [d.y, d.x]; + }); + + // A recursive helper function for performing some setup by walking through all nodes + + function visit(parent, visitFn, childrenFn, depth) { + if (!parent) return; + + visitFn(parent, depth); + + var children = childrenFn(parent); + if (children) { + var count = children.length; + var d = depth + 1; + for (var i = 0; i < count; i++) { + visit(children[i], visitFn, childrenFn, d); + } + } + } + + // Call visit function to establish maxLabelLength + visit(treeData, function(d, depth) { + totalNodes++; + if (maxLabelLength[depth] == undefined) + maxLabelLength[depth] = 0; + maxLabelLength[depth] = Math.max(parseName(d).length, maxLabelLength[depth]); + }, function(d) { + return d.children && d.children.length > 0 ? d.children : null; + }, 0); + + + // sort the tree according to the node names + + function sortTree() { + tree.sort(function(a, b) { + return parseName(b).toLowerCase() < parseName(a).toLowerCase() ? 1 : -1; + }); + } + // Sort the tree initially incase the JSON isn't in a sorted order. + //sortTree(); + + // TODO: Pan function, can be better implemented. + + function pan(domNode, direction) { + var speed = panSpeed; + if (panTimer) { + clearTimeout(panTimer); + translateCoords = d3.transform(svgGroup.attr("transform")); + if (direction == 'left' || direction == 'right') { + translateX = direction == 'left' ? translateCoords.translate[0] + speed : translateCoords.translate[0] - speed; + translateY = translateCoords.translate[1]; + } else if (direction == 'up' || direction == 'down') { + translateX = translateCoords.translate[0]; + translateY = direction == 'up' ? translateCoords.translate[1] + speed : translateCoords.translate[1] - speed; + } + scaleX = translateCoords.scale[0]; + scaleY = translateCoords.scale[1]; + scale = zoomListener.scale(); + svgGroup.transition().attr("transform", "translate(" + translateX + "," + translateY + ")scale(" + scale + ")"); + d3.select(domNode).select('g.node').attr("transform", "translate(" + translateX + "," + translateY + ")"); + zoomListener.scale(zoomListener.scale()); + zoomListener.translate([translateX, translateY]); + panTimer = setTimeout(function() { + pan(domNode, speed, direction); + }, 50); + } + } + + // Define the zoom function for the zoomable tree + + function zoom() { + svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); + } + + + // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents + var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom); + + function initiateDrag(d, domNode) { + draggingNode = d; + d3.select(domNode).select('.ghostCircle').attr('pointer-events', 'none'); + d3.selectAll('.ghostCircle').attr('class', 'ghostCircle show'); + d3.select(domNode).attr('class', 'node activeDrag'); + + svgGroup.selectAll("g.node").sort(function(a, b) { // select the parent and sort the path's + if (a.id != draggingNode.id) return 1; // a is not the hovered element, send "a" to the back + else return -1; // a is the hovered element, bring "a" to the front + }); + // if nodes has children, remove the links and nodes + if (nodes.length > 1) { + // remove link paths + links = tree.links(nodes); + nodePaths = svgGroup.selectAll("path.link") + .data(links, function(d) { + return d.target.id; + }).remove(); + // remove child nodes + nodesExit = svgGroup.selectAll("g.node") + .data(nodes, function(d) { + return d.id; + }).filter(function(d, i) { + if (d.id == draggingNode.id) { + return false; + } + return true; + }).remove(); + } + + // remove parent link + parentLink = tree.links(tree.nodes(draggingNode.parent)); + svgGroup.selectAll('path.link').filter(function(d, i) { + if (d.target.id == draggingNode.id) { + return true; + } + return false; + }).remove(); + + dragStarted = null; + } + + // define the baseSvg, attaching a class for styling and the zoomListener + var baseSvg = d3.select("#tree-container").append("svg:svg") + .attr("width", viewerWidth) + .attr("height", viewerHeight) + .attr("class", "overlay") + .call(zoomListener) + + + // Define the drag listeners for drag/drop behaviour of nodes. + dragListener = d3.behavior.drag() + .on("dragstart", function(d) { + if (d == root) { + return; + } + dragStarted = true; + nodes = tree.nodes(d); + d3.event.sourceEvent.stopPropagation(); + // it's important that we suppress the mouseover event on the node being dragged. Otherwise it will absorb the mouseover event and the underlying node will not detect it d3.select(this).attr('pointer-events', 'none'); + }) + .on("drag", function(d) { + if (d == root) { + return; + } + if (dragStarted) { + domNode = this; + initiateDrag(d, domNode); + } + + // get coords of mouseEvent relative to svg container to allow for panning + relCoords = d3.mouse($('svg').get(0)); + if (relCoords[0] < panBoundary) { + panTimer = true; + pan(this, 'left'); + } else if (relCoords[0] > ($('svg').width() - panBoundary)) { + + panTimer = true; + pan(this, 'right'); + } else if (relCoords[1] < panBoundary) { + panTimer = true; + pan(this, 'up'); + } else if (relCoords[1] > ($('svg').height() - panBoundary)) { + panTimer = true; + pan(this, 'down'); + } else { + try { + clearTimeout(panTimer); + } catch (e) { + + } + } + + d.x0 += d3.event.dy; + d.y0 += d3.event.dx; + var node = d3.select(this); + node.attr("transform", "translate(" + d.y0 + "," + d.x0 + ")"); + updateTempConnector(); + }).on("dragend", function(d) { + if (d == root) { + return; + } + domNode = this; + if (selectedNode) { + // now remove the element from the parent, and insert it into the new elements children + var index = draggingNode.parent.children.indexOf(draggingNode); + if (index > -1) { + draggingNode.parent.children.splice(index, 1); + } + if (typeof selectedNode.children !== 'undefined' || typeof selectedNode._children !== 'undefined') { + if (typeof selectedNode.children !== 'undefined') { + selectedNode.children.push(draggingNode); + } else { + selectedNode._children.push(draggingNode); + } + } else { + selectedNode.children = []; + selectedNode.children.push(draggingNode); + } + // Make sure that the node being added to is expanded so user can see added node is correctly moved + expand(selectedNode); + sortTree(); + endDrag(); + } else { + endDrag(); + } + }); + + function endDrag() { + selectedNode = null; + d3.selectAll('.ghostCircle').attr('class', 'ghostCircle'); + d3.select(domNode).attr('class', 'node'); + // now restore the mouseover event or we won't be able to drag a 2nd time + d3.select(domNode).select('.ghostCircle').attr('pointer-events', ''); + updateTempConnector(); + if (draggingNode !== null) { + update(root); + centerNode(draggingNode); + draggingNode = null; + } + } + + // Helper functions for collapsing and expanding nodes. + + function collapse(d) { + if (d.children) { + d._children = d.children; + d._children.forEach(collapse); + d.children = null; + } + } + + function expand(d) { + if (d._children) { + d.children = d._children; + d.children.forEach(expand); + d._children = null; + } + } + + var overCircle = function(d) { + selectedNode = d; + updateTempConnector(); + }; + var outCircle = function(d) { + selectedNode = null; + updateTempConnector(); + }; + + // Function to update the temporary connector indicating dragging affiliation + var updateTempConnector = function() { + var data = []; + if (draggingNode !== null && selectedNode !== null) { + // have to flip the source coordinates since we did this for the existing connectors on the original tree + data = [{ + source: { + x: selectedNode.y0, + y: selectedNode.x0 + }, + target: { + x: draggingNode.y0, + y: draggingNode.x0 + } + }]; + } + var link = svgGroup.selectAll(".templink").data(data); + + link.enter().append("path") + .attr("class", "templink") + .attr("d", d3.svg.diagonal()) + .attr('pointer-events', 'none'); + + link.attr("d", d3.svg.diagonal()); + + link.exit().remove(); + }; + + // Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children. + + function centerNode(source) { + scale = zoomListener.scale(); + + x = -source.y0; + y = -source.x0; + x = x * scale + viewerWidth / 2; + y = y * scale + viewerHeight / 2; + d3.select('g').transition() + .duration(duration) + .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")"); + zoomListener.scale(scale); + zoomListener.translate([x, y]); + } + + function leftNode(source) { + scale = zoomListener.scale(); + + x = 100 * scale; + y = source.y0 * scale; + console.log(x); + + d3.select('g').transition() + .duration(duration) + .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")"); + zoomListener.scale(scale); + zoomListener.translate([x, y]); + } + + // Toggle children function + + function toggleChildren(d) { + if (d.children) { + d._children = d.children; + d.children = null; + } else if (d._children) { + d.children = d._children; + d._children = null; + } + return d; + } + + // Toggle children on click. + + function click(d) { + if (d3.event.defaultPrevented) return; // click suppressed + d = toggleChildren(d); + update(d); + centerNode(d); + } + + function update(source) { + // Compute the new height, function counts total children of root node and sets tree height accordingly. + // This prevents the layout looking squashed when new nodes are made visible or looking sparse when nodes are removed + // This makes the layout more consistent. + var levelWidth = [1]; + var childCount = function(level, n) { + + if (n.children && n.children.length > 0) { + if (levelWidth.length <= level + 1) levelWidth.push(0); + + levelWidth[level + 1] += n.children.length; + n.children.forEach(function(d) { + childCount(level + 1, d); + }); + } + }; + childCount(0, root); + var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line + tree = tree.size([newHeight, viewerWidth]); + + // Compute the new tree layout. + var nodes = tree.nodes(root).reverse(), + links = tree.links(nodes); + + // Set widths between levels based on maxLabelLength. + nodes.forEach(function(d) { + var labelLength = 0; + for (var j = 0; j <= d.depth; j++) { + labelLength += maxLabelLength[j]; + } + d.y = labelLength * 10; //maxLabelLength * 10px + // alternatively to keep a fixed scale one can set a fixed depth per level + // Normalize for fixed-depth by commenting out below line + // d.y = (d.depth * 500); //500px per level. + }); + + // Update the nodes… + node = svgGroup.selectAll("g.node") + .data(nodes, function(d) { + return d.id || (d.id = ++i); + }); + + // Enter any new nodes at the parent's previous position. + var nodeEnter = node.enter().append("g") + .call(dragListener) + .attr("class", "node") + .attr("transform", function(d) { + return "translate(" + source.y0 + "," + source.x0 + ")"; + }) + .on('click', click) + .append("a") + .attr("xlink:href", function(d) { + return d.url || d.github; + }) + .attr("target", "_blank"); + + nodeEnter.append("circle") + .attr('class', 'nodeCircle') + .attr("r", 0) + .style("fill", function(d) { + return d._children ? "lightsteelblue" : "#fff"; + }); + + nodeEnter.append("text") + .attr("x", function(d) { + return d.children || d._children ? -10 : 10; + }) + .attr("dy", ".35em") + .attr('class', 'nodeText') + .attr("text-anchor", function(d) { + return d.children || d._children ? "end" : "start"; + }) + .text(function(d) { + return parseName(d); + }) + .style("fill-opacity", 0); + + // phantom node to give us mouseover in a radius around it + nodeEnter.append("circle") + .attr('class', 'ghostCircle') + .attr("r", 30) + .attr("opacity", 0.2) // change this to zero to hide the target area + .style("fill", "red") + .attr('pointer-events', 'mouseover') + .on("mouseover", function(node) { + overCircle(node); + }) + .on("mouseout", function(node) { + outCircle(node); + }); + + // Update the text to reflect whether node has children or not. + node.select('text') + .attr("x", function(d) { + return d.children || d._children ? -10 : 10; + }) + .attr("text-anchor", function(d) { + return d.children || d._children ? "end" : "start"; + }) + .text(function(d) { + return parseName(d); + }); + + // Change the circle fill depending on whether it has children and is collapsed + node.select("circle.nodeCircle") + .attr("r", 4.5) + .style("fill", function(d) { + return d._children ? "lightsteelblue" : "#fff"; + }); + + // Transition nodes to their new position. + var nodeUpdate = node.transition() + .duration(duration) + .attr("transform", function(d) { + return "translate(" + d.y + "," + d.x + ")"; + }); + + // Fade the text in + nodeUpdate.select("text") + .style("fill-opacity", 1); + + // Transition exiting nodes to the parent's new position. + var nodeExit = node.exit().transition() + .duration(duration) + .attr("transform", function(d) { + return "translate(" + source.y + "," + source.x + ")"; + }) + .remove(); + + nodeExit.select("circle") + .attr("r", 0); + + nodeExit.select("text") + .style("fill-opacity", 0); + + // Update the links… + var link = svgGroup.selectAll("path.link") + .data(links, function(d) { + return d.target.id; + }); + + // Enter any new links at the parent's previous position. + link.enter().insert("path", "g") + .attr("class", "link") + .attr("d", function(d) { + var o = { + x: source.x0, + y: source.y0 + }; + return diagonal({ + source: o, + target: o + }); + }); + + // Transition links to their new position. + link.transition() + .duration(duration) + .attr("d", diagonal); + + // Transition exiting nodes to the parent's new position. + link.exit().transition() + .duration(duration) + .attr("d", function(d) { + var o = { + x: source.x, + y: source.y + }; + return diagonal({ + source: o, + target: o + }); + }) + .remove(); + + // Stash the old positions for transition. + nodes.forEach(function(d) { + d.x0 = d.x; + d.y0 = d.y; + }); + } + + // Append a group which holds all nodes and which the zoom Listener can act upon. + var svgGroup = baseSvg.append("g"); + + // Define the root + root = treeData; + root.x0 = viewerHeight / 2; + root.y0 = 0; + update(root); + + // Layout the tree initially and center on the root node. + if (isPhantom) { + zoomListener.scale(1.25); + leftNode(root); + } else { + zoomListener.scale(0.25); + centerNode(root); + } + + // + }); + +})();