2017-Web 进阶路线图
2017 Web 进阶路线图
前言
本书囊括了笔者五年来在前端工程领域的实践总结，笔者希望对于不同等级的开发者都能有所收获。本书最核心的目标
- 希望对于没有经验的开发者能够在本书选定的最短路径上快速成为一名合格的现代前端开发者。每一小节都会讲解最基础的语法或者使用要点，但是不会长篇大论地介绍语法细节这些应该查看文档的内容。通过简单的示例快速上手之后，笔者会介绍很多工程当中的具体实践。可能刚入门的开发者并不能理解这些实践的意义或者价值，但是首先保证能用，而后在自己的实践中慢慢回味，逐渐明了。
- 而对于有一定前端开发经验的开发者，本书能够帮你梳理现代纷繁复杂的前端开发状况，探寻百花齐放的工具库背后蕴藏的设计理念与编程范式，最终融会贯通，形成自己的前端工程化思想与体系。
本书最大的优势在于形成了完整的知识体系结构，让你合理归纳自己学到的知识，将知识放在它该在的地方。另外笔者想强调的是，无论 React 还是 Vue 或者 Angular2 都是非常优秀的前端框架，使用哪个框架还是属于术的范畴。本书虽然立足于 React，但是其中蕴含的设计模式与工程架构可以通用于任何框架。笔者也着力于不希望受到某个具体框架的太多的束缚，毕竟在这个日新月异的前端世界，说不准哪天就落于人后了。读者阅读完本书之后，参照 Demo 的流程可形成属于自己的组件库。
序
第一部分 初窥门径，看山是山
Hyper Text Markup Language，10 页
HTML 语法基础，5 页
HTML
- 介绍基本的 div、p、a、script ( asyhc 属性)
- 介绍 meta 属性 doctype viewport
- 介绍 HTML 方面的优化小知识
- HTML5 Boilerplate
H5，3 页
- 介绍 HTML5 规范，讲明 H5 到底是什么
- 介绍 H5 实现的典型事件，譬如地理位置、触感等等
- 基本的基于 H5 的小 Demo
Semantic HTML，2 页
- 介绍语义化 HTML 布局
CSS,20 页
CSS 语法基础，3 页
- 介绍 CSS 基础选择器，包含选择器优先级
- CSS 引入方式
- 介绍 BEM 命名法
CSS 元素样式，5 页
- 介绍基本的尺寸设置，介绍尺寸单位，还有 width、height/line-heght (垂直居中)等属性
- 介绍基本的文本属性，包括字体大小、文本省略、文本换行等
- 介绍基本的背景属性
CSS 元素定位：盒模型与文档流，3 页
- 介绍盒模型，包括内边距，边框，外边距，连写情况下顺序(上下 左右；上右下左)，以及边距合并，百分比值效果
- 介绍文档流，，介绍基本定位方法，提及 float
- 介绍所谓的七种居中方法
Flexbox 与网格系统，3 页
- 介绍 CSS 网格系统的理念与传统做法
- 介绍 Flexbox 基础语法
- 介绍 Flexbox 的 Polyfill
- 介绍 Flexbox 的使用示范
SCSS，2 页
- SCSS 语法基础与基本用法，建议使用 node-sass 编译
- SCSS 文件组织与命名规范(BEM-SCSS )
- 常用的 SCSS 辅助库，home.scss，等 Todo
CSS 工程实践，4 页
- CSS 样式指南，1 页
- CSS Linting，1 页
- CSS 目录结构，1 页
- CSS reset，1 页
JavaScript，25.5 页
JavaScript 语法基础，9 页
- JavaScript 和 ECMScript 的演化过程，1 页
- JavaScript 基本变量定义、声明(变量提升)，2 页
- node 环境搭建(npm，cnpm,nvm 的基本使用，babel-node 的安装),2 页
- es6 模块系统(简单命令行例子，babel-node 运行)，1 页
- 介绍变量赋值方法，解构赋值，1 页
- 常见类型列表和类型转换，2 页
JavaScript 数据结构，4.5 页
- 数组类型，1.5 页
- 字符串类型，1.5 页
- 时间与日期类型，1.5 页
JavaScript 控制流，3 页
- 循环，2 页
- 异常处理，1 页
JavaScript 函数，6 页
- 函数定义，1 页
- 函数参数，1 页
- 函数调用，2 页
- 词法作用域与闭包，2 页
JavaScript 类与对象，6 页
- class，属性定义(语法糖)，1 页
- 方法，构造器(单例模式)，原型，快速 ORM，3 页
- 类继承，2 页
DOM，16.5 页
元素选择与操作，4.5 页
- DOM 选择器，选择器 polyfill，1.5 页
- 属性的判断和获取，1.5 页
- 常见元素操作(元素创建、插入)，1.5 页
事件响应，4 页
- event 对象与事件绑定及参数传递，2 页
- 事件分发传递、常用事件列表，2 页
Ajax，4 页
- XHR 对象，1 页
- fetch，1 页
- cors，2 页
客户端存储，4 页
- Cookie，1 页
- localstorage，session storage，2 页
- websql，indexdb，1 页
常用的前端工具库，9 页
jQuery，5 页
jQuery 基础，2 页
- jQuery 选择器，0.5 页
- jQuery 元素操作，0.5 页
- jQuery 事件绑定，0.5 页
- jQuery 动画，0.5 页
jQuery Plugins，2 页
本章节介绍部分优秀的 jQuery Plugins
fullPage.js，1 页LightBox，1 页你并不需要 jQuery，1 页
Lodash/Underscore，2 页
Lodash/Underscore 基础，1 页
你并不需要 Lodash/Underscore，1 页
Pattern Library，2 页
jQuery UI，1 页
BootStrap，1 页
React 初探
数据流驱动的页面，2 页
- 本部分主要介绍 React 设计思想，从命令式编程到声明式编程的变化，及以 jQuery 与 React 实现相同功能的例子对比。
搭建你的脚手架，7.5 页
create-react-app，2.5 页
- 引导建立 hello-world app，2 页
- 介绍 yarn，0.5 页
webpack 入门，5 页
- JavaScript 模块化发展历程与 webpack 介绍，1 页
- webpack 的 hello-world 应用引导，1.5 页
- 基于 webpack 的 react 最简应用搭建，2.5 页
- 列举一些 boilerplate 及评价，0.5 页
React 组件，16 页
JSX，3 页
- JSX 基础与转化，1 页
- 语法，2 页
组件基本介绍，4 页
- 组件声明，说明 createClass 与继承的关系，2 页
- state，1 页
- props，1 页
- context，1 页
组件生命周期，3 页
- 正常生命周期，2 页
- 无状态组件生命周期，1 页
组件样式，4 页
- 行内样式设定，1 页
- CSS 样式, 类名与模块化，2 页
- 基于 context 的主题传递，1 页
组件中 DOM 处理，2 页
- findDOMNode,0.5
- refs 与 jQuery 的封装使用 ,1.5 页
React 事件交互
React 事件绑定与处理
React 合成事件
React 事件列表
React Router
路由配置
路由控制
React 技术栈
MobX
MobX 设计思想
Observable
Redux
Redux 设计思想
简单的 Redux 实例
简单的 MobX 实例
第二部分 登堂入室，看山不是山
第五章 深入 JavaScript 工程实践
JavaScript 静态类型
JavaScript 函数式编程
JavaScript 异步编程
Promise
Generator
Async/Await
JavaScript 面向对象
琢磨不透的 this
原型链与继承
JavaScript 类的几种实现方式
JavaScript 数据绑定
脏检测
ES6 Proxy
JavaScript 性能优化与样式规范
变量
数据类型
函数
React 工程实践
React 设计模式与样式指南
High-Order Component
Stateless Functional Component
Pretty Component
React 优化
包体优化
React 动画
CSS 动画
JavaScript 动画
React Transition
基于 React 的 Pattern Library
Material UI
antd
第五章 深入 React 内部原理
简单的 Virtual DOM 实现
React Diff 算法
React setState
React Fiber
Virtual DOM Alternatives
前端状态管理
Redux 的得与失
渐进的前端状态管理
常见的状态管理模式
合理的状态设置
前端测试
单元测试
组件测试
自动化测试
前端性能优化
浏览器渲染原理
前端性能评测
资源加载
首页与关键路径
渲染策略
NodeJS
NodeJS 初窥
常用 NodeJS 框架
Express
Koa
服务端渲染
跨平台开发利器 Electron
移动开发
Mobile First
本部分介绍移动开发的常见注意点，包括响应式尺寸、响应式布局、移动开发中存在的点击问题等。
React Native
介绍 React Native 的基本原理与语法，能够利用 Deco 开发一个简单的 TODOList。
微信小程序
介绍微信小程序的基本用法，能够基于微信小程序开发简单的 TODOList。
第三部分 融会贯通，看山还是山
GUI 应用程序架构变迁
MVC
MVP&MVVM
Flux Unidirectional Data Flow
REST 表现层状态转化
Hyper Text Transport Protocol
HTTP 协议基础
HTTP 请求与响应
HTTP 缓存
HTTPS 与 HTTP/2
RESTful API
RESTful API 最佳实践
REST 的不足与 GraphQL
前端工程化
前后端分离与全栈
合理的使用工具
渐进式的工程架构
微服务与微前端
模块化
介绍常见的模块化形式：CommonJS、AMDJS、System.import 介绍小模块难题
组件化
介绍 Web Components 规范(Shadow DOM，Custom Elements)以及典型的符合 Web Components 规范的框架 Polymer 分析 React 与 Web Components 规范的优劣分析 Vue 与 WebComponents 规范的优劣分析何谓好的组件