单页应用开发权威指南

前言

当我谈单页应用时我谈些什么?

为何写这本书?

今年1月下旬,我去特赞做了一次关于如何开发单页应用的分享,题目用的就是Single Page App Break,分享中包含了一些我关于单页应用零散的观点和看法。在一个夜晚,心血来潮,我整理一下思绪,干脆集结成书吧。一是沉淀自己的知识,二是将零散的想法加以实现和验证。

把经验分享给大家

2011年加入大众点评, 当时公司用的还是 Mootools,业余时间我研究过 Backbone.js1。公司里也有经验丰富的大拿用 Knockout2 开发了一些后台和商户系统,但我对 Knockout 或者说是对单页应用仅仅停留在有兴趣的层次。

2013年秋,我有幸加入了 Teambition,开始我的单页面应用开发技能修炼之旅。先是维护 Backbone 版本的 Teambition,后来也用 AngularJS开发了另外的单页应用。在2014年初,@题叶3 初出茅庐加入进来,一开始他特别喜欢 Vue.js4,不过后来 Facebook 推出了 React,题叶就移情别恋到 React 上直到现在。

无论是工作需要还是别人的影响,三年时间下来浸淫在这些框架之中,积累了一些经验和最佳实践,希望可以借此与大家分享。现在有很多介绍框架的书籍,但都是以 API 介绍和开发应用为主,鲜有基础原理的介绍,对构建大型单页应用介绍也比较少。所以我班门弄斧,把个人的经验分享给大家。

每当看到别人谈论,有话想说

参加过很多的分享会,也常常听到别人谈论一些框架,还有各种各样的撕逼。也看到一些可笑的言论,我想我有话说,想澄清一些概念,表达一些观点。鄙人口才不好,还是静静的转换成文字比较好。

更多的思考和沉淀,找准方向

当接触不同业务,使用不同框架的时候,感觉到并没有万能的框架。大而全、小而美都有各自的优劣和适用场景。随本书也会产生一个名为 SPAB.js 库,一是帮助大家更好的理解常见单页应用的形态及其原理,也是作为自己在这方面的实践。

欢迎批评指正

我个人不是这方面的专家,最多算个熟练工。我了解和用过的类库也是有限的。欢迎大家对本书提出各种批评和建议。本书可以在 GitHub 上找到,欢迎 PR

本书适合的读者

阅读本书不需要掌握任何一个前端单页应用框架。仅仅需要一些基础的 JavaScript/CSS/HTML 技能即可。本书适合两类读者:

  • 做过一些简单的前端开发,本书可以帮助你更好的理解前端,对各种各样的前端框架有一个更好的认识,平时写起代码来更组件化一些。
  • 单页应用的开发者,本书有助于你进行更深层次的思考,给出一些单页应用开发的最佳实践和架构方案,让你开发的时候不至于迷失方向,更加游刃有余。

本书章节概览

本书分成三大部分,每个部分都有各自的重点,你可以选择自己感兴趣的地方阅读。

第1部分 单页应用开发基础

这一部分介绍单页应用框架所依赖的基础技术和原理。

第1章 何为单页应用?

从大的方向上介绍什么是单页应用。

第2章 用户界面的核心——组件

组件是单页应用的基石,本章将会给大家详细介绍单个组件的各个组成要素。横向对比每个流行的框架组件模式。

第3章 组件的复合

组件只有具备了组合的能力之后,才能积少成多构成一个复杂的单页应用。本章将会为大家介绍如何把组件组合起来,父组件如何管理子组件,组件之间如何沟通和交流。

第4章 应用控制中心-路由

本章将揭示路由组件的是如何实现的。以及路由如何与组件搭配到一起,用户界面如何响应路由的变化。

第5章 嵌套路由

嵌套路由提供了更为强大的功能,突破了单层路由的限制,让应用界面更为灵活强大。本章为你揭秘嵌套路由是如何实现的。

第6章 与服务端通信

单页应用于服务端通信的方式有别去传统网页的开发方式。本章将为你介绍多种与服务端通信的范式,帮助你更好的规划单页应用中的数据服务层。

第2部分 单页应用架构模式

有了第一部分的基础知识,这一部分从更高阶的角度给你介绍如何组织和架构一个单页应用。

第7章 JavaScript 模块化

如何借助 JavaScript 的模块化更好地实现组件化,更好的划分单页应用的模块。

第8章 Less、Sass 与 PostCSS

如何借助 CSS 处理器更好地实现组件化。

第9章 基于 Gulp 的开发与构建

介绍使用 Gulp 来搭建开发环境,制作 build 流。

第10章 基于 Webpack 的开发与构建

介绍使用 Webpack 来搭建开发环境,制作 build 流。

第11章 编写测试

如何使用测试工具来对单个组件进行测试。

第3部分 单页应用实战

这一部分将会通过一个略复杂的例子,让你实际感受一下如何开发一个单页应用。

第12章 模型设计与 API 开发

设计数据模型,使用 Node.js 开发应用所需要的 API。

第13章 路由设计

设计应用的路由,划分模块。

第14章 界面组件开发

开发组件,调用 API,完成一个完整的单页应用开发。

第4部分 结语

对本书做一个总结,远眺未来。

本书约定

本书全部示例 JavaScript 代码最低支持 ES2015 规范。

新的旅程

本书对你对我都是一次新的旅程,我们一起携手上路吧!

1. Backbone.js 和 Underscore 已经在社区里很有名了,这两个类库都出自 CoffeeScript 的作者 @Jeremy Ashkenas
2. Knockout 是 Microsoft 提供的一个 MVVM 类库。
3. 对,就是你们的题神。
4. 目前越来越火的另外一个 MVVM 框架。