本篇的首要目标即是以 React 为核心的技术体系为主线,为读者构建完整的前端技术知识体系,探讨前端工程化的思想,并且能使不同技术水准的读者都有所得。
近年来,随着浏览器性能的提升与移动互联网浪潮的汹涌而来,Web 前端开发进入了高歌猛进,日新月异的时代。这是最好的时代,我们永远在前行,这也是最坏的时代,无数的前端开发框架、技术体系争妍斗艳,让开发者们陷入困惑,乃至于无所适从。Web 前端开发可以追溯于 1991 年蒂姆·伯纳斯-李公开提及 HTML 描述,而后 1999 年 W3C 发布 HTML4 标准,这个阶段主要是 B/S 架构,没有所谓的前端开发概念,网页只不过是后端工程师的顺手之作,服务端渲染是主要的数据传递方式。接下来的几年间随着互联网的发展与 REST 等架构标准的提出,前后端分离与富客户端的概念日渐为人认同,我们需要在语言与基础的 API 上进行扩充,这个阶段出现了以 jQuery 为代表的一系列前端辅助工具。
2009 年以来,智能手机开发普及,移动端大浪潮势不可挡,SPA 单页应用的设计理念也大行其道,相关联的前端模块化、组件化、响应式开发、混合式开发等等技术需求甚为迫切。这个阶段催生了 Angular 1、Ionic 等一系列优秀的框架以及 AMD、CMD、UMD 与 RequireJS、SeaJS 等模块标准与加载工具,前端工程师也成为了专门的开发领域,拥有独立于后端的技术体系与架构模式。
而近两年间随着 Web 应用复杂度的提升、团队人员的扩充、用户对于页面交互友好与性能优化的需求,我们需要更加优秀灵活的开发框架来协助我们更好的完成前端开发。这个阶段涌现出了很多关注点相对集中、设计理念更为优秀的框架,譬如 React、Vue.js、Angular 2 等组件框架允许我们以声明式编程来替代以 DOM 操作为核心的命令式编程,加快了组件的开发速度,并且增强了组件的可复用性与可组合性。而遵循函数式编程的 Redux 与借鉴了响应式编程理念的 MobX 都是非常不错的状态管理辅助框架,辅助开发者将业务逻辑与视图渲染剥离,更为合理地划分项目结构,更好地贯彻单一职责原则与提升代码的可维护性。在项目构建工具上,以 Grunt、Gulp 为代表的任务运行管理与以 Webpack、Rollup、JSPM 为代表的项目打包工具各领风骚,帮助开发者更好的搭建前端构建流程,自动化地进行预处理、异步加载、Polyfill、压缩等操作。
总结而言,目前前端工具化已经进入到了非常繁荣的时代,而很多前端开发者也甚为苦恼,疲于学习。本书的首要目标即是以 React 为核心的技术体系为主线,介绍目前前端开发的基本概念,帮助初级前端开发者搭建前端知识体系,能够迅速进入前端开发的工作中。而蕴藏在工具化之中的是抽象而出的设计理念与编程范式,总结而言即是对于前端工程化的思考。工具的变革会非常迅速,很多优秀的工具可能都只是历史长河中的一朵浪花,而总结而出的工程化思维则会恒久长存。本书希望为读者构建完整的前端技术体系概念,并且能使不同技术水准的读者都有所得:
(1)希望对于没有经验的开发者能够在本书选定的最短路径上快速成为一名合格的能够利用 React 快速开发 Web 应用的现代前端开发者。每一小节都会讲解最基础的语法或者使用要点,但是不会长篇大论地介绍语法细节这些应该查看文档的内容。通过简单的示例快速上手之后,笔者会介绍很多工程当中的具体实践。可能刚入门的开发者并不能理解这些实践的意义或者价值,但是首先保证能用,而后在自己的实践中慢慢回味,逐渐明了。
(2)而对于有一定前端开发经验的开发者,本书能够帮你梳理现代纷繁复杂的前端开发状况,探寻以 React 为代表的百花齐放的工具库背后蕴藏的设计理念与编程范式,最终融会贯通,形成自己的前端工程化思想与体系。
- React Native
- React Router
- Ueact
- Index:
- VirtualDOM 算法详解与实现: VirtualDOM 算法详解与实现
- 基于 JSX 的动态数据绑定: 基于 JSX 的动态数据绑定
- 组件系统设计:
- 事件系统
- 内部原理
- 初窥
- JSX: JSX 语法
- create-react-app: 基于 create-react-app 的快速开发与应用调试
- 思维模式: React 思维模式:函数式编程
- 设计理念: React 设计理念:专注于视图层的组件库
- 动画
- 序
- 性能优化
- 服务端渲染
- Index: 服务端渲染
- 基于 Express 的渲染服务器: renderToString
- 基于 Next.js 快速搭建渲染服务器:
- 服务端渲染性能浅析: 服务端渲染性能浅析
- 测试
- 状态管理
- Index:
- 基于 MobX 的 React 状态管理: 使用 MobX 存储应用状态
- 基于 Vue.js 的 React 状态管理: Introduction
- 类 React 库
- 类型系统
- 组件基础
- 组件数据流
- Context: Context
- Index: 组件数据流
- Props: React Props
- State:
- 内部状态管理与组件间通信: 内部状态管理与组件间通信
- 组件样式
- 组件范式
- 设计模式与样式指南
- 函数式 React 开发: 函数式 React 开发
- 组件分割与解耦: React 组件分割与解耦
- 组件驱动开发: 组件驱动开发
- 高阶组件: