Web前端开发技术栈

前端领域的发展非常迅猛，大前端的时代到来了，据说每隔12-24个月，前端的难度将增加一倍，从下面的技术栈就可以看出前端领域的丰富度和复杂度

 

核心概念

HTML
|-- DOM
|-- Element
|-- Attribute

JavaScript
|-- 原型 Prototype
|-- 作用域 Scope
|-- 闭包 Closure
|-- JSON
|-- AJAX

CSS
|-- 选择器 Selector
|-- 优先级
|-- 特性 Specificity
|-- 盒子模型

渲染引擎

|-- 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) 
|-- SpiderMonkey (Firefox)
|-- Nitro (Safari)

编译任务

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

包管理

|-- npm 
|-- Bower

编译工具

|-- Grunt 
|-- Gulp 
|-- Brunch 
|-- Yeoman
|-- Broccoli 

调试

|-- Developer Tools
|-- Firebug 

基础工具

|-- Node.js 
|-- Phantom.js 
|-- fibjs 

库

|-- jQuery 
|-- Prototype 
|-- Zepto 
|-- MooTool

框架

|-- AngularJS 
|-- Backbone 
|-- Knockout 
|-- Ember 
|-- React 
|-- polymer 
|-- Deft.js 
|-- Vue

UI框架

|-- Bootstrap 
|-- Semantic UI 
|-- Foundation 
|-- Material UI 
|-- jQuery UI

手机 UI框架

|-- jQuery Mobile 
|-- Jo 
|-- Dojo Mobile
|-- Lungo 

CSS3 动画

|-- Animate.css 
|-- bounce.js 
|-- Effeckt.css 
|-- move.js

CSS 预处理器

LESS
|-- LESS 
|-- Hat 

Sass(SCSS)
|-- Compass 
|-- Bourbon 
|-- Gumby 

Stylus
|-- nib 

质量控制

|-- JSLint 
|-- JSHint 
|-- jscs 
|-- Closure Linter

测试工具

|-- QUnit 
|-- Jasmine 
|-- Mocha 
|-- Selenium 
|-- WebDriverIO 
|-- Karma 
|-- nodeunit 
|-- tape 

在线测试工具

|-- Sauce Labs
|-- Browser Stack
|-- Browser Shots
|-- Browser Sandbox
|-- Cross Browser Testing

模块化

|-- ES6 Module
|-- CommonJS
|-- webpack 
|-- browserify 
|-- AMD
|-- RequireJS 
|-- UMD
|-- umd 

WebSocket

|-- Socket.io 
|-- web-socket-js 

数据可视化

|-- D3 
|-- Echarts 
|-- HighCharts 
|-- Vis.js 
|-- Flot 

WebGL

|-- Three.js 
|-- Babylon.js 
|-- Pixi.js 

模板引擎

|-- Handlebars 
|-- Haml 
|-- Slim 
|-- Jade 
|-- Ejs
|-- Spacebars
|-- mustache

移动应用开发

|-- PhoneGap / Cordova 
|-- MUI 
|-- React Native 
|-- Ionic