WebFrontEndStack

爆栈

系统开发技术栈、Web前端开发技术栈、数据库技术栈、.NET技术栈！ http://overflowstack.github.io

本地化

English: https://github.com/unruledboy/WebFrontEndStack/

中文博客: /article/4595507.html

Español: https://github.com/unruledboy/WebFrontEndStack/blob/master/README.es-es.md

Web前端技术栈

比较全面的浏览器、平台、类库、框架、工具等。

自行生成预览图

准备环境

您应该安装Visual Studio 2010+。

安装 nodejs.

安装 Phantomjs.

安装 Python 2.7.

npm install

如果出现错误，您可以检查 [phantomjs-node] 的依赖(https://github.com/sgentle/phantomjs-node/wiki), node-gyp.

运行命令

npm start

运行服务并直接打开主html文件。

npm run build

生成预览图。

选项

-h, --help                           Display this message.
-p, --port number                    (Default: 3000) Set the port what express listening.
-ues, --update_existed_stargazers    (Default: false) Update project's stargazers including existed.
--phantomjs                          The task to generate the image.
--readme                             The task to update readme.
--updatestargazers                   The task to update the count of the stargazers.

为什么？

大家是否想过：

Web前端开发究竟包含哪些技术呢？
我所掌握的技术这个子集，在Web前端技术大系这个超集里面占的比例是多少呢？
我究竟还没有掌握多少Web前端技术呢？
面试的时候会考哪些技术呢？

那么，Web前端开发是否也应该有这样的技术栈概览图呢？搜索了很久，没有找到一个符合我要求的“较为全面”地表述Web前端技术大系的图表。所以我们自行设计了这个Web前端技术栈。

这个图表里的分类未必准确，相关技术也难免会有遗漏，欢迎大家指点以便不断改进。

Web前端技术实在太繁多限于篇幅，，这里没有罗列一些技术。

您可以点击下面链接查看交互式预览图(用鼠标移动/缩放/点击节点打开相关网站)：

https://rawgit.com/unruledboy/WebFrontEndStack/master/ux/WebFrontEndStack.htm?locale=zh-cn

Web前端技术栈

Web前端开发技术栈

浏览器

Internet Explorer
Chrome
Firefox
Safari
Opera
Edge
Netscape ;-)

协议

HTTP/1.1

链接
会话
授权
请求
响应

HTTP/2

压缩
打包
服务器端推送

WebSocket

Web三剑客

HTML (HyperText Markup Language)
CSS (Cascading Style Sheets)
JavaScript

标准

W3C

HTML
CSS
XHTML
XML

核心概念

HTML

DOM
Element
Attribute

JavaScript

Prototype
Scope
Closure
JSON (JavaSript Object Notation)
AJAX (Asynchronous JavaScript and XML)

CSS

Selector
Priority
Specificity
Box Model

渲染引擎

Trident (IE)
Blink / prev. WebKit (Chrome)
Gecko (Firefox)
WebKit (Safari)
Blink / prev. Presto (Opera)
EdgeHTML (Edge)

脚本引擎

JScript (IE8- / ASP)
Chakra (IE9+ / Edge)
V8 (Chrome / Opera / Nodejs / MongoDB) [GitHub]
SpiderMonkey (Firefox)
Nitro (Safari)

运行时

Cookie
Local Cache
Session Storage
Local Storage
Components

Extensions
Plugins

Resources

Images
Icons
Fonts
Audios
Videos

编辑器

Sublime Text
WebStorm
Atom [GitHub]
Vim
Emacs
Brackets [GitHub]
Light Table [GitHub]
Visual Studio
Visual Studio Code [GitHub]
Dreamweaver ;-)
FrontPage / SharePoint Designer ;-)

编译任务

精简
编译
合并
混淆
图像优化
单元测试

编译工具

Grunt [GitHub]
Gulp [GitHub]
Brunch [GitHub]
Yeoman
Broccoli [GitHub]

调试

Developer Tools
Firebug [GitHub]

基础工具

Node.js [GitHub]
Phantom.js [GitHub]
SpiderMonkey

质量控制

JSLint [GitHub]
JSHint [GitHub]
jscs [GitHub]
Closure Linter

包管理

npm [GitHub]
Bower [GitHub]

测试

工具

QUnit [GitHub]
Jasmine [GitHub]
Mocha [GitHub]
Selenium [GitHub]
WebDriverIO [GitHub]
Protractor
Chai [GitHub]
Sinon.JS [GitHub]
Karma [GitHub]
nodeunit [GitHub]
tape [GitHub]
nightmare [GitHub]

在线工具

Sauce Labs
Browser Stack
Browser Shots
Browserling
Browser Sandbox
Cross Browser Testing
Browsera
SortSite

库 / 框架

基础库

jQuery [GitHub]
Prototype [GitHub]
Zepto [GitHub]
MooTool [GitHub]

模块化

ES6 Module
CommonJS

webpack [GitHub]
browserify [GitHub]

AMD

RequireJS [GitHub]

UMD

umd [GitHub]

框架

AngularJS [GitHub]
Backbone [GitHub]
Knockout [GitHub]
Ember [GitHub]
React [GitHub]
polymer [GitHub]
Deft.js [GitHub]
Vue [GitHub]
Riot [GitHub]

UI框架

Bootstrap [GitHub]
Semantic UI [GitHub]
Foundation [GitHub]
Material UI [GitHub]
WinJS [GitHub]
Pure [GitHub]
Amaze UI [GitHub]

WebSocket

Socket.io [GitHub]
web-socket-js [GitHub]

数据可视化

D3 [GitHub]
Echarts [GitHub]
HighCharts [GitHub]
Vis.js [GitHub]
Flot [GitHub]

WebGL

Three.js [GitHub]
Babylon.js [GitHub]
Pixi.js [GitHub]

CSS3 动画

Animate.css [GitHub]
bounce.js [GitHub]
Effeckt.css [GitHub]
move.js [GitHub]

流程控制

ES6

Promise
Generator

ES7

yield
await

async [GitHub]
co [GitHub]
Promise

Bluebird [GitHub]
q [GitHub]
when.js [GitHub]

函数式编程

bacon.js [GitHub]
immutable.js [GitHub]
ramda [GitHub]
underscore.js [GitHub]
lodash [GitHub]
ReactiveX [GitHub]

手机 UI 框架

jQuery Mobile [GitHub]
Jo [GitHub]
Dojo Mobile
Lungo [GitHub]

CSS 预处理器

LESS

LESS [GitHub]
Hat [GitHub]

Sass(SCSS)

Compass [GitHub]
Bourbon [GitHub]
Gumby [GitHub]

Stylus

nib [GitHub]

未来标准

babel [GitHub]

模板引擎

Handlebars [GitHub]
Haml [GitHub]
Slim [GitHub]
Jade [GitHub]
Ejs
Spacebars
mustache [GitHub]

统一化

Normalize [GitHub]
Reset

最佳实践

SEO
Responsiveness
CDN

安全

Sandbox
XSS
CORS

中间语言

CoffeeScript [GitHub]
TypeScript [GitHub]
ClojureScript [GitHub]
JSX (Facebook)

移动应用开发

PhoneGap / Cordova [GitHub]
MUI [GitHub]
React Native [GitHub]
Ionic [GitHub]

桌面应用开发

Electron [GitHub]
NW.js [GitHub]