同构JavaScript应用开发pdf

同构JavaScript应用开发 内容简介

《同构JavaScript应用开发》将向你展示如何构建和维护属于自己的同构JavaScript应用。《同构JavaScript应用开发》分为三部分，第一部分描绘不同种类的同构JavaScript的轮廓，第二部分介绍关键概念，第三部分提供业界同行的解决方案案例。通过阅读本书，你将了解到这种应用架构日益流行的原因，并将其运用于解决关键的业务问题，如页面加载速度和SEO兼容性。

《同构JavaScript应用开发》适合对同构JavaScript感兴趣的Web开发人员。

同构JavaScript应用开发 目录

前言 ix

第一部分　简介与关键概念

第1章　为什么需要同构JavaScript 2

1．1　定义同构JavaScript 3

1．2　评价其他的Web应用架构方案 3

1．2．1　状况的改变 3

1．2．2　工程上的关注点 4

1．2．3　可选架构 4

1．3　附加说明：何时不使用同构 10

1．4　小结 11

第2章　同构JavaScript图谱 12

2．1　共享视图 13

2．1．1　共享模板 14

2．1．2　共享视图逻辑 14

2．2　共享路由 14

2．3　共享模型 15

2．4　小结 15

第3章　同构JavaScript分类 16

3．1　与环境无关的代码 18

3．2　为每个特定环境提供shim 19

3．3　小结 20

第4章　超越服务器端的渲染 21

4．1　实时Web应用 22

4．1．1　同构API 23

4．1．2　双向数据同步 23

4．1．3　在服务器端进行客户端仿真 23

4．2　小结 24

第二部分　构建第一个应用

第5章　起步 26

5．1　Node的安装和运行 27

5．1．1　从源码安装 27

5．1．2　与Node REPL交互 28

5．1．3　使用npm 管理项目 28

5．2　建立应用项目 29

5．2．1　初始化项目 29

5．2．2　安装应用服务器 31

5．2．3　编写下一代的JavaScript（ES6） 32

5．2．4　将ES6编译为ES5 34

5．2．5　建立开发流程 35

5．3　小结 39

第6 章　提供第一份HTML文档 40

6．1　提供HTML模板 40

6．2　使用路径参数与查询参数 42

6．3　小结 45

第7章　设计应用架构 46

7．1　理解问题 47

7．2　响应用户请求 47

7．2．1　创建Application类 47

7．2．2　创建控制器 49

7．2．3　构造控制器实例 50

7．2．4　拓展控制器 52

7．2．5　改进响应流 53

7．3　小结 57

第8章　将应用传输到客户端 58

8．1　打包应用的客户端版本 58

8．1．1　选择打包库 58

8．1．2　创建打包任务 59

8．1．3　添加客户端实现 61

8．2　响应用户请求 62

8．2．1　利用History API 63

8．2．2　响应并调用History　API 63

8．3　客户端路由 67

8．4　组织代码 73

8．5　小结 75

第9章　创建常用的抽象 76

9．1　何时抽象，为什么需要抽象 76

9．2　获取和设置cookie 77

9．3　重定向请求 84

9．4　小结 88

第10章　序列化、反序列化和添加事件监听 89

10．1　序列化数据 90

10．2　创建控制器实例 92

10．3　反序列化数据 93

10．4　添加DOM事件处理器 94

10．5　验证rehydration过程 96

10．6　小结 98

第11章　结束感言 99

11．1　生产准备 99

11．2　衡量架构 99

11．3　小结 102

第三部分　现实世界的解决方案

第12章　沃尔玛实验室的同构React．js方案 104

12．1　物种起源 104

12．1．1　问题 105

12．1．2　解决方案 106

12．2　React模板与模式 106

12．2．1　在服务器端渲染 106

12．2．2　在客户端恢复 110

12．3　沃尔玛采用的方法 112

12．4　克服挑战 112

12．4．1　首字节时间 112

12．4．2　组件渲染优化 113

12．4．3　性能提升 117

12．5　下一步 119

12．6　感谢 120

12．7　补充说明 120

第13章　全栈Angular 121

13．1　同构JavaScript：Web应用的未来 122

13．2　同构Angular 1 122

13．3　Angular 2服务器端渲染 124

13．3．1　服务器端渲染的用例 124

13．3．2　Web 应用脱节 126

13．3．3　Angular 2渲染架构 127

13．3．4　Preboot 128

13．4　Angular Universal 128

13．5　GetHuman．com 130

13．6　补充说明 131

第14章　Brisket 132

14．1　问题 132

14．2　两全其美 134

14．3　早期Brisket 135

14．4　成为现实 136

14．5　代码自由 136

14．6　跨环境一致的API 139

14．6．1　模型/ 集合 140

14．6．2　视图生命周期 140

14．6．3　子视图管理 141

14．6．4　跨环境使用的工具 141

14．7　前进之路 142

14．7．1　ClientApp与ServerApp 142

14．7．2　布局模板 142

14．7．3　其他经验教训 143

14．8　Brisket的下一步？ 143

14．9　补充说明 144

第15章　Colony案例研究：脱离Node创建同构应用 145

15．1　问题 145

15．2　模板 146

15．3　数据 147

15．4　转译视图模型 148

15．5　布局 150

15．6　页面生成器 152

15．7　前端SPA 152

15．8　最终架构 153

15．9　后续计划 154

第16 章　结语 155

16．1　设计模式、Flux和同构JavaScript家族 155

16．1．1　永远相信JavaScrip 156

16．1．2　命名与理解 157

关于作者 159

关于封面 159

同构JavaScript应用开发 精彩文摘

1.1　定义同构JavaScript

简单来说，同构 JavaScript 应用就是在浏览器客户端和 Web 应用服务器端间共享同一套 JavaScript 代码的应用。从某种意义上讲，之所以称为同构，是因为无论在客户端还是在服务器端运行，应用都具有相同的形式或形态。同构 JavaScript 是 JavaScript 发展进程中的革命性一步。但就像钟摆一样，软件开发中的进步通常不稳定，来来回回。如果从事软件开发已有一段时间，那么你可能已经了解过一些时隐时现的设计方法。在某些情况下，我们似乎永远无法找到正确的平衡点。

近 20 年来，Web 应用的发展方式非常符合这一规律。我们见证了 Web 的演进——从最初简陋的蓝色超链接静态页到如今用户体验丰富、可以媲美成熟原生应用的平台。之所以能做到这一点，是因为 Web 的客户端 - 服务器模型迅速从重服务器端、轻客户端的方式转变为轻服务器端、重客户端的方式。然而，这种方式的转变导致了大量问题，我们将在本章后面具体讨论。就目前而言，可以简单地概括为我们需要在重客户端和重服务器端之间取得平衡。为了真正了解这种平衡的意义，我们必须先后退一步，看看 Web 应用在过去几十年里是如何发展的。