【轉載】Web前端開發技術棧

文章轉至：http://www.wtoutiao.com/p/W1fb6D.html

 

前端領域的發展很是迅猛，大前端的時代到來了，聽說每隔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