Overflow Stack
The overflow stack family (Web Front End Stack, Database Stack, .NET Stack etc.): http://overflowstack.github.io
Localization
中文: https://github.com/unruledboy/WebFrontEndStack/blob/master/README.zh-cn.md
Español: https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md
WebFrontEndStack
Web front-end stack: browsers, platforms, libraries, frameworks, tools etc.
![Image of Web Front End Stack](Web Front End Stack.png)
Generate image yourself
Prepare for environment
You should have Visual Studio 2010+ installed in Windows.
Install nodejs. (Shoule be >= iojs 1.8.0)
Install Phantomjs.
Install Python 2.7.
npm install
If the error occurs, you can check the dependence of phantomjs-node, node-gyp.
Run commands
npm start for start a server to open the html directly.
npm run build for generate the image.
Options
-h, --help Display
help message.
-p, --port number (Default:
3000) Set the port what express listening.
-ues, --update_existed_stargazers (Default:
false) Update project
's stargazers including existed.
--phantomjs The task to generate the image.
--readme The task to update readme.
--updatestargazers The task to update the count of the stargazers.
What and why?
Have you ever wondered: * what technologies web front end really includes? * how many do I possess?
I could not find a really comprehensive diagram that shows the web front end technology stack, so I come up with my own version.
There might be issues here and there, like the category, the individual ones, but the beauty is you can modify it as you want.
You can have a graphical preview here (use mouse to move / zoom):
https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm
The Web Front End Stack
Web Front End
Browser
Internet ExplorerChromeFirefoxSafariOperaEdgeNetscape ;-)Protocol
HTTP/1.1
URISessionAuthenticationRequestResponseHTTP/2
CompressionMinificationServer PushWebSocketThe 3 Pillars
HTML (HyperText Markup Language)CSS (Cascading Style Sheets)JavaScriptStandards
W3C
HTMLCSSXHTMLXMLCore Concepts
HTML
DOMElementAttributeJavaScript
PrototypeScopeClosureJSON (JavaSript Object Notation)AJAX (Asynchronous JavaScript and XML)CSS
SelectorPrioritySpecificityBox ModelRendering Engine
Trident (IE)Blink / prev. WebKit (Chrome)Gecko (Firefox)WebKit (Safari)Blink / prev. Presto (Opera)EdgeHTML (Edge)JavaScript Engine
JScript (IE8- / ASP)Chakra (IE9+ / Edge)V8 (Chrome / Opera / Nodejs / MongoDB) [GitHub]SpiderMonkey (Firefox)JavaScriptCore (Safari)Runtime
CookieLocal CacheSession StorageLocal StorageComponents
ExtensionsPluginsResources
ImagesIconsFontsAudiosVideosEditors
Sublime TextWebStormAtom [GitHub]VimEmacsBrackets [GitHub]Light Table [GitHub]Visual StudioVisual Studio Code (Linux & Mac) [GitHub]Dreamweaver ;-)FrontPage / SharePoint Designer ;-)Build Tasks
MinificationCompilationConcatenationUglificationImage OptimizationUnit TestingBuild Tools
Grunt [GitHub]Gulp [GitHub]Brunch [GitHub]YeomanBroccoli [GitHub]Debug
Developer ToolsFirebug [GitHub]Base Tools
Node.js [GitHub]Phantom.js [GitHub]SpiderMonkeyQuality
JSLint [GitHub]JSHint [GitHub]jscs [GitHub]Closure LinterPackage
npm [GitHub]Bower [GitHub]yarn [GitHub]Test
Tools
QUnit [GitHub]Jasmine [GitHub]Mocha [GitHub]Selenium [GitHub]WebDriverIO [GitHub]ProtractorChai [GitHub]Sinon.JS [GitHub]Karma [GitHub]nodeunit [GitHub]tape [GitHub]nightmare [GitHub]Enzyme [GitHub]Composite
Sauce LabsBrowser StackBrowser ShotsBrowserlingBrowser SandboxCross Browser TestingBrowseraSortSiteFrameworks / Libraries
JavaScript base library
jQuery [GitHub]Prototype [GitHub]Zepto [GitHub]MooTool [GitHub]Modular
ES6 ModuleCommonJS
webpack [GitHub]browserify [GitHub]AMD
RequireJS [GitHub]UMD
umd [GitHub]JavaScript Framework
AngularJS [GitHub]Backbone [GitHub]Knockout [GitHub]Ember [GitHub]React [GitHub]polymer [GitHub]Deft.js [GitHub]Vue [GitHub]Riot [GitHub]UI framework
Bootstrap [GitHub]Semantic UI [GitHub]Foundation [GitHub]Material UI [GitHub]WinJS [GitHub]Pure [GitHub]Amaze UI [GitHub]Onsne UI [GitHub]WebSocket
Socket.io [GitHub]web-socket-js [GitHub]Data Visualization
D3 [GitHub]Echarts [GitHub]HighCharts [GitHub]Vis.js [GitHub]Flot [GitHub]WebGL
Three.js [GitHub]Babylon.js [GitHub]Pixi.js [GitHub]CSS3 Animation
Animate.css [GitHub]bounce.js [GitHub]Effeckt.css [GitHub]move.js [GitHub]Flow Controller
ES6
PromiseGeneratorES7
yieldawaitasync [GitHub]co [GitHub]Promise
Bluebird [GitHub]q [GitHub]when.js [GitHub]Functional
bacon.js [GitHub]immutable.js [GitHub]ramda [GitHub]underscore.js [GitHub]lodash [GitHub]ReactiveX [GitHub]Mobile UI
jQuery Mobile [GitHub]Jo [GitHub]Dojo MobileLungo [GitHub]CSS Pre-processors
LESS
LESS [GitHub]Hat [GitHub]Sass(SCSS)
Compass [GitHub]Bourbon [GitHub]Gumby [GitHub]Stylus
nib [GitHub]Future Standards
babel [GitHub]Template
Handlebars [GitHub]Haml [GitHub]Slim [GitHub]Jade [GitHub]EjsSpacebarsmustache [GitHub]Modernisation
Normalize [GitHub]ResetBest Practices
SEOResponsivenessCDNSecurity
SandboxXSSCORSIntermediate Languages
CoffeeScript [GitHub]TypeScript [GitHub]ClojureScript [GitHub]JSX (Facebook)Mobile Application Development
PhoneGap / Cordova [GitHub]MUI [GitHub]React Native [GitHub]Ionic [GitHub]Desktop Application Development
Electron [GitHub]NW.js [GitHub]