前端知识结构(Frontend Knowledge Structure)

Frontend Knowledge Structure

前端学习切勿跟风! 因为前端框架的更新几乎以周为频率.尤其对于新手而言,与其追一些新出的框架,打好基础才是关键.学好JavaScript对以后使用一些工具或框架有很大的帮助.

原文出处: https://github.com/JacksonTian/fks

前端知识结构

前端开发的核心是HTML(信息结构)、CSS(显示效果)和JavaScript(行为,数据交换).其本质构成了一个MVC框架.

Web前端知识体系结构:



可视化效果

前端开发知识结构

前端工程师

浏览器

IE6/7/8/9/10/11 (Trident)

Firefox (Gecko)

Chrome/Chromium (Blink)

Safari (WebKit)

Opera (Blink)

编程语言

JavaScript/Node.js

CoffeeScript

TypeScript

切页面

HTML/HTML5

CSS/CSS3

Sass/LESS/Stylus/postCSS

PhotoShop/Paint.net/Fireworks/GIMP/Sketch

开发工具

编辑器和IDE

VIM/Sublime Text2

Notepad++/EditPlus

WebStorm

Emacs EmacsWiki

Brackets

Atom

Lime Text

Light Table

Codebox

TextMate

Neovim

Komodo IDE / Edit

Eclipse

Visual Studio/Visual Studio Code

NetBeans

Cloud9 IDE

HBuilder

Nuclide

VS code

调试工具

Firebug/Firecookie

YSlow

IEDeveloperToolbar/IETester

Fiddler

Chrome Dev Tools

Dragonfly

DebugBar

Venkman

Charles

版本管理

Git/SVN/Mercurial

Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge

代码质量

Coding style

JSLint/JSHint/jscs/ESLint

CSSLint

Markup Validation Service

HTML Validators

单元测试

QUnit/Jasmine

Mocha/Should/Chai/Expect

Unit JS

自动化测试

WebDriver/Protractor/Karma Runner/Sahi

phantomjs

SourceLabs/BrowserStack

前端库/框架

jQuery/Underscore/Mootools/Prototype.js

YUI3/Dojo/ExtJS/KISSY

Backbone/KnockoutJS/Emberjs

AngularJS

Batarang

Bootstrap

Semantic UI

Juice UI

Web Atoms

Polymer

Dhtmlx

qooxdoo

React

Brick

vue.js

前端标准/规范

HTTP/1.1: RFCs 7230-7235

HTTP/2

ECMAScript3/5

ECMAScript6

W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…

CommonJS Modules/AMD

HTML5/CSS3

Semantic Web

MicroData

RDFa

Web Accessibility

WCAG

Role Attribute

WAI-ARIA

性能

JSPerf

YSlow 35 rules

PageSpeed

HTTPWatch

DynaTrace’s Ajax

高性能JavaScript

SEO

编程知识储备

数据结构

OOP/AOP

原型链/作用域链

闭包

编程范型

设计模式

Javascript Tips

部署流程

压缩合并

YUI Compressor

Google Clousure Complier

UglifyJS

CleanCSS

文档输出

JSDoc

Dox/Doxmate/Grunt-Doxmate

项目构建工具

make/Ant

GYP

Grunt

Gulp

Yeoman

FIS

Mod

ES6＋ 转换器

Traceur

Babel

代码组织

类库模块化

CommonJS/AMD

YUI3模块

webpack

业务逻辑模块化

bower/component

文件加载

LABjs

SeaJS/Require.js

模块化预处理器

Browserify

安全

CSRF/XSS

CSP

Same-origin policy

ADsafe/Caja/Sandbox

移动Web

HTML5/CSS3

响应式网页设计

Zeptojs/iScroll

V5/Sencha Touch

PhoneGap

jQuery Mobile

W3C Mobile Web Initiative

W3C mobileOK Checker

Open Mobile Alliance

React Native

前沿技术社区/会议

D2/WebRebuild

NodeParty/W3CTech/HTML5梦工厂

JSConf/沪JS(JSConf.cn)

QCon/Velocity/SDCC

JSConf/NodeConf

CSSConf

YDN/YUIConf

HybridApp

WHATWG

MDN

codepen

w3cplus

CNode

计算机知识储备

编译原理

计算机网络

操作系统

算法原理

软件工程/软件测试原理

Unicode

软技能

知识管理/总结分享

沟通技巧/团队协作

需求管理/PM

交互设计/可用性/可访问性知识

可视化

SVG/Canvas/VML

SVG: D3/Raphaël/Snap.svg/DataV

Canvas: CreateJS/KineticJS

WebGL/Three.JS

前端书籍推荐

★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.

CSS

Eric Meyer 谈 CSS（卷二）★★★

CSS权威指南 （第3版）★★

精通CSS★★★

HTML & CSS设计与构建网站★

JavaScript

JavaScript & jQuery交互式Web前端开发★

JavaScript DOM编程艺术 （第2版）★

JavaScript高级程序设计（第3版）★★

锋利的jQuery★★

高性能JavaScript★★★

JavaScript语言精粹★★★

JavaScript权威指南★★★

编写可维护的JavaScript★★★

JAVASCRIPT语言精髓与编程实践★★★

Effective Javascript★★★

Secrets of the JavaScript Ninja★★★

JavaScript模式★★★

JavaScript设计模式★★★★

基于MVC的JavaScript Web富应用开发★★★

性能实践

高性能网站建设指南★

高性能网站建设进阶指南★★

Web性能实践日志★★★

Web性能权威指南★★★

版本控制工具

版本控制之道 (git)★★

Pro Git★★★

Git权威指南★★★★

学习资源

https://github.com/JacksonTian/fks

https://github.com/kencery/Front-end-tutorial

http://tutorialzine.com/2015/12/the-languages-and-frameworks-you-should-learn-in-2016/

https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510#.l3d2zwpj5

https://reactforbeginners.com/

https://blackpixel.com/writing/2016/01/front-end-web-developments-to-watch-in-2016.html

http://www.jianshu.com/p/b9ad2af81e35

http://usersnap.com/blog/web-development-trends-2016/

http://www.cnblogs.com/jikey/p/3613082.html

http://www.cnblogs.com/jikey/p/3613082.html

http://www.kancloud.cn/jsfront/month/82796