├── .gitignore ├── LICENSE ├── README.es-es.md ├── README.md ├── README.zh-cn.md ├── Web Front End Stack.es-es.png ├── Web Front End Stack.png ├── Web Front End Stack.zh-cn.png ├── index.js ├── package.json └── ux ├── WebFrontEndStack.htm ├── WebFrontEndStack.json └── dndTree.js /.gitignore: -------------------------------------------------------------------------------- 1 | ~$* 2 | v1.1/WebFrontEndStackv1.1.zip 3 | node_modules 4 | npm-debug.log -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | 203 | -------------------------------------------------------------------------------- /README.es-es.md: -------------------------------------------------------------------------------- 1 | # Overflow Stack 2 | The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): 3 | http://overflowstack.github.io 4 | 5 | # Localization 6 | English: 7 | https://github.com/unruledboy/WebFrontEndStack/ 8 | 9 | 中文: 10 | https://github.com/unruledboy/WebFrontEndStack/blob/master/README.zh-cn.md 11 | 12 | Español: 13 | https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md 14 | 15 | 16 | # WebFrontEndStack 17 | Web front-end stack: navegadores, plataformas, librerías, frameworks, herramientas etc. 18 | 19 | ![Image of Web Front End Stack](Web Front End Stack.png) 20 | 21 | # Genera la imagen 22 | 23 | ## Prepara el entorno 24 | Tienes que tener instalado el Visual Studio 2010+ en Windows. 25 | 26 | 1. Instalar [nodejs](https://nodejs.org). 27 | 28 | 2. Instalar [Phantomjs](http://phantomjs.org). 29 | 30 | 3. Instalar [Python 2.7](https://www.python.org/). 31 | 32 | 4. ``npm install`` 33 | 34 | 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). 35 | 36 | ## Ejecución de comandos 37 | ``npm start`` para lanzar un servidor done ver el html. 38 | 39 | ``npm run build`` para generar la imagen. 40 | 41 | 42 | ## Opciones 43 | ### Uso 44 | node index task1 \[task2\] \[task3\] .. \[--option=value\] \[--option=value\] ... 45 | #### Tareas 46 | ##### phantomjs 47 | Genera la imagen 48 | ##### readme 49 | Reconstruye los README. 50 | ##### updatestargazers 51 | Actualiza los contadores de estrellas de los proyectos github. 52 | #### Opciones 53 | #### port 54 | Default: 3000 55 | #### update_existed_stargazers 56 | Default: false 57 | 58 | # ¿Por qué realizar esta tabla? 59 | Alguna vez te has preguntado: 60 | * ¿Cuantas tecnologías se incluyen en el desarrollo Front end? 61 | * ¿Cuantas conozco? 62 | 63 | 64 | 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. 65 | 66 | Puede que haya errores, en categorías, enlaces o en nombres de 67 | librerías, o puede que falte alguna que consideres importante, pero 68 | bonito es que puedes modificarlo y arreglarlo como quieras. 69 | 70 | Puedes encontrar una vista previa del gráfico aquí (usa el ratón para 71 | moverte / hacer zoom): 72 | 73 | https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm 74 | 75 | 76 | # The Web Front End Stack 77 | 78 | 79 | - Web Front End 80 | - Navegadores 81 | - [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) 82 | - [Chrome](http://www.google.com/chrome/) 83 | - [Firefox](https://www.mozilla.org/) 84 | - [Safari](http://www.apple.com/safari/) 85 | - [Opera](http://www.opera.com/) 86 | - [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) 87 | - [Netscape ;-)](https://en.wikipedia.org/wiki/Netscape) 88 | - Protocolos 89 | - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) 90 | - URI 91 | - Sesión 92 | - Autenticación 93 | - Petición 94 | - Respuesta 95 | - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) 96 | - Compresión 97 | - Minificación 98 | - Server Push 99 | - WebSocket 100 | - The 3 Pillars 101 | - HTML (HyperText Markup Language) 102 | - CSS (Cascading Style Sheets) 103 | - JavaScript 104 | - Estándares 105 | - W3C 106 | - HTML 107 | - CSS 108 | - XHTML 109 | - XML 110 | - Conceptons principales 111 | - HTML 112 | - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 113 | - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) 114 | - Attribute 115 | - JavaScript 116 | - [Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) 117 | - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) 118 | - [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) 119 | - [JSON (JavaSript Object Notation)](https://developer.mozilla.org/en-US/docs/Glossary/JSON) 120 | - [AJAX (Asynchronous JavaScript and XML)](https://developer.mozilla.org/en-US/docs/AJAX) 121 | - CSS 122 | - Selector 123 | - Priority 124 | - Specificity 125 | - Box Model 126 | - Motores de renderizado 127 | - [Trident (IE)](https://en.wikipedia.org/wiki/Trident_(layout_engine)) 128 | - [Blink / prev. WebKit (Chrome)](http://www.chromium.org/blink) 129 | - [Gecko (Firefox)](https://developer.mozilla.org/en-us/docs/Mozilla/Gecko) 130 | - [WebKit (Safari)](http://www.webkit.org/) 131 | - [Blink / prev. Presto (Opera)](http://www.chromium.org/blink) 132 | - [EdgeHTML (Edge)](https://en.wikipedia.org/wiki/EdgeHTML) 133 | - Motores JavaScript 134 | - [JScript (IE8- / ASP)](https://en.wikipedia.org/wiki/JScript) 135 | - [Chakra (IE9+ / Edge)](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) 136 | - [V8 (Chrome / Opera / Nodejs / MongoDB)](https://developers.google.com/v8/?hl=zh-CN) [[GitHub]](https://github.com/v8/v8/) 137 | - [SpiderMonkey (Firefox)]( https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey) 138 | - [JavaScriptCore (Safari)](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) 139 | - Tiempo de ejecución 140 | - Cookie 141 | - Local Cache 142 | - Session Storage 143 | - Local Storage 144 | - Componentes 145 | - Extensiones 146 | - Plugins 147 | - Resources 148 | - Images 149 | - Icons 150 | - Fonts 151 | - Audios 152 | - Videos 153 | - Editores de texto 154 | - [Sublime Text](http://www.sublimetext.com/) 155 | - [WebStorm](https://www.jetbrains.com/webstorm/) 156 | - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) 157 | - [Vim](http://www.vim.org/) 158 | - [Emacs](https://www.gnu.org/software/emacs/) 159 | - [Brackets](http://brackets.io/) [[GitHub]](https://github.com/adobe/brackets/) 160 | - [Light Table](http://lighttable.com/) [[GitHub]](https://github.com/LightTable/LightTable/) 161 | - [Visual Studio](https://www.visualstudio.com/) 162 | - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) 163 | - Dreamweaver ;-) 164 | - FrontPage / SharePoint Designer ;-) 165 | - Build Tasks 166 | - Minificación 167 | - Compilación 168 | - Concatenación 169 | - Uglification 170 | - Optimización de imágenes 171 | - Tests unitarios 172 | - Herramientas de tareas 173 | - [Grunt](http://www.gruntjs.com/) [[GitHub]](https://github.com/cowboy/jquery-tiny-pubsub/) 174 | - [Gulp](http://gulpjs.com/) [[GitHub]](https://github.com/gulpjs/gulp/) 175 | - [Brunch](http://brunch.io/) [[GitHub]](https://github.com/brunch/brunch/) 176 | - [Yeoman](http://yeoman.io/) 177 | - Broccoli [[GitHub]](https://github.com/broccolijs/broccoli/) 178 | - Depuración 179 | - [Developer Tools](https://developer.chrome.com/devtools) 180 | - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) 181 | - Herramientas base 182 | - [Node.js](https://nodejs.org/) [[GitHub]](https://github.com/joyent/node/) 183 | - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) 184 | - [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) 185 | - Calidad 186 | - [JSLint](http://www.jslint.com/) [[GitHub]](https://github.com/douglascrockford/JSLint/) 187 | - [JSHint](http://jshint.com/) [[GitHub]](https://github.com/jshint/jshint/) 188 | - [jscs](http://jscs.info/) [[GitHub]](https://github.com/jscs-dev/node-jscs) 189 | - [Closure Linter](https://developers.google.com/closure/utilities/) 190 | - Gestores de paquetes 191 | - [npm](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) 192 | - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) 193 | - Test 194 | - Herramientas 195 | - [QUnit](https://qunitjs.com/) [[GitHub]](https://github.com/jquery/qunit/) 196 | - [Jasmine](http://jasmine.github.io/) [[GitHub]](https://github.com/jasmine/jasmine/) 197 | - [Mocha](https://mochajs.org/) [[GitHub]](https://github.com/mochajs/mocha/) 198 | - [Selenium](http://www.seleniumhq.org/) [[GitHub]](https://github.com/SeleniumHQ/selenium/) 199 | - [WebDriverIO](http://webdriver.io/) [[GitHub]](https://github.com/webdriverio/webdriverio/) 200 | - [Protractor](http://www.protractortest.org/) 201 | - [Chai](http://chaijs.com/) [[GitHub]](https://github.com/jfirebaugh/konacha/) 202 | - [Sinon.JS](http://sinonjs.org/) [[GitHub]](https://github.com/cjohansen/Sinon.JS/) 203 | - [Karma](http://karma-runner.github.io/) [[GitHub]](https://github.com/karma-runner/karma/) 204 | - nodeunit [[GitHub]](https://github.com/caolan/nodeunit/) 205 | - tape [[GitHub]](http://github.com/substack/tape) 206 | - [nightmare](http://nightmarejs.org/) [[GitHub]](https://github.com/segmentio/nightmare) 207 | - Composite 208 | - [Sauce Labs](https://saucelabs.com/) 209 | - [Browser Stack](https://www.browserstack.com/) 210 | - [Browser Shots](http://browsershots.org/) 211 | - [Browserling](https://www.browserling.com/) 212 | - [Browser Sandbox](https://spoon.net/browsers/) 213 | - [Cross Browser Testing](https://crossbrowsertesting.com/) 214 | - [Browsera](http://www.browsera.com/) 215 | - [SortSite](http://www.powermapper.com/products/sortsite/checks/browser-compatibility/) 216 | - Librerías y frameworks 217 | - JavaScript base library 218 | - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) 219 | - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) 220 | - [Zepto](http://zeptojs.com/) [[GitHub]](https://github.com/madrobby/zepto/) 221 | - [MooTool](http://mootools.net/) [[GitHub]](https://github.com/mootools/mootools-core/) 222 | - Módulos 223 | - ES6 Module 224 | - CommonJS 225 | - [webpack](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) 226 | - [browserify](http://browserify.org/) [[GitHub]](https://github.com/substack/node-browserify/) 227 | - AMD 228 | - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) 229 | - UMD 230 | - umd [[GitHub]](https://github.com/umdjs/umd/) 231 | - JavaScript Framework 232 | - [AngularJS](https://angularjs.org/) [[GitHub]](https://github.com/angular/angular.js/) 233 | - [Backbone](http://backbonejs.org/) [[GitHub]](https://github.com/jashkenas/backbone/) 234 | - [Knockout](http://knockoutjs.com/) [[GitHub]](https://github.com/SteveSanderson/knockout/) 235 | - [Ember](http://emberjs.com/) [[GitHub]](https://github.com/emberjs/ember.js/) 236 | - [React](http://facebook.github.io/react/) [[GitHub]](https://github.com/facebook/react/) 237 | - [polymer](https://www.polymer-project.org/) [[GitHub]](https://github.com/polymer/polymer/) 238 | - [Deft.js](http://deftjs.org/) [[GitHub]](https://github.com/deftjs/DeftJS/) 239 | - [Vue](http://vuejs.org/) [[GitHub]](https://github.com/yyx990803/vue/) 240 | - [Riot](http://riotjs.com/) [[GitHub]](https://github.com/riot/riot) 241 | - UI framework 242 | - [Bootstrap](http://getbootstrap.com/) [[GitHub]](https://github.com/twbs/bootstrap/) 243 | - [Semantic UI](http://semantic-ui.com/) [[GitHub]](https://github.com/Semantic-Org/Semantic-UI/) 244 | - [Foundation](http://foundation.zurb.com/) [[GitHub]](https://github.com/zurb/foundation/) 245 | - [Material UI](http://material-ui.com/) [[GitHub]](https://github.com/callemall/material-ui/) 246 | - [WinJS](https://dev.windows.com/en-us/develop/winjs) [[GitHub]](https://github.com/winjs/winjs) 247 | - [Pure](http://purecss.io/) [[GitHub]](https://github.com/yahoo/pure/) 248 | - [Amaze UI](http://amazeui.org/) [[GitHub]](https://github.com/allmobilize/amazeui) 249 | - WebSocket 250 | - [Socket.io](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) 251 | - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) 252 | - Visualización de datos 253 | - [D3](http://d3js.org/) [[GitHub]](https://github.com/mbostock/d3/wiki/Gallery/) 254 | - [Echarts](http://echarts.baidu.com) [[GitHub]](https://github.com/ecomfe/esl/) 255 | - [HighCharts](http://www.highcharts.com/) [[GitHub]](https://github.com/highslide-software/highcharts.com/) 256 | - [Vis.js](http://visjs.org/) [[GitHub]](https://github.com/almende/vis/) 257 | - [Flot](http://www.flotcharts.org/) [[GitHub]](https://github.com/flot/flot/) 258 | - WebGL 259 | - [Three.js](http://threejs.org/) [[GitHub]](https://github.com/mrdoob/three.js/) 260 | - [Babylon.js](http://www.babylonjs.com/) [[GitHub]](https://github.com/BabylonJS/Babylon.js/) 261 | - [Pixi.js](http://www.pixijs.com/) [[GitHub]](https://github.com/GoodBoyDigital/pixi.js/) 262 | - CSS3 Animation 263 | - [Animate.css](https://daneden.github.io/animate.css/) [[GitHub]](https://github.com/daneden/animate.css/) 264 | - [bounce.js](http://bouncejs.com/) [[GitHub]](https://github.com/tictail/bounce.js/) 265 | - [Effeckt.css](https://h5bp.github.io/Effeckt.css/) [[GitHub]](https://github.com/h5bp/Effeckt.css/) 266 | - [move.js](https://visionmedia.github.io/move.js/) [[GitHub]](https://github.com/visionmedia/move.js/) 267 | - Control de flujo 268 | - ES6 269 | - Promise 270 | - Generator 271 | - ES7 272 | - yield 273 | - await 274 | - async [[GitHub]](https://github.com/caolan/async/) 275 | - co [[GitHub]](https://github.com/tj/co/) 276 | - Promise 277 | - Bluebird [[GitHub]](https://github.com/petkaantonov/bluebird/) 278 | - q [[GitHub]](https://github.com/kriskowal/q/) 279 | - when.js [[GitHub]](https://github.com/cujojs/when/) 280 | - Funcional 281 | - [bacon.js](http://baconjs.github.io/) [[GitHub]](https://github.com/baconjs/bacon.js/) 282 | - [immutable.js](https://facebook.github.io/immutable-js/) [[GitHub]](https://github.com/facebook/immutable-js/) 283 | - [ramda](http://ramdajs.com/) [[GitHub]](http://github.com/ramda/ramda) 284 | - [underscore.js](http://underscorejs.org/) [[GitHub]](https://github.com/jashkenas/underscore) 285 | - [lodash](https://lodash.com/) [[GitHub]](https://github.com/lodash/lodash) 286 | - [ReactiveX](http://reactivex.io/) [[GitHub]](https://github.com/Reactive-Extensions/RxJS) 287 | - Mobile UI 288 | - [jQuery Mobile](https://jquerymobile.com/) [[GitHub]](https://github.com/jquery/jquery-mobile/) 289 | - [Jo](http://joapp.com/) [[GitHub]](https://github.com/davebalmer/jo/) 290 | - [Dojo Mobile](https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) 291 | - [Lungo](http://lungo.tapquo.com/) [[GitHub]](https://github.com/tapquo/Lungo.js/) 292 | - Pre-procesadores CSS 293 | - LESS 294 | - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) 295 | - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) 296 | - Sass(SCSS) 297 | - [Compass](http://compass-style.org/) [[GitHub]](https://github.com/chriseppstein/compass/) 298 | - [Bourbon](http://bourbon.io/) [[GitHub]](https://github.com/thoughtbot/bourbon/) 299 | - [Gumby](http://www.gumbyframework.com/) [[GitHub]](https://github.com/GumbyFramework/Gumby/) 300 | - Stylus 301 | - nib [[GitHub]](https://github.com/tj/nib/) 302 | - Future Standards 303 | - [babel](https://babeljs.io/) [[GitHub]](https://github.com/babel/babel) 304 | - Plantillas 305 | - [Handlebars](http://handlebarsjs.com/) [[GitHub]](https://github.com/wycats/handlebars.js/) 306 | - [Haml](http://haml.info/) [[GitHub]](https://github.com/haml/haml/) 307 | - [Slim](http://slim-lang.com/) [[GitHub]](https://github.com/slim-template/slim/) 308 | - [Jade](http://jade-lang.com/) [[GitHub]](https://github.com/jadejs/jade/) 309 | - [Ejs](http://www.embeddedjs.com/) 310 | - [Spacebars](http://meteorcapture.com/spacebars/) 311 | - [mustache](http://mustache.github.io/) [[GitHub]](https://github.com/janl/mustache.js/) 312 | - Modernisation 313 | - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) 314 | - Reset 315 | - Buenas prácticas 316 | - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) 317 | - Responsiveness 318 | - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) 319 | - Seguridad 320 | - Sandbox 321 | - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) 322 | - [CORS](http://www.w3.org/TR/cors/) 323 | - Lenguajes intermedios 324 | - [CoffeeScript](http://coffeescript.org/) [[GitHub]](https://github.com/jashkenas/coffeescript/) 325 | - [TypeScript](http://www.typescriptlang.org/) [[GitHub]](https://github.com/Microsoft/TypeScript/) 326 | - ClojureScript [[GitHub]](https://github.com/clojure/clojurescript/) 327 | - [JSX (Facebook)](http://facebook.github.io/react/docs/jsx-in-depth.html) 328 | - Empaquetadores de Apps para móvil 329 | - [PhoneGap / Cordova](https://cordova.apache.org/) [[GitHub]](https://github.com/apache/cordova-android/) 330 | - [MUI](http://dev.dcloud.net.cn/mui/) [[GitHub]](https://github.com/dcloudio/mui/) 331 | - [React Native](https://facebook.github.io/react-native/) [[GitHub]](https://github.com/facebook/react-native/) 332 | - [Ionic](http://ionicframework.com/) [[GitHub]](https://github.com/driftyco/ionic/) 333 | - Desktop Application Development 334 | - [Electron](http://electron.atom.io/) [[GitHub]](https://github.com/atom/electron) 335 | - [NW.js](http://nwjs.io/) [[GitHub]](https://github.com/nwjs/nw.js) 336 | 337 | 338 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Overflow Stack 2 | The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): 3 | http://overflowstack.github.io 4 | 5 | # Localization 6 | 中文: 7 | https://github.com/unruledboy/WebFrontEndStack/blob/master/README.zh-cn.md 8 | 9 | Español: 10 | https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md 11 | 12 | 13 | # WebFrontEndStack 14 | Web front-end stack: browsers, platforms, libraries, frameworks, tools etc. 15 | 16 | ![Image of Web Front End Stack](Web Front End Stack.png) 17 | 18 | # Generate image yourself 19 | 20 | ## Prepare for environment 21 | You should have Visual Studio 2010+ installed in Windows. 22 | 23 | 1. Install [nodejs](https://nodejs.org). (Shoule be >= iojs 1.8.0) 24 | 25 | 2. Install [Phantomjs](http://phantomjs.org). 26 | 27 | 3. Install [Python 2.7](https://www.python.org/). 28 | 29 | 4. ``npm install`` 30 | 31 | 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). 32 | 33 | ## Run commands 34 | ``npm start`` for start a server to open the html directly. 35 | 36 | ``npm run build`` for generate the image. 37 | 38 | 39 | ## Options 40 | ```bash 41 | 42 | -h, --help Display help message. 43 | -p, --port number (Default: 3000) Set the port what express listening. 44 | -ues, --update_existed_stargazers (Default: false) Update project's stargazers including existed. 45 | --phantomjs The task to generate the image. 46 | --readme The task to update readme. 47 | --updatestargazers The task to update the count of the stargazers. 48 | 49 | ``` 50 | 51 | 52 | # What and why? 53 | Have you ever wondered: 54 | * what technologies web front end really includes? 55 | * how many do I possess? 56 | 57 | 58 | I could not find a really comprehensive diagram that shows the web front end technology stack, so I come up with my own version. 59 | 60 | There might be issues here and there, like the category, the individual ones, but the beauty is you can modify it as you want. 61 | 62 | You can have a graphical preview here (use mouse to move / zoom): 63 | 64 | https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm 65 | 66 | 67 | # The Web Front End Stack 68 | 69 | 70 | - Web Front End 71 | - Browser 72 | - [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) 73 | - [Chrome](http://www.google.com/chrome/) 74 | - [Firefox](https://www.mozilla.org/) 75 | - [Safari](http://www.apple.com/safari/) 76 | - [Opera](http://www.opera.com/) 77 | - [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) 78 | - [Netscape ;-)](https://en.wikipedia.org/wiki/Netscape) 79 | - Protocol 80 | - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) 81 | - URI 82 | - Session 83 | - Authentication 84 | - Request 85 | - Response 86 | - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) 87 | - Compression 88 | - Minification 89 | - Server Push 90 | - WebSocket 91 | - The 3 Pillars 92 | - HTML (HyperText Markup Language) 93 | - CSS (Cascading Style Sheets) 94 | - JavaScript 95 | - Standards 96 | - W3C 97 | - HTML 98 | - CSS 99 | - XHTML 100 | - XML 101 | - Core Concepts 102 | - HTML 103 | - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 104 | - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) 105 | - Attribute 106 | - JavaScript 107 | - [Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) 108 | - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) 109 | - [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) 110 | - [JSON (JavaSript Object Notation)](https://developer.mozilla.org/en-US/docs/Glossary/JSON) 111 | - [AJAX (Asynchronous JavaScript and XML)](https://developer.mozilla.org/en-US/docs/AJAX) 112 | - CSS 113 | - Selector 114 | - Priority 115 | - Specificity 116 | - Box Model 117 | - Rendering Engine 118 | - [Trident (IE)](https://en.wikipedia.org/wiki/Trident_(layout_engine)) 119 | - [Blink / prev. WebKit (Chrome)](http://www.chromium.org/blink) 120 | - [Gecko (Firefox)](https://developer.mozilla.org/en-us/docs/Mozilla/Gecko) 121 | - [WebKit (Safari)](http://www.webkit.org/) 122 | - [Blink / prev. Presto (Opera)](http://www.chromium.org/blink) 123 | - [EdgeHTML (Edge)](https://en.wikipedia.org/wiki/EdgeHTML) 124 | - JavaScript Engine 125 | - [JScript (IE8- / ASP)](https://en.wikipedia.org/wiki/JScript) 126 | - [Chakra (IE9+ / Edge)](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) 127 | - [V8 (Chrome / Opera / Nodejs / MongoDB)](https://developers.google.com/v8/?hl=zh-CN) [[GitHub]](https://github.com/v8/v8/) 128 | - [SpiderMonkey (Firefox)]( https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey) 129 | - [JavaScriptCore (Safari)](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) 130 | - Runtime 131 | - Cookie 132 | - Local Cache 133 | - Session Storage 134 | - Local Storage 135 | - Components 136 | - Extensions 137 | - Plugins 138 | - Resources 139 | - Images 140 | - Icons 141 | - Fonts 142 | - Audios 143 | - Videos 144 | - Editors 145 | - [Sublime Text](http://www.sublimetext.com/) 146 | - [WebStorm](https://www.jetbrains.com/webstorm/) 147 | - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) 148 | - [Vim](http://www.vim.org/) 149 | - [Emacs](https://www.gnu.org/software/emacs/) 150 | - [Brackets](http://brackets.io/) [[GitHub]](https://github.com/adobe/brackets/) 151 | - [Light Table](http://lighttable.com/) [[GitHub]](https://github.com/LightTable/LightTable/) 152 | - [Visual Studio](https://www.visualstudio.com/) 153 | - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) 154 | - Dreamweaver ;-) 155 | - FrontPage / SharePoint Designer ;-) 156 | - Build Tasks 157 | - Minification 158 | - Compilation 159 | - Concatenation 160 | - Uglification 161 | - Image Optimization 162 | - Unit Testing 163 | - Build Tools 164 | - [Grunt](http://www.gruntjs.com/) [[GitHub]](https://github.com/cowboy/jquery-tiny-pubsub/) 165 | - [Gulp](http://gulpjs.com/) [[GitHub]](https://github.com/gulpjs/gulp/) 166 | - [Brunch](http://brunch.io/) [[GitHub]](https://github.com/brunch/brunch/) 167 | - [Yeoman](http://yeoman.io/) 168 | - Broccoli [[GitHub]](https://github.com/broccolijs/broccoli/) 169 | - Debug 170 | - [Developer Tools](https://developer.chrome.com/devtools) 171 | - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) 172 | - Base Tools 173 | - [Node.js](https://nodejs.org/) [[GitHub]](https://github.com/joyent/node/) 174 | - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) 175 | - [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) 176 | - Quality 177 | - [JSLint](http://www.jslint.com/) [[GitHub]](https://github.com/douglascrockford/JSLint/) 178 | - [JSHint](http://jshint.com/) [[GitHub]](https://github.com/jshint/jshint/) 179 | - [jscs](http://jscs.info/) [[GitHub]](https://github.com/jscs-dev/node-jscs) 180 | - [Closure Linter](https://developers.google.com/closure/utilities/) 181 | - Package 182 | - [npm](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) 183 | - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) 184 | - [yarn](https://yarnpkg.com/) [[GitHub]](https://github.com/yarnpkg/yarn/) 185 | - Test 186 | - Tools 187 | - [QUnit](https://qunitjs.com/) [[GitHub]](https://github.com/jquery/qunit/) 188 | - [Jasmine](http://jasmine.github.io/) [[GitHub]](https://github.com/jasmine/jasmine/) 189 | - [Mocha](https://mochajs.org/) [[GitHub]](https://github.com/mochajs/mocha/) 190 | - [Selenium](http://www.seleniumhq.org/) [[GitHub]](https://github.com/SeleniumHQ/selenium/) 191 | - [WebDriverIO](http://webdriver.io/) [[GitHub]](https://github.com/webdriverio/webdriverio/) 192 | - [Protractor](http://www.protractortest.org/) 193 | - [Chai](http://chaijs.com/) [[GitHub]](https://github.com/jfirebaugh/konacha/) 194 | - [Sinon.JS](http://sinonjs.org/) [[GitHub]](https://github.com/cjohansen/Sinon.JS/) 195 | - [Karma](http://karma-runner.github.io/) [[GitHub]](https://github.com/karma-runner/karma/) 196 | - nodeunit [[GitHub]](https://github.com/caolan/nodeunit/) 197 | - tape [[GitHub]](http://github.com/substack/tape) 198 | - [nightmare](http://nightmarejs.org/) [[GitHub]](https://github.com/segmentio/nightmare) 199 | - [Enzyme](http://airbnb.io/enzyme/) [[GitHub]](https://github.com/airbnb/enzyme) 200 | - Composite 201 | - [Sauce Labs](https://saucelabs.com/) 202 | - [Browser Stack](https://www.browserstack.com/) 203 | - [Browser Shots](http://browsershots.org/) 204 | - [Browserling](https://www.browserling.com/) 205 | - [Browser Sandbox](https://spoon.net/browsers/) 206 | - [Cross Browser Testing](https://crossbrowsertesting.com/) 207 | - [Browsera](http://www.browsera.com/) 208 | - [SortSite](http://www.powermapper.com/products/sortsite/checks/browser-compatibility/) 209 | - Frameworks / Libraries 210 | - JavaScript base library 211 | - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) 212 | - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) 213 | - [Zepto](http://zeptojs.com/) [[GitHub]](https://github.com/madrobby/zepto/) 214 | - [MooTool](http://mootools.net/) [[GitHub]](https://github.com/mootools/mootools-core/) 215 | - Modular 216 | - ES6 Module 217 | - CommonJS 218 | - [webpack](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) 219 | - [browserify](http://browserify.org/) [[GitHub]](https://github.com/substack/node-browserify/) 220 | - AMD 221 | - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) 222 | - UMD 223 | - umd [[GitHub]](https://github.com/umdjs/umd/) 224 | - JavaScript Framework 225 | - [AngularJS](https://angularjs.org/) [[GitHub]](https://github.com/angular/angular.js/) 226 | - [Backbone](http://backbonejs.org/) [[GitHub]](https://github.com/jashkenas/backbone/) 227 | - [Knockout](http://knockoutjs.com/) [[GitHub]](https://github.com/SteveSanderson/knockout/) 228 | - [Ember](http://emberjs.com/) [[GitHub]](https://github.com/emberjs/ember.js/) 229 | - [React](http://facebook.github.io/react/) [[GitHub]](https://github.com/facebook/react/) 230 | - [polymer](https://www.polymer-project.org/) [[GitHub]](https://github.com/polymer/polymer/) 231 | - [Deft.js](http://deftjs.org/) [[GitHub]](https://github.com/deftjs/DeftJS/) 232 | - [Vue](http://vuejs.org/) [[GitHub]](https://github.com/yyx990803/vue/) 233 | - [Riot](http://riotjs.com/) [[GitHub]](https://github.com/riot/riot) 234 | - UI framework 235 | - [Bootstrap](http://getbootstrap.com/) [[GitHub]](https://github.com/twbs/bootstrap/) 236 | - [Semantic UI](http://semantic-ui.com/) [[GitHub]](https://github.com/Semantic-Org/Semantic-UI/) 237 | - [Foundation](http://foundation.zurb.com/) [[GitHub]](https://github.com/zurb/foundation/) 238 | - [Material UI](http://material-ui.com/) [[GitHub]](https://github.com/callemall/material-ui/) 239 | - [WinJS](https://dev.windows.com/en-us/develop/winjs) [[GitHub]](https://github.com/winjs/winjs) 240 | - [Pure](http://purecss.io/) [[GitHub]](https://github.com/yahoo/pure/) 241 | - [Amaze UI](http://amazeui.org/) [[GitHub]](https://github.com/allmobilize/amazeui) 242 | - [Onsne UI](https://onsen.io/) [[GitHub]](https://github.com/OnsenUI/OnsenUI) 243 | - WebSocket 244 | - [Socket.io](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) 245 | - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) 246 | - Data Visualization 247 | - [D3](http://d3js.org/) [[GitHub]](https://github.com/mbostock/d3/wiki/Gallery/) 248 | - [Echarts](http://echarts.baidu.com) [[GitHub]](https://github.com/ecomfe/esl/) 249 | - [HighCharts](http://www.highcharts.com/) [[GitHub]](https://github.com/highslide-software/highcharts.com/) 250 | - [Vis.js](http://visjs.org/) [[GitHub]](https://github.com/almende/vis/) 251 | - [Flot](http://www.flotcharts.org/) [[GitHub]](https://github.com/flot/flot/) 252 | - WebGL 253 | - [Three.js](http://threejs.org/) [[GitHub]](https://github.com/mrdoob/three.js/) 254 | - [Babylon.js](http://www.babylonjs.com/) [[GitHub]](https://github.com/BabylonJS/Babylon.js/) 255 | - [Pixi.js](http://www.pixijs.com/) [[GitHub]](https://github.com/GoodBoyDigital/pixi.js/) 256 | - CSS3 Animation 257 | - [Animate.css](https://daneden.github.io/animate.css/) [[GitHub]](https://github.com/daneden/animate.css/) 258 | - [bounce.js](http://bouncejs.com/) [[GitHub]](https://github.com/tictail/bounce.js/) 259 | - [Effeckt.css](https://h5bp.github.io/Effeckt.css/) [[GitHub]](https://github.com/h5bp/Effeckt.css/) 260 | - [move.js](https://visionmedia.github.io/move.js/) [[GitHub]](https://github.com/visionmedia/move.js/) 261 | - Flow Controller 262 | - ES6 263 | - Promise 264 | - Generator 265 | - ES7 266 | - yield 267 | - await 268 | - async [[GitHub]](https://github.com/caolan/async/) 269 | - co [[GitHub]](https://github.com/tj/co/) 270 | - Promise 271 | - Bluebird [[GitHub]](https://github.com/petkaantonov/bluebird/) 272 | - q [[GitHub]](https://github.com/kriskowal/q/) 273 | - when.js [[GitHub]](https://github.com/cujojs/when/) 274 | - Functional 275 | - [bacon.js](http://baconjs.github.io/) [[GitHub]](https://github.com/baconjs/bacon.js/) 276 | - [immutable.js](https://facebook.github.io/immutable-js/) [[GitHub]](https://github.com/facebook/immutable-js/) 277 | - [ramda](http://ramdajs.com/) [[GitHub]](http://github.com/ramda/ramda) 278 | - [underscore.js](http://underscorejs.org/) [[GitHub]](https://github.com/jashkenas/underscore) 279 | - [lodash](https://lodash.com/) [[GitHub]](https://github.com/lodash/lodash) 280 | - [ReactiveX](http://reactivex.io/) [[GitHub]](https://github.com/Reactive-Extensions/RxJS) 281 | - Mobile UI 282 | - [jQuery Mobile](https://jquerymobile.com/) [[GitHub]](https://github.com/jquery/jquery-mobile/) 283 | - [Jo](http://joapp.com/) [[GitHub]](https://github.com/davebalmer/jo/) 284 | - [Dojo Mobile](https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) 285 | - [Lungo](http://lungo.tapquo.com/) [[GitHub]](https://github.com/tapquo/Lungo.js/) 286 | - CSS Pre-processors 287 | - LESS 288 | - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) 289 | - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) 290 | - Sass(SCSS) 291 | - [Compass](http://compass-style.org/) [[GitHub]](https://github.com/chriseppstein/compass/) 292 | - [Bourbon](http://bourbon.io/) [[GitHub]](https://github.com/thoughtbot/bourbon/) 293 | - [Gumby](http://www.gumbyframework.com/) [[GitHub]](https://github.com/GumbyFramework/Gumby/) 294 | - Stylus 295 | - nib [[GitHub]](https://github.com/tj/nib/) 296 | - Future Standards 297 | - [babel](https://babeljs.io/) [[GitHub]](https://github.com/babel/babel) 298 | - Template 299 | - [Handlebars](http://handlebarsjs.com/) [[GitHub]](https://github.com/wycats/handlebars.js/) 300 | - [Haml](http://haml.info/) [[GitHub]](https://github.com/haml/haml/) 301 | - [Slim](http://slim-lang.com/) [[GitHub]](https://github.com/slim-template/slim/) 302 | - [Jade](http://jade-lang.com/) [[GitHub]](https://github.com/jadejs/jade/) 303 | - [Ejs](http://www.embeddedjs.com/) 304 | - [Spacebars](http://meteorcapture.com/spacebars/) 305 | - [mustache](http://mustache.github.io/) [[GitHub]](https://github.com/janl/mustache.js/) 306 | - Modernisation 307 | - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) 308 | - Reset 309 | - Best Practices 310 | - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) 311 | - Responsiveness 312 | - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) 313 | - Security 314 | - Sandbox 315 | - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) 316 | - [CORS](http://www.w3.org/TR/cors/) 317 | - Intermediate Languages 318 | - [CoffeeScript](http://coffeescript.org/) [[GitHub]](https://github.com/jashkenas/coffeescript/) 319 | - [TypeScript](http://www.typescriptlang.org/) [[GitHub]](https://github.com/Microsoft/TypeScript/) 320 | - ClojureScript [[GitHub]](https://github.com/clojure/clojurescript/) 321 | - [JSX (Facebook)](http://facebook.github.io/react/docs/jsx-in-depth.html) 322 | - Mobile Application Development 323 | - [PhoneGap / Cordova](https://cordova.apache.org/) [[GitHub]](https://github.com/apache/cordova-android/) 324 | - [MUI](http://dev.dcloud.net.cn/mui/) [[GitHub]](https://github.com/dcloudio/mui/) 325 | - [React Native](https://facebook.github.io/react-native/) [[GitHub]](https://github.com/facebook/react-native/) 326 | - [Ionic](http://ionicframework.com/) [[GitHub]](https://github.com/driftyco/ionic/) 327 | - Desktop Application Development 328 | - [Electron](http://electron.atom.io/) [[GitHub]](https://github.com/atom/electron) 329 | - [NW.js](http://nwjs.io/) [[GitHub]](https://github.com/nwjs/nw.js) 330 | 331 | 332 | -------------------------------------------------------------------------------- /README.zh-cn.md: -------------------------------------------------------------------------------- 1 | # 爆栈 2 | 系统开发技术栈、Web前端开发技术栈、数据库技术栈、.NET技术栈！ 3 | http://overflowstack.github.io 4 | 5 | # 本地化 6 | English: 7 | https://github.com/unruledboy/WebFrontEndStack/ 8 | 9 | 中文博客: 10 | http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html 11 | 12 | Español: 13 | https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md 14 | 15 | 16 | # Web前端技术栈 17 | 比较全面的浏览器、平台、类库、框架、工具等。 18 | 19 | ![Image of Web Front End Stack](Web Front End Stack.zh-cn.png) 20 | 21 | # 自行生成预览图 22 | 23 | ## 准备环境 24 | 您应该安装Visual Studio 2010+。 25 | 26 | 1. 安装 [nodejs](https://nodejs.org). 27 | 28 | 2. 安装 [Phantomjs](http://phantomjs.org). 29 | 30 | 3. 安装 [Python 2.7](https://www.python.org/). 31 | 32 | 4. ``npm install`` 33 | 34 | 如果出现错误，您可以检查 [phantomjs-node] 的依赖(https://github.com/sgentle/phantomjs-node/wiki), [node-gyp](https://github.com/TooTallNate/node-gyp#installation). 35 | 36 | ## 运行命令 37 | ``npm start`` 运行服务并直接打开主html文件。 38 | 39 | ``npm run build`` 生成预览图。 40 | 41 | 42 | ## 选项 43 | ``` 44 | 45 | -h, --help Display this message. 46 | -p, --port number (Default: 3000) Set the port what express listening. 47 | -ues, --update_existed_stargazers (Default: false) Update project's stargazers including existed. 48 | --phantomjs The task to generate the image. 49 | --readme The task to update readme. 50 | --updatestargazers The task to update the count of the stargazers. 51 | 52 | ``` 53 | 54 | # 为什么？ 55 | 大家是否想过： 56 | * Web前端开发究竟包含哪些技术呢？ 57 | * 我所掌握的技术这个子集，在Web前端技术大系这个超集里面占的比例是多少呢？ 58 | * 我究竟还没有掌握多少Web前端技术呢？ 59 | * 面试的时候会考哪些技术呢？ 60 | 61 | 62 | 那么，Web前端开发是否也应该有这样的技术栈概览图呢？搜索了很久，没有找到一个符合我要求的“较为全面”地表述Web前端技术大系的图表。所以我们自行设计了这个Web前端技术栈。 63 | 64 | 这个图表里的分类未必准确，相关技术也难免会有遗漏，欢迎大家指点以便不断改进。 65 | 66 | Web前端技术实在太繁多限于篇幅，，这里没有罗列一些技术。 67 | 68 | 您可以点击下面链接查看交互式预览图(用鼠标移动/缩放/点击节点打开相关网站)： 69 | 70 | https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm?locale=zh-cn 71 | 72 | 73 | # Web前端技术栈 74 | 75 | 76 | - Web前端开发技术栈 77 | - 浏览器 78 | - [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie) 79 | - [Chrome](http://www.google.com/chrome/) 80 | - [Firefox](https://www.mozilla.org/) 81 | - [Safari](http://www.apple.com/safari/) 82 | - [Opera](http://www.opera.com/) 83 | - [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) 84 | - [Netscape ;-)](https://en.wikipedia.org/wiki/Netscape) 85 | - 协议 86 | - [HTTP/1.1](https://www.ietf.org/rfc/rfc2616.txt) 87 | - 链接 88 | - 会话 89 | - 授权 90 | - 请求 91 | - 响应 92 | - [HTTP/2](https://en.wikipedia.org/wiki/HTTP/2) 93 | - 压缩 94 | - 打包 95 | - 服务器端推送 96 | - WebSocket 97 | - Web三剑客 98 | - HTML (HyperText Markup Language) 99 | - CSS (Cascading Style Sheets) 100 | - JavaScript 101 | - 标准 102 | - W3C 103 | - HTML 104 | - CSS 105 | - XHTML 106 | - XML 107 | - 核心概念 108 | - HTML 109 | - [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) 110 | - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) 111 | - Attribute 112 | - JavaScript 113 | - [Prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype) 114 | - [Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope) 115 | - [Closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) 116 | - [JSON (JavaSript Object Notation)](https://developer.mozilla.org/en-US/docs/Glossary/JSON) 117 | - [AJAX (Asynchronous JavaScript and XML)](https://developer.mozilla.org/en-US/docs/AJAX) 118 | - CSS 119 | - Selector 120 | - Priority 121 | - Specificity 122 | - Box Model 123 | - 渲染引擎 124 | - [Trident (IE)](https://en.wikipedia.org/wiki/Trident_(layout_engine)) 125 | - [Blink / prev. WebKit (Chrome)](http://www.chromium.org/blink) 126 | - [Gecko (Firefox)](https://developer.mozilla.org/en-us/docs/Mozilla/Gecko) 127 | - [WebKit (Safari)](http://www.webkit.org/) 128 | - [Blink / prev. Presto (Opera)](http://www.chromium.org/blink) 129 | - [EdgeHTML (Edge)](https://en.wikipedia.org/wiki/EdgeHTML) 130 | - 脚本引擎 131 | - [JScript (IE8- / ASP)](https://en.wikipedia.org/wiki/JScript) 132 | - [Chakra (IE9+ / Edge)](https://en.wikipedia.org/wiki/Chakra_(JScript_engine)) 133 | - [V8 (Chrome / Opera / Nodejs / MongoDB)](https://developers.google.com/v8/?hl=zh-CN) [[GitHub]](https://github.com/v8/v8/) 134 | - [SpiderMonkey (Firefox)]( https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey) 135 | - [JavaScriptCore (Safari)](https://en.wikipedia.org/wiki/WebKit#JavaScriptCore) 136 | - 运行时 137 | - Cookie 138 | - Local Cache 139 | - Session Storage 140 | - Local Storage 141 | - Components 142 | - Extensions 143 | - Plugins 144 | - Resources 145 | - Images 146 | - Icons 147 | - Fonts 148 | - Audios 149 | - Videos 150 | - 编辑器 151 | - [Sublime Text](http://www.sublimetext.com/) 152 | - [WebStorm](https://www.jetbrains.com/webstorm/) 153 | - [Atom](https://atom.io/) [[GitHub]](https://github.com/atom/atom/) 154 | - [Vim](http://www.vim.org/) 155 | - [Emacs](https://www.gnu.org/software/emacs/) 156 | - [Brackets](http://brackets.io/) [[GitHub]](https://github.com/adobe/brackets/) 157 | - [Light Table](http://lighttable.com/) [[GitHub]](https://github.com/LightTable/LightTable/) 158 | - [Visual Studio](https://www.visualstudio.com/) 159 | - [Visual Studio Code (Linux & Mac)](https://code.visualstudio.com/) [[GitHub]](https://github.com/Microsoft/vscode) 160 | - Dreamweaver ;-) 161 | - FrontPage / SharePoint Designer ;-) 162 | - 编译任务 163 | - 精简 164 | - 编译 165 | - 合并 166 | - 混淆 167 | - 图像优化 168 | - 单元测试 169 | - 编译工具 170 | - [Grunt](http://www.gruntjs.com/) [[GitHub]](https://github.com/cowboy/jquery-tiny-pubsub/) 171 | - [Gulp](http://gulpjs.com/) [[GitHub]](https://github.com/gulpjs/gulp/) 172 | - [Brunch](http://brunch.io/) [[GitHub]](https://github.com/brunch/brunch/) 173 | - [Yeoman](http://yeoman.io/) 174 | - Broccoli [[GitHub]](https://github.com/broccolijs/broccoli/) 175 | - 调试 176 | - [Developer Tools](https://developer.chrome.com/devtools) 177 | - [Firebug](http://getfirebug.com/) [[GitHub]](https://github.com/firebug/firebug/) 178 | - 基础工具 179 | - [Node.js](https://nodejs.org/) [[GitHub]](https://github.com/joyent/node/) 180 | - [Phantom.js](http://phantomjs.org/) [[GitHub]](https://github.com/ariya/phantomjs/) 181 | - [SpiderMonkey](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey) 182 | - 质量控制 183 | - [JSLint](http://www.jslint.com/) [[GitHub]](https://github.com/douglascrockford/JSLint/) 184 | - [JSHint](http://jshint.com/) [[GitHub]](https://github.com/jshint/jshint/) 185 | - [jscs](http://jscs.info/) [[GitHub]](https://github.com/jscs-dev/node-jscs) 186 | - [Closure Linter](https://developers.google.com/closure/utilities/) 187 | - 包管理 188 | - [npm](https://www.npmjs.com/) [[GitHub]](https://github.com/npm/npm/) 189 | - [Bower](http://bower.io/) [[GitHub]](https://github.com/bower/bower/) 190 | - 测试 191 | - 工具 192 | - [QUnit](https://qunitjs.com/) [[GitHub]](https://github.com/jquery/qunit/) 193 | - [Jasmine](http://jasmine.github.io/) [[GitHub]](https://github.com/jasmine/jasmine/) 194 | - [Mocha](https://mochajs.org/) [[GitHub]](https://github.com/mochajs/mocha/) 195 | - [Selenium](http://www.seleniumhq.org/) [[GitHub]](https://github.com/SeleniumHQ/selenium/) 196 | - [WebDriverIO](http://webdriver.io/) [[GitHub]](https://github.com/webdriverio/webdriverio/) 197 | - [Protractor](http://www.protractortest.org/) 198 | - [Chai](http://chaijs.com/) [[GitHub]](https://github.com/jfirebaugh/konacha/) 199 | - [Sinon.JS](http://sinonjs.org/) [[GitHub]](https://github.com/cjohansen/Sinon.JS/) 200 | - [Karma](http://karma-runner.github.io/) [[GitHub]](https://github.com/karma-runner/karma/) 201 | - nodeunit [[GitHub]](https://github.com/caolan/nodeunit/) 202 | - tape [[GitHub]](http://github.com/substack/tape) 203 | - [nightmare](http://nightmarejs.org/) [[GitHub]](https://github.com/segmentio/nightmare) 204 | - 在线工具 205 | - [Sauce Labs](https://saucelabs.com/) 206 | - [Browser Stack](https://www.browserstack.com/) 207 | - [Browser Shots](http://browsershots.org/) 208 | - [Browserling](https://www.browserling.com/) 209 | - [Browser Sandbox](https://spoon.net/browsers/) 210 | - [Cross Browser Testing](https://crossbrowsertesting.com/) 211 | - [Browsera](http://www.browsera.com/) 212 | - [SortSite](http://www.powermapper.com/products/sortsite/checks/browser-compatibility/) 213 | - 库 / 框架 214 | - 基础库 215 | - [jQuery](https://jquery.com/) [[GitHub]](https://github.com/jquery/jquery/) 216 | - [Prototype](http://prototypejs.org/) [[GitHub]](https://github.com/sstephenson/prototype/) 217 | - [Zepto](http://zeptojs.com/) [[GitHub]](https://github.com/madrobby/zepto/) 218 | - [MooTool](http://mootools.net/) [[GitHub]](https://github.com/mootools/mootools-core/) 219 | - 模块化 220 | - ES6 Module 221 | - CommonJS 222 | - [webpack](http://webpack.github.io/) [[GitHub]](https://github.com/webpack/webpack/) 223 | - [browserify](http://browserify.org/) [[GitHub]](https://github.com/substack/node-browserify/) 224 | - AMD 225 | - [RequireJS](http://requirejs.org/) [[GitHub]](https://github.com/jrburke/requirejs/) 226 | - UMD 227 | - umd [[GitHub]](https://github.com/umdjs/umd/) 228 | - 框架 229 | - [AngularJS](https://angularjs.org/) [[GitHub]](https://github.com/angular/angular.js/) 230 | - [Backbone](http://backbonejs.org/) [[GitHub]](https://github.com/jashkenas/backbone/) 231 | - [Knockout](http://knockoutjs.com/) [[GitHub]](https://github.com/SteveSanderson/knockout/) 232 | - [Ember](http://emberjs.com/) [[GitHub]](https://github.com/emberjs/ember.js/) 233 | - [React](http://facebook.github.io/react/) [[GitHub]](https://github.com/facebook/react/) 234 | - [polymer](https://www.polymer-project.org/) [[GitHub]](https://github.com/polymer/polymer/) 235 | - [Deft.js](http://deftjs.org/) [[GitHub]](https://github.com/deftjs/DeftJS/) 236 | - [Vue](http://vuejs.org/) [[GitHub]](https://github.com/yyx990803/vue/) 237 | - [Riot](http://riotjs.com/) [[GitHub]](https://github.com/riot/riot) 238 | - UI框架 239 | - [Bootstrap](http://getbootstrap.com/) [[GitHub]](https://github.com/twbs/bootstrap/) 240 | - [Semantic UI](http://semantic-ui.com/) [[GitHub]](https://github.com/Semantic-Org/Semantic-UI/) 241 | - [Foundation](http://foundation.zurb.com/) [[GitHub]](https://github.com/zurb/foundation/) 242 | - [Material UI](http://material-ui.com/) [[GitHub]](https://github.com/callemall/material-ui/) 243 | - [WinJS](https://dev.windows.com/en-us/develop/winjs) [[GitHub]](https://github.com/winjs/winjs) 244 | - [Pure](http://purecss.io/) [[GitHub]](https://github.com/yahoo/pure/) 245 | - [Amaze UI](http://amazeui.org/) [[GitHub]](https://github.com/allmobilize/amazeui) 246 | - WebSocket 247 | - [Socket.io](http://socket.io/) [[GitHub]](https://github.com/Automattic/socket.io/) 248 | - web-socket-js [[GitHub]](https://github.com/gimite/web-socket-js/) 249 | - 数据可视化 250 | - [D3](http://d3js.org/) [[GitHub]](https://github.com/mbostock/d3/wiki/Gallery/) 251 | - [Echarts](http://echarts.baidu.com) [[GitHub]](https://github.com/ecomfe/esl/) 252 | - [HighCharts](http://www.highcharts.com/) [[GitHub]](https://github.com/highslide-software/highcharts.com/) 253 | - [Vis.js](http://visjs.org/) [[GitHub]](https://github.com/almende/vis/) 254 | - [Flot](http://www.flotcharts.org/) [[GitHub]](https://github.com/flot/flot/) 255 | - WebGL 256 | - [Three.js](http://threejs.org/) [[GitHub]](https://github.com/mrdoob/three.js/) 257 | - [Babylon.js](http://www.babylonjs.com/) [[GitHub]](https://github.com/BabylonJS/Babylon.js/) 258 | - [Pixi.js](http://www.pixijs.com/) [[GitHub]](https://github.com/GoodBoyDigital/pixi.js/) 259 | - CSS3 动画 260 | - [Animate.css](https://daneden.github.io/animate.css/) [[GitHub]](https://github.com/daneden/animate.css/) 261 | - [bounce.js](http://bouncejs.com/) [[GitHub]](https://github.com/tictail/bounce.js/) 262 | - [Effeckt.css](https://h5bp.github.io/Effeckt.css/) [[GitHub]](https://github.com/h5bp/Effeckt.css/) 263 | - [move.js](https://visionmedia.github.io/move.js/) [[GitHub]](https://github.com/visionmedia/move.js/) 264 | - 流程控制 265 | - ES6 266 | - Promise 267 | - Generator 268 | - ES7 269 | - yield 270 | - await 271 | - async [[GitHub]](https://github.com/caolan/async/) 272 | - co [[GitHub]](https://github.com/tj/co/) 273 | - Promise 274 | - Bluebird [[GitHub]](https://github.com/petkaantonov/bluebird/) 275 | - q [[GitHub]](https://github.com/kriskowal/q/) 276 | - when.js [[GitHub]](https://github.com/cujojs/when/) 277 | - 函数式编程 278 | - [bacon.js](http://baconjs.github.io/) [[GitHub]](https://github.com/baconjs/bacon.js/) 279 | - [immutable.js](https://facebook.github.io/immutable-js/) [[GitHub]](https://github.com/facebook/immutable-js/) 280 | - [ramda](http://ramdajs.com/) [[GitHub]](http://github.com/ramda/ramda) 281 | - [underscore.js](http://underscorejs.org/) [[GitHub]](https://github.com/jashkenas/underscore) 282 | - [lodash](https://lodash.com/) [[GitHub]](https://github.com/lodash/lodash) 283 | - [ReactiveX](http://reactivex.io/) [[GitHub]](https://github.com/Reactive-Extensions/RxJS) 284 | - 手机 UI 框架 285 | - [jQuery Mobile](https://jquerymobile.com/) [[GitHub]](https://github.com/jquery/jquery-mobile/) 286 | - [Jo](http://joapp.com/) [[GitHub]](https://github.com/davebalmer/jo/) 287 | - [Dojo Mobile](https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) 288 | - [Lungo](http://lungo.tapquo.com/) [[GitHub]](https://github.com/tapquo/Lungo.js/) 289 | - CSS 预处理器 290 | - LESS 291 | - [LESS](http://lesscss.org/) [[GitHub]](https://github.com/less/less.js/) 292 | - [Hat](http://lesshat.madebysource.com/) [[GitHub]](https://github.com/csshat/lesshat/) 293 | - Sass(SCSS) 294 | - [Compass](http://compass-style.org/) [[GitHub]](https://github.com/chriseppstein/compass/) 295 | - [Bourbon](http://bourbon.io/) [[GitHub]](https://github.com/thoughtbot/bourbon/) 296 | - [Gumby](http://www.gumbyframework.com/) [[GitHub]](https://github.com/GumbyFramework/Gumby/) 297 | - Stylus 298 | - nib [[GitHub]](https://github.com/tj/nib/) 299 | - 未来标准 300 | - [babel](https://babeljs.io/) [[GitHub]](https://github.com/babel/babel) 301 | - 模板引擎 302 | - [Handlebars](http://handlebarsjs.com/) [[GitHub]](https://github.com/wycats/handlebars.js/) 303 | - [Haml](http://haml.info/) [[GitHub]](https://github.com/haml/haml/) 304 | - [Slim](http://slim-lang.com/) [[GitHub]](https://github.com/slim-template/slim/) 305 | - [Jade](http://jade-lang.com/) [[GitHub]](https://github.com/jadejs/jade/) 306 | - [Ejs](http://www.embeddedjs.com/) 307 | - [Spacebars](http://meteorcapture.com/spacebars/) 308 | - [mustache](http://mustache.github.io/) [[GitHub]](https://github.com/janl/mustache.js/) 309 | - 统一化 310 | - [Normalize](http://necolas.github.io/normalize.css/) [[GitHub]](https://github.com/necolas/normalize.css/) 311 | - Reset 312 | - 最佳实践 313 | - [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) 314 | - Responsiveness 315 | - [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) 316 | - 安全 317 | - Sandbox 318 | - [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) 319 | - [CORS](http://www.w3.org/TR/cors/) 320 | - 中间语言 321 | - [CoffeeScript](http://coffeescript.org/) [[GitHub]](https://github.com/jashkenas/coffeescript/) 322 | - [TypeScript](http://www.typescriptlang.org/) [[GitHub]](https://github.com/Microsoft/TypeScript/) 323 | - ClojureScript [[GitHub]](https://github.com/clojure/clojurescript/) 324 | - [JSX (Facebook)](http://facebook.github.io/react/docs/jsx-in-depth.html) 325 | - 移动应用开发 326 | - [PhoneGap / Cordova](https://cordova.apache.org/) [[GitHub]](https://github.com/apache/cordova-android/) 327 | - [MUI](http://dev.dcloud.net.cn/mui/) [[GitHub]](https://github.com/dcloudio/mui/) 328 | - [React Native](https://facebook.github.io/react-native/) [[GitHub]](https://github.com/facebook/react-native/) 329 | - [Ionic](http://ionicframework.com/) [[GitHub]](https://github.com/driftyco/ionic/) 330 | - 桌面应用开发 331 | - [Electron](http://electron.atom.io/) [[GitHub]](https://github.com/atom/electron) 332 | - [NW.js](http://nwjs.io/) [[GitHub]](https://github.com/nwjs/nw.js) 333 | 334 | 335 | -------------------------------------------------------------------------------- /Web Front End Stack.es-es.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/cfd2860b505c2a693c8e4905ba4fd9751830ddd2/Web Front End Stack.es-es.png -------------------------------------------------------------------------------- /Web Front End Stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/cfd2860b505c2a693c8e4905ba4fd9751830ddd2/Web Front End Stack.png -------------------------------------------------------------------------------- /Web Front End Stack.zh-cn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/cfd2860b505c2a693c8e4905ba4fd9751830ddd2/Web Front End Stack.zh-cn.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* global require, setTimeout, console, __dirname, process*/ 2 | /** 3 | * Builder 4 | * @author zsx 5 | */ 6 | (function () { 7 | "use strict"; 8 | 9 | const pageWidth = 2000; // Magic number! 10 | const pageHeight = 3800; 11 | 12 | let Express = require('express'); 13 | let path = require('path'); 14 | let phantom = require("phantomjs-promise"); 15 | let request = require("request"); 16 | let async = require("async"); 17 | let fs = require('fs'); 18 | let commandLineArgs = require("command-line-args"); 19 | 20 | let app = new Express(); 21 | 22 | let cli = commandLineArgs([{ 23 | name: "help", 24 | alias: "h", 25 | type: Boolean, 26 | defaultOption: true, 27 | description: "Display this message." 28 | }, { 29 | name: "port", 30 | alias: "p", 31 | type: Number, 32 | defaultValue: 3000, 33 | description: "(Default: 3000) Set the port what express listening." 34 | }, { 35 | name: "update_existed_stargazers", 36 | alias: "ues", 37 | type: Boolean, 38 | defaultValue: false, 39 | description: "(Default: false) Update project's stargazers including existed." 40 | }, { 41 | name: "phantomjs", 42 | type: Boolean, 43 | defaultValue: false, 44 | description: "The task to generate the image." 45 | }, { 46 | name: "readme", 47 | type: Boolean, 48 | defaultValue: false, 49 | description: "The task to update readme." 50 | }, { 51 | name: "updatestargazers", 52 | type: Boolean, 53 | defaultValue: false, 54 | description: "The task to update the count of the stargazers." 55 | }]); 56 | let options = cli.parse(); 57 | let httpServer = "http://127.0.0.1:" + options.port + "/"; 58 | 59 | let languages = []; 60 | let jsonData = JSON.parse(fs.readFileSync('./ux/WebFrontEndStack.json', "utf-8")); // Require will lock the file. 61 | 62 | /** 63 | * Tiemout 64 | * @param int ms 65 | * @return Promise 66 | */ 67 | function timeout(ms) { 68 | return new Promise((resolve, reject) => { 69 | setTimeout(resolve, ms, 'done'); 70 | }); 71 | } 72 | /** 73 | * Recursion to generate readme 74 | * @param object object 75 | * @param string language 76 | * @param int deep 77 | * @return string 78 | */ 79 | function buildReadme(object, language, deep) { 80 | let deeper = deep + 1; 81 | let deepString = new Array(deeper).join("\t") + "- "; 82 | let ret = []; 83 | let lang = ""; 84 | if (object.languages) { 85 | lang = object.languages[language]; 86 | } 87 | lang = lang || object.name; 88 | 89 | ret.push((function (deepString, name, url, github) { 90 | let haveUrl = !!url; 91 | let haveGitHub = !!github; 92 | let ret = []; 93 | ret.push(deepString); 94 | ret.push((haveUrl ? "[" : "") + name + (haveUrl ? "](" + url + ")" : "")); 95 | ret.push((haveGitHub ? " [\[GitHub\]](" + github + ")" : "")); 96 | return ret.join(""); 97 | })(deepString, lang, object.url, object.github)); 98 | 99 | if (object.children) { 100 | object.children.map((value, index) => { 101 | ret.push(buildReadme(value, language, deeper)); 102 | }); 103 | } 104 | return ret.join("\n"); 105 | } 106 | 107 | /** 108 | * Update the stargazers of the GitHub repo 109 | * Be careful! There have the rate limit! 110 | * @see https://developer.github.com/v3/#increasing-the-unauthenticated-rate-limit-for-oauth-applications 111 | * @return Promise 112 | */ 113 | function updatestargazers() { 114 | return new Promise((resolve, reject) => { 115 | 116 | function getGitHubApi(github) { 117 | let githubArray = github.split("/"); 118 | // I want a sprintf T_T 119 | return "https://api.github.com/repos/" + githubArray[3] + "/" + githubArray[4]; 120 | } 121 | 122 | 123 | let q = async.queue(function (object, callback) { 124 | if (!object.github || (!options.update_existed_stargazers && object.stargazers)) { 125 | callback(false); 126 | return; 127 | } 128 | let githubUrl = getGitHubApi(object.github); 129 | console.log("Getting " + githubUrl); 130 | request({ 131 | url: githubUrl, 132 | headers: { 133 | "User-Agent": "https://github.com/unruledboy/WebFrontEndStack" // GitHub required user-agent 134 | } 135 | }, (err, res, body) => { 136 | if (!err && res.statusCode == 200) { 137 | let json = JSON.parse(body); 138 | if (json === null) { 139 | callback(false); 140 | return; 141 | } 142 | object.stargazers = json.stargazers_count; 143 | callback(true); 144 | } else { 145 | if (res.statusCode == 403) { // Out of API limit! 146 | console.error("Out of GitHub API limit!"); 147 | console.error("The limit will be reset when " + new Date(res.headers['x-ratelimit-reset'] * 1000)); 148 | q.kill(); 149 | reject("Out of GitHub API limit!"); 150 | } 151 | callback(false); 152 | } 153 | }); 154 | 155 | }, 5); 156 | q.drain = function () { 157 | fs.writeFileSync('./ux/WebFrontEndStack.json', JSON.stringify(jsonData), "utf-8"); 158 | resolve(); 159 | }; 160 | function addQueue(object) { 161 | q.push(object, (noErr) => { 162 | if (noErr) console.log(object.name + " = " + object.stargazers); 163 | }); 164 | if (object.children) { 165 | object.children.forEach((val) => { 166 | addQueue(val); 167 | }); 168 | } 169 | } 170 | addQueue(jsonData); 171 | 172 | return q; 173 | }); 174 | } 175 | /** 176 | * For running phantomjs to take a screenshot for the webpage 177 | * @return Promise 178 | */ 179 | function phantomjs(language) { 180 | let displayLanguage = language === "" ? "en" : language; 181 | let promise = new Promise((resolve, reject) => { 182 | return phantom.createAsync().then((phantom) => { 183 | return phantom.createPageAsync(); 184 | }).then((objects) => { 185 | console.log("Setting viewportSize.."); 186 | return objects.page.setAsync('viewportSize', { 187 | width: pageWidth, 188 | height: pageHeight 189 | }); 190 | }).then((objects) => { 191 | console.log("Opening " + httpServer + "?locale=" + language + " for " + displayLanguage); 192 | return objects.page.openAsync(httpServer + "?locale=" + language); 193 | }).then((objects) => { 194 | console.log("Rendered HTML, the image will be saved after 2 seconds."); 195 | if (objects.ret[0] != "success") { 196 | throw objects.ret[0]; 197 | } 198 | return timeout(2000).then(() => { 199 | return objects.page.renderAsync(path.join(__dirname, 'Web Front End Stack' + (language === "" ? "" : ".") + language + '.png')); 200 | }); 201 | }).then((objects) => { 202 | console.log("The image(" + displayLanguage + ") saved successfully!"); 203 | objects.page.close(); 204 | objects.phantom.exit(); 205 | resolve(); 206 | }); 207 | }); 208 | return promise; 209 | 210 | } 211 | 212 | 213 | /** 214 | * To rebuild the README.md 215 | * @return Promise 216 | */ 217 | function readme(language) { 218 | let extension = (language === "" ? "" : ".") + language; 219 | let promise = new Promise((resolve, reject) => { 220 | fs.readFile('./README' + extension + '.md', "utf-8", (err, content) => { 221 | if (err) return reject(err); 222 | resolve(content); 223 | }); 224 | }); 225 | return promise.then((fileContent) => { 226 | let ret = buildReadme(jsonData, language, 0); 227 | fileContent = fileContent.replace(/<\!--BUILD_START-->[\d\D]+?<\!--BUILD_END-->/, "{%BuildStart%}"); 228 | fs.writeFileSync('./README' + extension + '.md', fileContent.replace("{%BuildStart%}", "\n\n" + ret + "\n\n", "utf-8")); 229 | console.log('Readme (' + language + ') built successfully!'); 230 | }); 231 | } 232 | 233 | 234 | /** 235 | * To start an express server 236 | * @return Promise 237 | */ 238 | function server() { 239 | return new Promise((resolve, reject) => { 240 | return app 241 | .set('port', options.port) 242 | .set('view engine', 'html') 243 | .use(Express.static(path.join(__dirname, '/ux'))) 244 | .use('/', function (req, res) { 245 | res.redirect('/WebFrontEndStack.htm?locale=' + req.query.locale); 246 | }) 247 | .listen(options.port, function () { 248 | console.info('Express started on: http://127.0.0.1:' + options.port); 249 | resolve(app); 250 | }); 251 | }); 252 | } 253 | 254 | if (options.help) { 255 | let usage = cli.getUsage({ 256 | title: "Generator" 257 | }); 258 | console.log(usage); 259 | return; 260 | } 261 | 262 | let queue = []; 263 | queue.push(server()); 264 | 265 | // Firstly, check languages. 266 | 267 | languages.push(""); 268 | for (let item in jsonData.languages) { 269 | languages.push(item); 270 | } 271 | 272 | languages.map((val) => { 273 | if (options.phantomjs) { 274 | queue.push(phantomjs(val)); 275 | } 276 | if (options.readme) { 277 | queue.push(readme(val)); 278 | } 279 | }); 280 | 281 | if (options.updatestargazers) { 282 | queue.push(updatestargazers()); 283 | } 284 | 285 | let promise = Promise.all(queue); 286 | 287 | if (queue.length > 1) { // for somebody who only want to start the server. 288 | console.log("You can press Ctrl+C to exit if tasks finished."); 289 | promise.then(() => { 290 | console.log("OK!"); 291 | process.exit(0); 292 | }); 293 | } 294 | })(); 295 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "WebFrontEndStack", 3 | "version": "2.0.0", 4 | "description": "Generate a image for web front-end stack.", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "node index --phantomjs --readme", 8 | "start": "node index" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/unruledboy/WebFrontEndStack.git" 13 | }, 14 | "keywords": [ 15 | "Web", 16 | "FrontEnd", 17 | "Stack" 18 | ], 19 | "author": [ 20 | "unruledboy ", 21 | "zsx " 22 | ], 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/unruledboy/WebFrontEndStack/issues" 26 | }, 27 | "homepage": "https://github.com/unruledboy/WebFrontEndStack", 28 | "dependencies": { 29 | "async": "^1.4.2", 30 | "command-line-args": "^1.0.1", 31 | "express": "^4.13.3", 32 | "phantomjs-promise": "0.0.1", 33 | "request": "^2.61.0" 34 | }, 35 | "devDependencies": { 36 | "phantomjs": "^1.9.18", 37 | "weak": "^1.0.0" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /ux/WebFrontEndStack.htm: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Web Front End Stack 7 | 8 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |
96 |
97 |
98 |

Web Front-end Stack v2.5

99 |
100 |
101 |

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

102 |

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

103 |
104 |
105 |
106 |
107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /ux/WebFrontEndStack.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Web Front End", 3 | "languages": { 4 | "zh-cn": "Web前端开发技术栈", 5 | "es-es": "Web Front End" 6 | }, 7 | "children": [{ 8 | "name": "Browser", 9 | "languages": { 10 | "zh-cn": "浏览器", 11 | "es-es": "Navegadores" 12 | }, 13 | "children": [{ 14 | "name": "Internet Explorer", 15 | "url": "http://windows.microsoft.com/en-us/internet-explorer/download-ie" 16 | }, { 17 | "name": "Chrome", 18 | "url": "http://www.google.com/chrome/" 19 | }, { 20 | "name": "Firefox", 21 | "url": "https://www.mozilla.org/" 22 | }, { 23 | "name": "Safari", 24 | "url": "http://www.apple.com/safari/" 25 | }, { 26 | "name": "Opera", 27 | "url": "http://www.opera.com/" 28 | }, { 29 | "name": "Edge", 30 | "url": "https://www.microsoft.com/en-us/windows/microsoft-edge" 31 | }, { 32 | "name": "Netscape ;-)", 33 | "url": "https://en.wikipedia.org/wiki/Netscape" 34 | }] 35 | }, { 36 | "name": "Protocol", 37 | "languages": { 38 | "zh-cn": "协议", 39 | "es-es": "Protocolos" 40 | }, 41 | "children": [{ 42 | "name": "HTTP/1.1", 43 | "url": "https://www.ietf.org/rfc/rfc2616.txt", 44 | "children": [{ 45 | "name": "URI", 46 | "languages": { 47 | "zh-cn": "链接" 48 | } 49 | }, { 50 | "name": "Session", 51 | "languages": { 52 | "zh-cn": "会话", 53 | "es-es": "Sesión" 54 | } 55 | }, { 56 | "name": "Authentication", 57 | "languages": { 58 | "zh-cn": "授权", 59 | "es-es": "Autenticación" 60 | } 61 | }, { 62 | "name": "Request", 63 | "languages": { 64 | "zh-cn": "请求", 65 | "es-es": "Petición" 66 | } 67 | }, { 68 | "name": "Response", 69 | "languages": { 70 | "zh-cn": "响应", 71 | "es-es": "Respuesta" 72 | } 73 | }] 74 | }, { 75 | "name": "HTTP/2", 76 | "url": "https://en.wikipedia.org/wiki/HTTP/2", 77 | "children": [{ 78 | "name": "Compression", 79 | "languages": { 80 | "zh-cn": "压缩", 81 | "es-es": "Compresión" 82 | } 83 | }, { 84 | "name": "Minification", 85 | "languages": { 86 | "zh-cn": "打包", 87 | "es-es": "Minificación" 88 | } 89 | }, { 90 | "name": "Server Push", 91 | "languages": { 92 | "zh-cn": "服务器端推送" 93 | } 94 | }] 95 | }, { 96 | "name": "WebSocket" 97 | }] 98 | }, { 99 | "name": "The 3 Pillars", 100 | "languages": { 101 | "zh-cn": "Web三剑客" 102 | }, 103 | "children": [{ 104 | "name": "HTML (HyperText Markup Language)" 105 | }, { 106 | "name": "CSS (Cascading Style Sheets)" 107 | }, { 108 | "name": "JavaScript" 109 | }] 110 | }, { 111 | "name": "Standards", 112 | "languages": { 113 | "zh-cn": "标准", 114 | "es-es": "Estándares" 115 | }, 116 | "children": [{ 117 | "name": "W3C", 118 | "children": [{ 119 | "name": "HTML" 120 | }, { 121 | "name": "CSS" 122 | }, { 123 | "name": "XHTML" 124 | }, { 125 | "name": "XML" 126 | }] 127 | }] 128 | }, { 129 | "name": "Core Concepts", 130 | "languages": { 131 | "zh-cn": "核心概念", 132 | "es-es": "Conceptons principales" 133 | }, 134 | "children": [{ 135 | "name": "HTML", 136 | "children": [{ 137 | "name": "DOM", 138 | "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" 139 | }, { 140 | "name": "Element", 141 | "url": "https://developer.mozilla.org/en-US/docs/Web/API/Element" 142 | }, { 143 | "name": "Attribute" 144 | }] 145 | }, { 146 | "name": "JavaScript", 147 | "children": [{ 148 | "name": "Prototype", 149 | "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype" 150 | }, { 151 | "name": "Scope", 152 | "url": "https://developer.mozilla.org/en-US/docs/Glossary/Scope" 153 | }, { 154 | "name": "Closure", 155 | "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" 156 | }, { 157 | "name": "JSON (JavaSript Object Notation)", 158 | "url": "https://developer.mozilla.org/en-US/docs/Glossary/JSON" 159 | }, { 160 | "name": "AJAX (Asynchronous JavaScript and XML)", 161 | "url": "https://developer.mozilla.org/en-US/docs/AJAX" 162 | }] 163 | }, { 164 | "name": "CSS", 165 | "children": [{ 166 | "name": "Selector" 167 | }, { 168 | "name": "Priority" 169 | }, { 170 | "name": "Specificity" 171 | }, { 172 | "name": "Box Model" 173 | }] 174 | }] 175 | }, { 176 | "name": "Rendering Engine", 177 | "languages": { 178 | "zh-cn": "渲染引擎", 179 | "es-es": "Motores de renderizado" 180 | }, 181 | "children": [{ 182 | "name": "Trident (IE)", 183 | "url": "https://en.wikipedia.org/wiki/Trident_(layout_engine)" 184 | }, { 185 | "name": "Blink / prev. WebKit (Chrome)", 186 | "url": "http://www.chromium.org/blink", 187 | "github": "" 188 | }, { 189 | "name": "Gecko (Firefox)", 190 | "url": "https://developer.mozilla.org/en-us/docs/Mozilla/Gecko" 191 | }, { 192 | "name": "WebKit (Safari)", 193 | "url": "http://www.webkit.org/" 194 | }, { 195 | "name": "Blink / prev. Presto (Opera)", 196 | "url": "http://www.chromium.org/blink", 197 | "github": "" 198 | }, { 199 | "name": "EdgeHTML (Edge)", 200 | "url": "https://en.wikipedia.org/wiki/EdgeHTML" 201 | }] 202 | }, { 203 | "name": "JavaScript Engine", 204 | "languages": { 205 | "zh-cn": "脚本引擎", 206 | "es-es": "Motores JavaScript" 207 | }, 208 | "children": [{ 209 | "name": "JScript (IE8- / ASP)", 210 | "url": "https://en.wikipedia.org/wiki/JScript" 211 | }, { 212 | "name": "Chakra (IE9+ / Edge)", 213 | "url": "https://en.wikipedia.org/wiki/Chakra_(JScript_engine)" 214 | }, { 215 | "name": "V8 (Chrome / Opera / Nodejs / MongoDB)", 216 | "url": "https://developers.google.com/v8/?hl=zh-CN", 217 | "github": "https://github.com/v8/v8/", 218 | "stargazers": 2577 219 | }, { 220 | "name": "SpiderMonkey (Firefox)", 221 | "url": " https://developer.mozilla.org/en-us/docs/Mozilla/Projects/SpiderMonkey" 222 | }, { 223 | "name": "JavaScriptCore (Safari)", 224 | "url": "https://en.wikipedia.org/wiki/WebKit#JavaScriptCore" 225 | }] 226 | }, { 227 | "name": "Runtime", 228 | "languages": { 229 | "zh-cn": "运行时", 230 | "es-es": "Tiempo de ejecución" 231 | }, 232 | "children": [{ 233 | "name": "Cookie" 234 | }, { 235 | "name": "Local Cache" 236 | }, { 237 | "name": "Session Storage" 238 | }, { 239 | "name": "Local Storage" 240 | }, { 241 | "name": "Components", 242 | "languages": { 243 | "es-es": "Componentes" 244 | }, 245 | "children": [{ 246 | "name": "Extensions", 247 | "languages": { 248 | "es-es": "Extensiones" 249 | } 250 | }, { 251 | "name": "Plugins" 252 | }] 253 | }, { 254 | "name": "Resources", 255 | "children": [{ 256 | "name": "Images" 257 | }, { 258 | "name": "Icons" 259 | }, { 260 | "name": "Fonts" 261 | }, { 262 | "name": "Audios" 263 | }, { 264 | "name": "Videos" 265 | }] 266 | }] 267 | }, { 268 | "name": "Editors", 269 | "languages": { 270 | "zh-cn": "编辑器", 271 | "es-es": "Editores de texto" 272 | }, 273 | "children": [{ 274 | "name": "Sublime Text", 275 | "url": "http://www.sublimetext.com/" 276 | }, { 277 | "name": "WebStorm", 278 | "url": "https://www.jetbrains.com/webstorm/" 279 | }, { 280 | "name": "Atom", 281 | "url": "https://atom.io/", 282 | "github": "https://github.com/atom/atom/", 283 | "stargazers": 19510 284 | }, { 285 | "name": "Vim", 286 | "url": "http://www.vim.org/" 287 | }, { 288 | "name": "Emacs", 289 | "url": "https://www.gnu.org/software/emacs/" 290 | }, { 291 | "name": "Brackets", 292 | "url": "http://brackets.io/", 293 | "github": "https://github.com/adobe/brackets/", 294 | "stargazers": 23091 295 | }, { 296 | "name": "Light Table", 297 | "url": "http://lighttable.com/", 298 | "github": "https://github.com/LightTable/LightTable/", 299 | "stargazers": 7926 300 | }, { 301 | "name": "Visual Studio", 302 | "url": "https://www.visualstudio.com/" 303 | }, { 304 | "name": "Visual Studio Code (Linux & Mac)", 305 | "url": "https://code.visualstudio.com/", 306 | "github": "https://github.com/Microsoft/vscode", 307 | "stargazers": 6652 308 | }, { 309 | "name": "Dreamweaver ;-)" 310 | }, { 311 | "name": "FrontPage / SharePoint Designer ;-)" 312 | }] 313 | }, { 314 | "name": "Build Tasks", 315 | "languages": { 316 | "zh-cn": "编译任务" 317 | }, 318 | "children": [{ 319 | "name": "Minification", 320 | "languages": { 321 | "zh-cn": "精简", 322 | "es-es": "Minificación" 323 | } 324 | }, { 325 | "name": "Compilation", 326 | "languages": { 327 | "zh-cn": "编译", 328 | "es-es": "Compilación" 329 | } 330 | }, { 331 | "name": "Concatenation", 332 | "languages": { 333 | "zh-cn": "合并", 334 | "es-es": "Concatenación" 335 | } 336 | }, { 337 | "name": "Uglification", 338 | "languages": { 339 | "zh-cn": "混淆" 340 | } 341 | }, { 342 | "name": "Image Optimization", 343 | "languages": { 344 | "zh-cn": "图像优化", 345 | "es-es": "Optimización de imágenes" 346 | } 347 | }, { 348 | "name": "Unit Testing", 349 | "languages": { 350 | "zh-cn": "单元测试", 351 | "es-es": "Tests unitarios" 352 | } 353 | }] 354 | }, { 355 | "name": "Build Tools", 356 | "languages": { 357 | "zh-cn": "编译工具", 358 | "es-es": "Herramientas de tareas" 359 | }, 360 | "children": [{ 361 | "name": "Grunt", 362 | "url": "http://www.gruntjs.com/", 363 | "github": "https://github.com/cowboy/jquery-tiny-pubsub/", 364 | "stargazers": 662 365 | }, { 366 | "name": "Gulp", 367 | "url": "http://gulpjs.com/", 368 | "github": "https://github.com/gulpjs/gulp/", 369 | "stargazers": 15661 370 | }, { 371 | "name": "Brunch", 372 | "url": "http://brunch.io/", 373 | "github": "https://github.com/brunch/brunch/", 374 | "stargazers": 4472 375 | }, { 376 | "name": "Yeoman", 377 | "url": "http://yeoman.io/" 378 | }, { 379 | "name": "Broccoli", 380 | "github": "https://github.com/broccolijs/broccoli/", 381 | "stargazers": 2391 382 | }] 383 | }, { 384 | "name": "Debug", 385 | "languages": { 386 | "zh-cn": "调试", 387 | "es-es": "Depuración" 388 | }, 389 | "children": [{ 390 | "name": "Developer Tools", 391 | "url": "https://developer.chrome.com/devtools" 392 | }, { 393 | "name": "Firebug", 394 | "url": "http://getfirebug.com/", 395 | "github": "https://github.com/firebug/firebug/", 396 | "stargazers": 924 397 | }] 398 | }, { 399 | "name": "Base Tools", 400 | "languages": { 401 | "zh-cn": "基础工具", 402 | "es-es": "Herramientas base" 403 | }, 404 | "children": [{ 405 | "name": "Node.js", 406 | "url": "https://nodejs.org/", 407 | "github": "https://github.com/joyent/node/", 408 | "stargazers": 37851 409 | }, { 410 | "name": "Phantom.js", 411 | "url": "http://phantomjs.org/", 412 | "github": "https://github.com/ariya/phantomjs/", 413 | "stargazers": 14950 414 | }, { 415 | "name": "SpiderMonkey", 416 | "url": "https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" 417 | }] 418 | }, { 419 | "name": "Quality", 420 | "languages": { 421 | "zh-cn": "质量控制", 422 | "es-es": "Calidad" 423 | }, 424 | "children": [{ 425 | "name": "JSLint", 426 | "url": "http://www.jslint.com/", 427 | "github": "https://github.com/douglascrockford/JSLint/", 428 | "stargazers": 2382 429 | }, { 430 | "name": "JSHint", 431 | "url": "http://jshint.com/", 432 | "github": "https://github.com/jshint/jshint/", 433 | "stargazers": 5384 434 | }, { 435 | "name": "jscs", 436 | "url": "http://jscs.info/", 437 | "github": "https://github.com/jscs-dev/node-jscs", 438 | "stargazers": 3982 439 | }, { 440 | "name": "Closure Linter", 441 | "url": "https://developers.google.com/closure/utilities/" 442 | }] 443 | }, { 444 | "name": "Package", 445 | "languages": { 446 | "zh-cn": "包管理", 447 | "es-es": "Gestores de paquetes" 448 | }, 449 | "children": [{ 450 | "name": "npm", 451 | "url": "https://www.npmjs.com/", 452 | "github": "https://github.com/npm/npm/", 453 | "stargazers": 6816 454 | }, { 455 | "name": "Bower", 456 | "url": "http://bower.io/", 457 | "github": "https://github.com/bower/bower/", 458 | "stargazers": 12747 459 | }] 460 | }, { 461 | "name": "Test", 462 | "languages": { 463 | "zh-cn": "测试" 464 | }, 465 | "children": [{ 466 | "name": "Tools", 467 | "languages": { 468 | "zh-cn": "工具", 469 | "es-es": "Herramientas" 470 | }, 471 | "children": [{ 472 | "name": "QUnit", 473 | "url": "https://qunitjs.com/", 474 | "github": "https://github.com/jquery/qunit/", 475 | "stargazers": 3228 476 | }, { 477 | "name": "Jasmine", 478 | "url": "http://jasmine.github.io/", 479 | "github": "https://github.com/jasmine/jasmine/", 480 | "stargazers": 9303 481 | }, { 482 | "name": "Mocha", 483 | "url": "https://mochajs.org/", 484 | "github": "https://github.com/mochajs/mocha/", 485 | "stargazers": 7226 486 | }, { 487 | "name": "Selenium", 488 | "url": "http://www.seleniumhq.org/", 489 | "github": "https://github.com/SeleniumHQ/selenium/", 490 | "stargazers": 1563 491 | }, { 492 | "name": "WebDriverIO", 493 | "url": "http://webdriver.io/", 494 | "github": "https://github.com/webdriverio/webdriverio/", 495 | "stargazers": 1073 496 | }, { 497 | "name": "Protractor", 498 | "url": "http://www.protractortest.org/" 499 | }, { 500 | "name": "Chai", 501 | "url": "http://chaijs.com/", 502 | "github": "https://github.com/jfirebaugh/konacha/", 503 | "stargazers": 977 504 | }, { 505 | "name": "Sinon.JS", 506 | "url": "http://sinonjs.org/", 507 | "github": "https://github.com/cjohansen/Sinon.JS/", 508 | "stargazers": 2230 509 | }, { 510 | "name": "Karma", 511 | "url": "http://karma-runner.github.io/", 512 | "github": "https://github.com/karma-runner/karma/", 513 | "stargazers": 5550 514 | }, { 515 | "name": "nodeunit", 516 | "github": "https://github.com/caolan/nodeunit/", 517 | "stargazers": 1608 518 | }, { 519 | "name": "tape", 520 | "github": "http://github.com/substack/tape", 521 | "stargazers": 1264 522 | }, { 523 | "name": "nightmare", 524 | "url": "http://nightmarejs.org/", 525 | "github": "https://github.com/segmentio/nightmare", 526 | "stargazers": 6110 527 | }] 528 | }, { 529 | "name": "Composite", 530 | "languages": { 531 | "zh-cn": "在线工具" 532 | }, 533 | "children": [{ 534 | "name": "Sauce Labs", 535 | "url": "https://saucelabs.com/" 536 | }, { 537 | "name": "Browser Stack", 538 | "url": "https://www.browserstack.com/" 539 | }, { 540 | "name": "Browser Shots", 541 | "url": "http://browsershots.org/" 542 | }, { 543 | "name": "Browserling", 544 | "url": "https://www.browserling.com/" 545 | }, { 546 | "name": "Browser Sandbox", 547 | "url": "https://spoon.net/browsers/" 548 | }, { 549 | "name": "Cross Browser Testing", 550 | "url": "https://crossbrowsertesting.com/" 551 | }, { 552 | "name": "Browsera", 553 | "url": "http://www.browsera.com/" 554 | }, { 555 | "name": "SortSite", 556 | "url": "http://www.powermapper.com/products/sortsite/checks/browser-compatibility/" 557 | }] 558 | }] 559 | }, { 560 | "name": "Frameworks / Libraries", 561 | "languages": { 562 | "zh-cn": "库 / 框架", 563 | "es-es": "Librerías y frameworks" 564 | }, 565 | "children": [{ 566 | "name": "JavaScript base library", 567 | "languages": { 568 | "zh-cn": "基础库" 569 | }, 570 | "children": [{ 571 | "name": "jQuery", 572 | "url": "https://jquery.com/", 573 | "github": "https://github.com/jquery/jquery/", 574 | "stargazers": 35652 575 | }, { 576 | "name": "Prototype", 577 | "url": "http://prototypejs.org/", 578 | "github": "https://github.com/sstephenson/prototype/", 579 | "stargazers": 3022 580 | }, { 581 | "name": "Zepto", 582 | "url": "http://zeptojs.com/", 583 | "github": "https://github.com/madrobby/zepto/", 584 | "stargazers": 9109 585 | }, { 586 | "name": "MooTool", 587 | "url": "http://mootools.net/", 588 | "github": "https://github.com/mootools/mootools-core/", 589 | "stargazers": 2168 590 | }] 591 | }, { 592 | "name": "Modular", 593 | "languages": { 594 | "zh-cn": "模块化", 595 | "es-es": "Módulos" 596 | }, 597 | "children": [{ 598 | "name": "ES6 Module" 599 | }, { 600 | "name": "CommonJS", 601 | "children": [{ 602 | "name": "webpack", 603 | "url": "http://webpack.github.io/", 604 | "github": "https://github.com/webpack/webpack/", 605 | "stargazers": 7271 606 | }, { 607 | "name": "browserify", 608 | "url": "http://browserify.org/", 609 | "github": "https://github.com/substack/node-browserify/", 610 | "stargazers": 8004 611 | }] 612 | }, { 613 | "name": "AMD", 614 | "children": [{ 615 | "name": "RequireJS", 616 | "url": "http://requirejs.org/", 617 | "github": "https://github.com/jrburke/requirejs/", 618 | "stargazers": 8002 619 | }] 620 | }, { 621 | "name": "UMD", 622 | "children": [{ 623 | "name": "umd", 624 | "github": "https://github.com/umdjs/umd/", 625 | "stargazers": 2764 626 | }] 627 | }] 628 | }, { 629 | "name": "JavaScript Framework", 630 | "languages": { 631 | "zh-cn": "框架" 632 | }, 633 | "children": [{ 634 | "name": "AngularJS", 635 | "url": "https://angularjs.org/", 636 | "github": "https://github.com/angular/angular.js/", 637 | "stargazers": 41780 638 | }, { 639 | "name": "Backbone", 640 | "url": "http://backbonejs.org/", 641 | "github": "https://github.com/jashkenas/backbone/", 642 | "stargazers": 22720 643 | }, { 644 | "name": "Knockout", 645 | "url": "http://knockoutjs.com/", 646 | "github": "https://github.com/SteveSanderson/knockout/", 647 | "stargazers": 6660 648 | }, { 649 | "name": "Ember", 650 | "url": "http://emberjs.com/", 651 | "github": "https://github.com/emberjs/ember.js/", 652 | "stargazers": 14555 653 | }, { 654 | "name": "React", 655 | "url": "http://facebook.github.io/react/", 656 | "github": "https://github.com/facebook/react/", 657 | "stargazers": 26617 658 | }, { 659 | "name": "polymer", 660 | "url": "https://www.polymer-project.org/", 661 | "github": "https://github.com/polymer/polymer/", 662 | "stargazers": 12217 663 | }, { 664 | "name": "Deft.js", 665 | "url": "http://deftjs.org/", 666 | "github": "https://github.com/deftjs/DeftJS/", 667 | "stargazers": 308 668 | }, { 669 | "name": "Vue", 670 | "url": "http://vuejs.org/", 671 | "github": "https://github.com/yyx990803/vue/", 672 | "stargazers": 6261 673 | }, { 674 | "name": "Riot", 675 | "url": "http://riotjs.com/", 676 | "github": "https://github.com/riot/riot", 677 | "stargazers": 7875 678 | }] 679 | }, { 680 | "name": "UI framework", 681 | "languages": { 682 | "zh-cn": "UI框架" 683 | }, 684 | "children": [{ 685 | "name": "Bootstrap", 686 | "url": "http://getbootstrap.com/", 687 | "github": "https://github.com/twbs/bootstrap/", 688 | "stargazers": 84763 689 | }, { 690 | "name": "Semantic UI", 691 | "url": "http://semantic-ui.com/", 692 | "github": "https://github.com/Semantic-Org/Semantic-UI/", 693 | "stargazers": 19552 694 | }, { 695 | "name": "Foundation", 696 | "url": "http://foundation.zurb.com/", 697 | "github": "https://github.com/zurb/foundation/", 698 | "stargazers": 20711 699 | }, { 700 | "name": "Material UI", 701 | "url": "http://material-ui.com/", 702 | "github": "https://github.com/callemall/material-ui/", 703 | "stargazers": 10048 704 | }, { 705 | "name": "WinJS", 706 | "url": "https://dev.windows.com/en-us/develop/winjs", 707 | "github": "https://github.com/winjs/winjs", 708 | "stargazers": 3621 709 | }, { 710 | "name": "Pure", 711 | "url": "http://purecss.io/", 712 | "github": "https://github.com/yahoo/pure/", 713 | "stargazers": 12367 714 | }, { 715 | "name": "Amaze UI", 716 | "url": "http://amazeui.org/", 717 | "github": "https://github.com/allmobilize/amazeui", 718 | "stargazers": 5965 719 | }] 720 | }, { 721 | "name": "WebSocket", 722 | "children": [{ 723 | "name": "Socket.io", 724 | "url": "http://socket.io/", 725 | "github": "https://github.com/Automattic/socket.io/", 726 | "stargazers": 19169 727 | }, { 728 | "name": "web-socket-js", 729 | "github": "https://github.com/gimite/web-socket-js/", 730 | "stargazers": 2115 731 | }] 732 | }, { 733 | "name": "Data Visualization", 734 | "languages": { 735 | "zh-cn": "数据可视化", 736 | "es-es": "Visualización de datos" 737 | }, 738 | "children": [{ 739 | "name": "D3", 740 | "url": "http://d3js.org/", 741 | "github": "https://github.com/mbostock/d3/wiki/Gallery/", 742 | "stargazers": 40794 743 | }, { 744 | "name": "Echarts", 745 | "url": "http://echarts.baidu.com", 746 | "github": "https://github.com/ecomfe/esl/", 747 | "stargazers": 396 748 | }, { 749 | "name": "HighCharts", 750 | "url": "http://www.highcharts.com/", 751 | "github": "https://github.com/highslide-software/highcharts.com/", 752 | "stargazers": 4041 753 | }, { 754 | "name": "Vis.js", 755 | "url": "http://visjs.org/", 756 | "github": "https://github.com/almende/vis/", 757 | "stargazers": 2993 758 | }, { 759 | "name": "Flot", 760 | "url": "http://www.flotcharts.org/", 761 | "github": "https://github.com/flot/flot/", 762 | "stargazers": 4531 763 | }] 764 | }, { 765 | "name": "WebGL", 766 | "children": [{ 767 | "name": "Three.js", 768 | "url": "http://threejs.org/", 769 | "github": "https://github.com/mrdoob/three.js/", 770 | "stargazers": 20758 771 | }, { 772 | "name": "Babylon.js", 773 | "url": "http://www.babylonjs.com/", 774 | "github": "https://github.com/BabylonJS/Babylon.js/", 775 | "stargazers": 2349 776 | }, { 777 | "name": "Pixi.js", 778 | "url": "http://www.pixijs.com/", 779 | "github": "https://github.com/GoodBoyDigital/pixi.js/", 780 | "stargazers": 8361 781 | }] 782 | }, { 783 | "name": "CSS3 Animation", 784 | "languages": { 785 | "zh-cn": "CSS3 动画" 786 | }, 787 | "children": [{ 788 | "name": "Animate.css", 789 | "url": "https://daneden.github.io/animate.css/", 790 | "github": "https://github.com/daneden/animate.css/", 791 | "stargazers": 24549 792 | }, { 793 | "name": "bounce.js", 794 | "url": "http://bouncejs.com/", 795 | "github": "https://github.com/tictail/bounce.js/", 796 | "stargazers": 3727 797 | }, { 798 | "name": "Effeckt.css", 799 | "url": "https://h5bp.github.io/Effeckt.css/", 800 | "github": "https://github.com/h5bp/Effeckt.css/", 801 | "stargazers": 9777 802 | }, { 803 | "name": "move.js", 804 | "url": "https://visionmedia.github.io/move.js/", 805 | "github": "https://github.com/visionmedia/move.js/", 806 | "stargazers": 2830 807 | }] 808 | }, { 809 | "name": "Flow Controller", 810 | "languages": { 811 | "zh-cn": "流程控制", 812 | "es-es": "Control de flujo" 813 | }, 814 | "children": [{ 815 | "name": "ES6", 816 | "children": [{ 817 | "name": "Promise" 818 | }, { 819 | "name": "Generator" 820 | }] 821 | }, { 822 | "name": "ES7", 823 | "children": [{ 824 | "name": "yield" 825 | }, { 826 | "name": "await" 827 | }] 828 | }, { 829 | "name": "async", 830 | "github": "https://github.com/caolan/async/", 831 | "stargazers": 14156 832 | }, { 833 | "name": "co", 834 | "github": "https://github.com/tj/co/", 835 | "stargazers": 3502 836 | }, { 837 | "name": "Promise", 838 | "children": [{ 839 | "name": "Bluebird", 840 | "github": "https://github.com/petkaantonov/bluebird/", 841 | "stargazers": 7530 842 | }, { 843 | "name": "q", 844 | "github": "https://github.com/kriskowal/q/", 845 | "stargazers": 9460 846 | }, { 847 | "name": "when.js", 848 | "github": "https://github.com/cujojs/when/", 849 | "stargazers": 2579 850 | }] 851 | }] 852 | }, { 853 | "name": "Functional", 854 | "languages": { 855 | "zh-cn": "函数式编程", 856 | "es-es": "Funcional" 857 | }, 858 | "children": [{ 859 | "name": "bacon.js", 860 | "url": "http://baconjs.github.io/", 861 | "github": "https://github.com/baconjs/bacon.js/", 862 | "stargazers": 4498 863 | }, { 864 | "name": "immutable.js", 865 | "url": "https://facebook.github.io/immutable-js/", 866 | "github": "https://github.com/facebook/immutable-js/", 867 | "stargazers": 7999 868 | }, { 869 | "name": "ramda", 870 | "url": "http://ramdajs.com/", 871 | "github": "http://github.com/ramda/ramda", 872 | "stargazers": 2792 873 | }, { 874 | "name": "underscore.js", 875 | "url": "http://underscorejs.org/", 876 | "github": "https://github.com/jashkenas/underscore", 877 | "stargazers": 15823 878 | }, { 879 | "name": "lodash", 880 | "url": "https://lodash.com/", 881 | "github": "https://github.com/lodash/lodash", 882 | "stargazers": 11071 883 | }, { 884 | "name": "ReactiveX", 885 | "url": "http://reactivex.io/", 886 | "github": "https://github.com/Reactive-Extensions/RxJS", 887 | "stargazers": 6720 888 | }] 889 | }, { 890 | "name": "Mobile UI", 891 | "languages": { 892 | "zh-cn": "手机 UI 框架" 893 | }, 894 | "children": [{ 895 | "name": "jQuery Mobile", 896 | "url": "https://jquerymobile.com/", 897 | "github": "https://github.com/jquery/jquery-mobile/", 898 | "stargazers": 9654 899 | }, { 900 | "name": "Jo", 901 | "url": "http://joapp.com/", 902 | "github": "https://github.com/davebalmer/jo/", 903 | "stargazers": 1227 904 | }, { 905 | "name": "Dojo Mobile", 906 | "url": "https://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html" 907 | }, { 908 | "name": "Lungo", 909 | "url": "http://lungo.tapquo.com/", 910 | "github": "https://github.com/tapquo/Lungo.js/", 911 | "stargazers": 2457 912 | }] 913 | }] 914 | }, { 915 | "name": "CSS Pre-processors", 916 | "languages": { 917 | "zh-cn": "CSS 预处理器", 918 | "es-es": "Pre-procesadores CSS" 919 | }, 920 | "children": [{ 921 | "name": "LESS", 922 | "children": [{ 923 | "name": "LESS", 924 | "url": "http://lesscss.org/", 925 | "github": "https://github.com/less/less.js/", 926 | "stargazers": 12679 927 | }, { 928 | "name": "Hat", 929 | "url": "http://lesshat.madebysource.com/", 930 | "github": "https://github.com/csshat/lesshat/", 931 | "stargazers": 2057 932 | }] 933 | }, { 934 | "name": "Sass(SCSS)", 935 | "children": [{ 936 | "name": "Compass", 937 | "url": "http://compass-style.org/", 938 | "github": "https://github.com/chriseppstein/compass/", 939 | "stargazers": 6406 940 | }, { 941 | "name": "Bourbon", 942 | "url": "http://bourbon.io/", 943 | "github": "https://github.com/thoughtbot/bourbon/", 944 | "stargazers": 6178 945 | }, { 946 | "name": "Gumby", 947 | "url": "http://www.gumbyframework.com/", 948 | "github": "https://github.com/GumbyFramework/Gumby/", 949 | "stargazers": 2920 950 | }] 951 | }, { 952 | "name": "Stylus", 953 | "children": [{ 954 | "name": "nib", 955 | "github": "https://github.com/tj/nib/", 956 | "stargazers": 1520 957 | }] 958 | }] 959 | }, { 960 | "name": "Future Standards", 961 | "languages": { 962 | "zh-cn": "未来标准" 963 | }, 964 | "children": [{ 965 | "name": "babel", 966 | "github": "https://github.com/babel/babel", 967 | "url": "https://babeljs.io/", 968 | "stargazers": 9712 969 | }] 970 | }, { 971 | "name": "Template", 972 | "languages": { 973 | "zh-cn": "模板引擎", 974 | "es-es": "Plantillas" 975 | }, 976 | "children": [{ 977 | "name": "Handlebars", 978 | "url": "http://handlebarsjs.com/", 979 | "github": "https://github.com/wycats/handlebars.js/", 980 | "stargazers": 8808 981 | }, { 982 | "name": "Haml", 983 | "url": "http://haml.info/", 984 | "github": "https://github.com/haml/haml/", 985 | "stargazers": 2778 986 | }, { 987 | "name": "Slim", 988 | "url": "http://slim-lang.com/", 989 | "github": "https://github.com/slim-template/slim/", 990 | "stargazers": 3480 991 | }, { 992 | "name": "Jade", 993 | "url": "http://jade-lang.com/", 994 | "github": "https://github.com/jadejs/jade/", 995 | "stargazers": 8958 996 | }, { 997 | "name": "Ejs", 998 | "url": "http://www.embeddedjs.com/" 999 | }, { 1000 | "name": "Spacebars", 1001 | "url": "http://meteorcapture.com/spacebars/" 1002 | }, { 1003 | "name": "mustache", 1004 | "url": "http://mustache.github.io/", 1005 | "github": "https://github.com/janl/mustache.js/", 1006 | "stargazers": 8139 1007 | }] 1008 | }, { 1009 | "name": "Modernisation", 1010 | "languages": { 1011 | "zh-cn": "统一化" 1012 | }, 1013 | "children": [{ 1014 | "name": "Normalize", 1015 | "url": "http://necolas.github.io/normalize.css/", 1016 | "github": "https://github.com/necolas/normalize.css/", 1017 | "stargazers": 17966 1018 | }, { 1019 | "name": "Reset" 1020 | }] 1021 | }, { 1022 | "name": "Best Practices", 1023 | "languages": { 1024 | "zh-cn": "最佳实践", 1025 | "es-es": "Buenas prácticas" 1026 | }, 1027 | "children": [{ 1028 | "name": "SEO", 1029 | "url": "https://en.wikipedia.org/wiki/Search_engine_optimization" 1030 | }, { 1031 | "name": "Responsiveness" 1032 | }, { 1033 | "name": "CDN", 1034 | "url": "https://en.wikipedia.org/wiki/Content_delivery_network" 1035 | }] 1036 | }, { 1037 | "name": "Security", 1038 | "languages": { 1039 | "zh-cn": "安全", 1040 | "es-es": "Seguridad" 1041 | }, 1042 | "children": [{ 1043 | "name": "Sandbox" 1044 | }, { 1045 | "name": "XSS", 1046 | "url": "https://en.wikipedia.org/wiki/Cross-site_scripting" 1047 | }, { 1048 | "name": "CORS", 1049 | "url": "http://www.w3.org/TR/cors/" 1050 | }] 1051 | }, { 1052 | "name": "Intermediate Languages", 1053 | "languages": { 1054 | "zh-cn": "中间语言", 1055 | "es-es": "Lenguajes intermedios" 1056 | }, 1057 | "children": [{ 1058 | "name": "CoffeeScript", 1059 | "url": "http://coffeescript.org/", 1060 | "github": "https://github.com/jashkenas/coffeescript/", 1061 | "stargazers": 11755 1062 | }, { 1063 | "name": "TypeScript", 1064 | "url": "http://www.typescriptlang.org/", 1065 | "github": "https://github.com/Microsoft/TypeScript/", 1066 | "stargazers": 6379 1067 | }, { 1068 | "name": "ClojureScript", 1069 | "github": "https://github.com/clojure/clojurescript/", 1070 | "stargazers": 4876 1071 | }, { 1072 | "name": "JSX (Facebook)", 1073 | "url": "http://facebook.github.io/react/docs/jsx-in-depth.html" 1074 | }] 1075 | }, { 1076 | "name": "Mobile Application Development", 1077 | "languages": { 1078 | "zh-cn": "移动应用开发", 1079 | "es-es": "Empaquetadores de Apps para móvil" 1080 | }, 1081 | "children": [{ 1082 | "name": "PhoneGap / Cordova", 1083 | "url": "https://cordova.apache.org/", 1084 | "github": "https://github.com/apache/cordova-android/", 1085 | "stargazers": 1166 1086 | }, { 1087 | "name": "MUI", 1088 | "url": "http://dev.dcloud.net.cn/mui/", 1089 | "github": "https://github.com/dcloudio/mui/", 1090 | "stargazers": 1476 1091 | }, { 1092 | "name": "React Native", 1093 | "url": "https://facebook.github.io/react-native/", 1094 | "github": "https://github.com/facebook/react-native/", 1095 | "stargazers": 19802 1096 | }, { 1097 | "name": "Ionic", 1098 | "url": "http://ionicframework.com/", 1099 | "github": "https://github.com/driftyco/ionic/", 1100 | "stargazers": 19472 1101 | }] 1102 | }, { 1103 | "name": "Desktop Application Development", 1104 | "languages": { 1105 | "zh-cn": "桌面应用开发" 1106 | }, 1107 | "children": [{ 1108 | "name": "Electron", 1109 | "url": "http://electron.atom.io/", 1110 | "github": "https://github.com/atom/electron", 1111 | "stargazers": 16896 1112 | }, { 1113 | "name": "NW.js", 1114 | "url": "http://nwjs.io/", 1115 | "github": "https://github.com/nwjs/nw.js", 1116 | "stargazers": 24680 1117 | }] 1118 | }] 1119 | } 1120 | -------------------------------------------------------------------------------- /ux/dndTree.js: -------------------------------------------------------------------------------- 1 |  2 | (function() { 3 | var isPhantom = /PhantomJS/ig.test(navigator.userAgent); 4 | var locale = location.search.split("locale=").pop().split("&").shift(); 5 | 6 | var parseName = function(object) { 7 | if (!object.languages) return object.name; 8 | return object.languages[locale] || object.name; 9 | } 10 | 11 | // Get JSON data 12 | var treeJSON = d3.json('WebFrontEndStack.json', function(error, treeData) { 13 | 14 | // Calculate total nodes, max label length 15 | var totalNodes = 0; 16 | var maxLabelLength = []; 17 | // variables for drag/drop 18 | var selectedNode = null; 19 | var draggingNode = null; 20 | // panning variables 21 | var panSpeed = 200; 22 | var panBoundary = 20; // Within 20px from edges will pan when dragging. 23 | // Misc. variables 24 | var i = 0; 25 | var duration = 750; 26 | var root; 27 | 28 | // size of the diagram 29 | var viewerWidth = $(document).width(); 30 | var viewerHeight = $(document).height(); 31 | 32 | var tree = d3.layout.tree() 33 | .size([viewerHeight, viewerWidth]); 34 | 35 | // define a d3 diagonal projection for use by the node paths later on. 36 | var diagonal = d3.svg.diagonal() 37 | .projection(function(d) { 38 | return [d.y, d.x]; 39 | }); 40 | 41 | // A recursive helper function for performing some setup by walking through all nodes 42 | 43 | function visit(parent, visitFn, childrenFn, depth) { 44 | if (!parent) return; 45 | 46 | visitFn(parent, depth); 47 | 48 | var children = childrenFn(parent); 49 | if (children) { 50 | var count = children.length; 51 | var d = depth + 1; 52 | for (var i = 0; i < count; i++) { 53 | visit(children[i], visitFn, childrenFn, d); 54 | } 55 | } 56 | } 57 | 58 | // Call visit function to establish maxLabelLength 59 | visit(treeData, function(d, depth) { 60 | totalNodes++; 61 | if (maxLabelLength[depth] == undefined) 62 | maxLabelLength[depth] = 0; 63 | maxLabelLength[depth] = Math.max(parseName(d).length, maxLabelLength[depth]); 64 | }, function(d) { 65 | return d.children && d.children.length > 0 ? d.children : null; 66 | }, 0); 67 | 68 | 69 | // sort the tree according to the node names 70 | 71 | function sortTree() { 72 | tree.sort(function(a, b) { 73 | return parseName(b).toLowerCase() < parseName(a).toLowerCase() ? 1 : -1; 74 | }); 75 | } 76 | // Sort the tree initially incase the JSON isn't in a sorted order. 77 | //sortTree(); 78 | 79 | // TODO: Pan function, can be better implemented. 80 | 81 | function pan(domNode, direction) { 82 | var speed = panSpeed; 83 | if (panTimer) { 84 | clearTimeout(panTimer); 85 | translateCoords = d3.transform(svgGroup.attr("transform")); 86 | if (direction == 'left' || direction == 'right') { 87 | translateX = direction == 'left' ? translateCoords.translate[0] + speed : translateCoords.translate[0] - speed; 88 | translateY = translateCoords.translate[1]; 89 | } else if (direction == 'up' || direction == 'down') { 90 | translateX = translateCoords.translate[0]; 91 | translateY = direction == 'up' ? translateCoords.translate[1] + speed : translateCoords.translate[1] - speed; 92 | } 93 | scaleX = translateCoords.scale[0]; 94 | scaleY = translateCoords.scale[1]; 95 | scale = zoomListener.scale(); 96 | svgGroup.transition().attr("transform", "translate(" + translateX + "," + translateY + ")scale(" + scale + ")"); 97 | d3.select(domNode).select('g.node').attr("transform", "translate(" + translateX + "," + translateY + ")"); 98 | zoomListener.scale(zoomListener.scale()); 99 | zoomListener.translate([translateX, translateY]); 100 | panTimer = setTimeout(function() { 101 | pan(domNode, speed, direction); 102 | }, 50); 103 | } 104 | } 105 | 106 | // Define the zoom function for the zoomable tree 107 | 108 | function zoom() { 109 | svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 110 | } 111 | 112 | 113 | // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents 114 | var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom); 115 | 116 | function initiateDrag(d, domNode) { 117 | draggingNode = d; 118 | d3.select(domNode).select('.ghostCircle').attr('pointer-events', 'none'); 119 | d3.selectAll('.ghostCircle').attr('class', 'ghostCircle show'); 120 | d3.select(domNode).attr('class', 'node activeDrag'); 121 | 122 | svgGroup.selectAll("g.node").sort(function(a, b) { // select the parent and sort the path's 123 | if (a.id != draggingNode.id) return 1; // a is not the hovered element, send "a" to the back 124 | else return -1; // a is the hovered element, bring "a" to the front 125 | }); 126 | // if nodes has children, remove the links and nodes 127 | if (nodes.length > 1) { 128 | // remove link paths 129 | links = tree.links(nodes); 130 | nodePaths = svgGroup.selectAll("path.link") 131 | .data(links, function(d) { 132 | return d.target.id; 133 | }).remove(); 134 | // remove child nodes 135 | nodesExit = svgGroup.selectAll("g.node") 136 | .data(nodes, function(d) { 137 | return d.id; 138 | }).filter(function(d, i) { 139 | if (d.id == draggingNode.id) { 140 | return false; 141 | } 142 | return true; 143 | }).remove(); 144 | } 145 | 146 | // remove parent link 147 | parentLink = tree.links(tree.nodes(draggingNode.parent)); 148 | svgGroup.selectAll('path.link').filter(function(d, i) { 149 | if (d.target.id == draggingNode.id) { 150 | return true; 151 | } 152 | return false; 153 | }).remove(); 154 | 155 | dragStarted = null; 156 | } 157 | 158 | // define the baseSvg, attaching a class for styling and the zoomListener 159 | var baseSvg = d3.select("#tree-container").append("svg:svg") 160 | .attr("width", viewerWidth) 161 | .attr("height", viewerHeight) 162 | .attr("class", "overlay") 163 | .call(zoomListener) 164 | 165 | 166 | // Define the drag listeners for drag/drop behaviour of nodes. 167 | dragListener = d3.behavior.drag() 168 | .on("dragstart", function(d) { 169 | if (d == root) { 170 | return; 171 | } 172 | dragStarted = true; 173 | nodes = tree.nodes(d); 174 | d3.event.sourceEvent.stopPropagation(); 175 | // 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'); 176 | }) 177 | .on("drag", function(d) { 178 | if (d == root) { 179 | return; 180 | } 181 | if (dragStarted) { 182 | domNode = this; 183 | initiateDrag(d, domNode); 184 | } 185 | 186 | // get coords of mouseEvent relative to svg container to allow for panning 187 | relCoords = d3.mouse($('svg').get(0)); 188 | if (relCoords[0] < panBoundary) { 189 | panTimer = true; 190 | pan(this, 'left'); 191 | } else if (relCoords[0] > ($('svg').width() - panBoundary)) { 192 | 193 | panTimer = true; 194 | pan(this, 'right'); 195 | } else if (relCoords[1] < panBoundary) { 196 | panTimer = true; 197 | pan(this, 'up'); 198 | } else if (relCoords[1] > ($('svg').height() - panBoundary)) { 199 | panTimer = true; 200 | pan(this, 'down'); 201 | } else { 202 | try { 203 | clearTimeout(panTimer); 204 | } catch (e) { 205 | 206 | } 207 | } 208 | 209 | d.x0 += d3.event.dy; 210 | d.y0 += d3.event.dx; 211 | var node = d3.select(this); 212 | node.attr("transform", "translate(" + d.y0 + "," + d.x0 + ")"); 213 | updateTempConnector(); 214 | }).on("dragend", function(d) { 215 | if (d == root) { 216 | return; 217 | } 218 | domNode = this; 219 | if (selectedNode) { 220 | // now remove the element from the parent, and insert it into the new elements children 221 | var index = draggingNode.parent.children.indexOf(draggingNode); 222 | if (index > -1) { 223 | draggingNode.parent.children.splice(index, 1); 224 | } 225 | if (typeof selectedNode.children !== 'undefined' || typeof selectedNode._children !== 'undefined') { 226 | if (typeof selectedNode.children !== 'undefined') { 227 | selectedNode.children.push(draggingNode); 228 | } else { 229 | selectedNode._children.push(draggingNode); 230 | } 231 | } else { 232 | selectedNode.children = []; 233 | selectedNode.children.push(draggingNode); 234 | } 235 | // Make sure that the node being added to is expanded so user can see added node is correctly moved 236 | expand(selectedNode); 237 | sortTree(); 238 | endDrag(); 239 | } else { 240 | endDrag(); 241 | } 242 | }); 243 | 244 | function endDrag() { 245 | selectedNode = null; 246 | d3.selectAll('.ghostCircle').attr('class', 'ghostCircle'); 247 | d3.select(domNode).attr('class', 'node'); 248 | // now restore the mouseover event or we won't be able to drag a 2nd time 249 | d3.select(domNode).select('.ghostCircle').attr('pointer-events', ''); 250 | updateTempConnector(); 251 | if (draggingNode !== null) { 252 | update(root); 253 | centerNode(draggingNode); 254 | draggingNode = null; 255 | } 256 | } 257 | 258 | // Helper functions for collapsing and expanding nodes. 259 | 260 | function collapse(d) { 261 | if (d.children) { 262 | d._children = d.children; 263 | d._children.forEach(collapse); 264 | d.children = null; 265 | } 266 | } 267 | 268 | function expand(d) { 269 | if (d._children) { 270 | d.children = d._children; 271 | d.children.forEach(expand); 272 | d._children = null; 273 | } 274 | } 275 | 276 | var overCircle = function(d) { 277 | selectedNode = d; 278 | updateTempConnector(); 279 | }; 280 | var outCircle = function(d) { 281 | selectedNode = null; 282 | updateTempConnector(); 283 | }; 284 | 285 | // Function to update the temporary connector indicating dragging affiliation 286 | var updateTempConnector = function() { 287 | var data = []; 288 | if (draggingNode !== null && selectedNode !== null) { 289 | // have to flip the source coordinates since we did this for the existing connectors on the original tree 290 | data = [{ 291 | source: { 292 | x: selectedNode.y0, 293 | y: selectedNode.x0 294 | }, 295 | target: { 296 | x: draggingNode.y0, 297 | y: draggingNode.x0 298 | } 299 | }]; 300 | } 301 | var link = svgGroup.selectAll(".templink").data(data); 302 | 303 | link.enter().append("path") 304 | .attr("class", "templink") 305 | .attr("d", d3.svg.diagonal()) 306 | .attr('pointer-events', 'none'); 307 | 308 | link.attr("d", d3.svg.diagonal()); 309 | 310 | link.exit().remove(); 311 | }; 312 | 313 | // Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children. 314 | 315 | function centerNode(source) { 316 | scale = zoomListener.scale(); 317 | 318 | x = -source.y0; 319 | y = -source.x0; 320 | x = x * scale + viewerWidth / 2; 321 | y = y * scale + viewerHeight / 2; 322 | d3.select('g').transition() 323 | .duration(duration) 324 | .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")"); 325 | zoomListener.scale(scale); 326 | zoomListener.translate([x, y]); 327 | } 328 | 329 | function leftNode(source) { 330 | scale = zoomListener.scale(); 331 | 332 | x = 100 * scale; 333 | y = source.y0 * scale; 334 | console.log(x); 335 | 336 | d3.select('g').transition() 337 | .duration(duration) 338 | .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")"); 339 | zoomListener.scale(scale); 340 | zoomListener.translate([x, y]); 341 | } 342 | 343 | // Toggle children function 344 | 345 | function toggleChildren(d) { 346 | if (d.children) { 347 | d._children = d.children; 348 | d.children = null; 349 | } else if (d._children) { 350 | d.children = d._children; 351 | d._children = null; 352 | } 353 | return d; 354 | } 355 | 356 | // Toggle children on click. 357 | 358 | function click(d) { 359 | if (d3.event.defaultPrevented) return; // click suppressed 360 | d = toggleChildren(d); 361 | update(d); 362 | centerNode(d); 363 | } 364 | 365 | function update(source) { 366 | // Compute the new height, function counts total children of root node and sets tree height accordingly. 367 | // This prevents the layout looking squashed when new nodes are made visible or looking sparse when nodes are removed 368 | // This makes the layout more consistent. 369 | var levelWidth = [1]; 370 | var childCount = function(level, n) { 371 | 372 | if (n.children && n.children.length > 0) { 373 | if (levelWidth.length <= level + 1) levelWidth.push(0); 374 | 375 | levelWidth[level + 1] += n.children.length; 376 | n.children.forEach(function(d) { 377 | childCount(level + 1, d); 378 | }); 379 | } 380 | }; 381 | childCount(0, root); 382 | var newHeight = d3.max(levelWidth) * 25; // 25 pixels per line 383 | tree = tree.size([newHeight, viewerWidth]); 384 | 385 | // Compute the new tree layout. 386 | var nodes = tree.nodes(root).reverse(), 387 | links = tree.links(nodes); 388 | 389 | // Set widths between levels based on maxLabelLength. 390 | nodes.forEach(function(d) { 391 | var labelLength = 0; 392 | for (var j = 0; j <= d.depth; j++) { 393 | labelLength += maxLabelLength[j]; 394 | } 395 | d.y = labelLength * 10; //maxLabelLength * 10px 396 | // alternatively to keep a fixed scale one can set a fixed depth per level 397 | // Normalize for fixed-depth by commenting out below line 398 | // d.y = (d.depth * 500); //500px per level. 399 | }); 400 | 401 | // Update the nodes… 402 | node = svgGroup.selectAll("g.node") 403 | .data(nodes, function(d) { 404 | return d.id || (d.id = ++i); 405 | }); 406 | 407 | // Enter any new nodes at the parent's previous position. 408 | var nodeEnter = node.enter().append("g") 409 | .call(dragListener) 410 | .attr("class", "node") 411 | .attr("transform", function(d) { 412 | return "translate(" + source.y0 + "," + source.x0 + ")"; 413 | }) 414 | .on('click', click) 415 | .append("a") 416 | .attr("xlink:href", function(d) { 417 | return d.url || d.github; 418 | }) 419 | .attr("target", "_blank"); 420 | 421 | nodeEnter.append("circle") 422 | .attr('class', 'nodeCircle') 423 | .attr("r", 0) 424 | .style("fill", function(d) { 425 | return d._children ? "lightsteelblue" : "#fff"; 426 | }); 427 | 428 | nodeEnter.append("text") 429 | .attr("x", function(d) { 430 | return d.children || d._children ? -10 : 10; 431 | }) 432 | .attr("dy", ".35em") 433 | .attr('class', 'nodeText') 434 | .attr("text-anchor", function(d) { 435 | return d.children || d._children ? "end" : "start"; 436 | }) 437 | .text(function(d) { 438 | return parseName(d); 439 | }) 440 | .style("fill-opacity", 0); 441 | 442 | // phantom node to give us mouseover in a radius around it 443 | nodeEnter.append("circle") 444 | .attr('class', 'ghostCircle') 445 | .attr("r", 30) 446 | .attr("opacity", 0.2) // change this to zero to hide the target area 447 | .style("fill", "red") 448 | .attr('pointer-events', 'mouseover') 449 | .on("mouseover", function(node) { 450 | overCircle(node); 451 | }) 452 | .on("mouseout", function(node) { 453 | outCircle(node); 454 | }); 455 | 456 | // Update the text to reflect whether node has children or not. 457 | node.select('text') 458 | .attr("x", function(d) { 459 | return d.children || d._children ? -10 : 10; 460 | }) 461 | .attr("text-anchor", function(d) { 462 | return d.children || d._children ? "end" : "start"; 463 | }) 464 | .text(function(d) { 465 | return parseName(d); 466 | }); 467 | 468 | // Change the circle fill depending on whether it has children and is collapsed 469 | node.select("circle.nodeCircle") 470 | .attr("r", 4.5) 471 | .style("fill", function(d) { 472 | return d._children ? "lightsteelblue" : "#fff"; 473 | }); 474 | 475 | // Transition nodes to their new position. 476 | var nodeUpdate = node.transition() 477 | .duration(duration) 478 | .attr("transform", function(d) { 479 | return "translate(" + d.y + "," + d.x + ")"; 480 | }); 481 | 482 | // Fade the text in 483 | nodeUpdate.select("text") 484 | .style("fill-opacity", 1); 485 | 486 | // Transition exiting nodes to the parent's new position. 487 | var nodeExit = node.exit().transition() 488 | .duration(duration) 489 | .attr("transform", function(d) { 490 | return "translate(" + source.y + "," + source.x + ")"; 491 | }) 492 | .remove(); 493 | 494 | nodeExit.select("circle") 495 | .attr("r", 0); 496 | 497 | nodeExit.select("text") 498 | .style("fill-opacity", 0); 499 | 500 | // Update the links… 501 | var link = svgGroup.selectAll("path.link") 502 | .data(links, function(d) { 503 | return d.target.id; 504 | }); 505 | 506 | // Enter any new links at the parent's previous position. 507 | link.enter().insert("path", "g") 508 | .attr("class", "link") 509 | .attr("d", function(d) { 510 | var o = { 511 | x: source.x0, 512 | y: source.y0 513 | }; 514 | return diagonal({ 515 | source: o, 516 | target: o 517 | }); 518 | }); 519 | 520 | // Transition links to their new position. 521 | link.transition() 522 | .duration(duration) 523 | .attr("d", diagonal); 524 | 525 | // Transition exiting nodes to the parent's new position. 526 | link.exit().transition() 527 | .duration(duration) 528 | .attr("d", function(d) { 529 | var o = { 530 | x: source.x, 531 | y: source.y 532 | }; 533 | return diagonal({ 534 | source: o, 535 | target: o 536 | }); 537 | }) 538 | .remove(); 539 | 540 | // Stash the old positions for transition. 541 | nodes.forEach(function(d) { 542 | d.x0 = d.x; 543 | d.y0 = d.y; 544 | }); 545 | } 546 | 547 | // Append a group which holds all nodes and which the zoom Listener can act upon. 548 | var svgGroup = baseSvg.append("g"); 549 | 550 | // Define the root 551 | root = treeData; 552 | root.x0 = viewerHeight / 2; 553 | root.y0 = 0; 554 | update(root); 555 | 556 | // Layout the tree initially and center on the root node. 557 | if (isPhantom) { 558 | zoomListener.scale(1.25); 559 | leftNode(root); 560 | } else { 561 | zoomListener.scale(0.25); 562 | centerNode(root); 563 | } 564 | 565 | // 566 | }); 567 | 568 | })(); 569 | --------------------------------------------------------------------------------