web前端栈:浏览器、平台库、框架、工具等。

web前端栈:浏览器、平台库、框架、工具等。

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.


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.1URISessionAuthenticationRequestResponse HTTP/2CompressionMinificationServer Push WebSocket The 3 Pillars HTML (HyperText Markup Language)CSS (Cascading Style Sheets)JavaScript Standards W3C HTMLCSSXHTMLXML Core Concepts HTML DOMElementAttribute JavaScript PrototypeScopeClosureJSON (JavaSript Object Notation)AJAX (Asynchronous JavaScript and XML) CSS SelectorPrioritySpecificityBox Model Rendering 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 ExtensionsPlugins Resources ImagesIconsFontsAudiosVideos Editors Sublime TextWebStormAtom [GitHub]VimEmacsBrackets [GitHub]Light Table [GitHub]Visual StudioVisual Studio Code (Linux & Mac) [GitHub]Dreamweaver ;-)FrontPage / SharePoint Designer ;-) Build Tasks MinificationCompilationConcatenationUglificationImage OptimizationUnit Testing Build Tools Grunt [GitHub]Gulp [GitHub]Brunch [GitHub]YeomanBroccoli [GitHub] Debug Developer ToolsFirebug [GitHub] Base Tools Node.js [GitHub]Phantom.js [GitHub]SpiderMonkey Quality JSLint [GitHub]JSHint [GitHub]jscs [GitHub]Closure Linter Package 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 TestingBrowseraSortSite Frameworks / 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 PromiseGenerator ES7 yieldawait async [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]Reset Best Practices SEOResponsivenessCDN Security SandboxXSSCORS Intermediate 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]

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。