微前端设计与实现

本书聚焦微前端方方面面的知识、技巧、经验和实践，几乎涵盖了迄今为止出现的每一种微前端的实现原则和解决方案。遵循这些实践，你能够应对在开发微前端项目的过程中所面临的挑战，按照正确的思路完成微前端项目，实现组织目标。本书共10章，内容丰富，条理清晰，主要包括微前端决策框架、微前端的实现方式、微前端的自动化策略、微前端的后端模式、从单体架构到微前端的案例以及如何在组织中引入微前端等。

本书聚焦微前端方方面面的知识、技巧、经验和实践，几乎涵盖了迄今为止出现的每一种微前端的实现原则和解决方案。遵循这些最佳实践，你能够应对在开发微前端项目的过程中所面临的挑战，按照正确的思路完成微前端项目，实现组织目标。本书共10章，内容丰富，条理清晰，主要包括微前端决策框架、微前端的实现方式、微前端的自动化策略、微前端的后端模式、从单体架构到微前端的案例以及如何在组织中引入微前端等。

【作者简介】 卢卡·梅扎利拉（Luca Mezzalira）是AWS的解决方案架构师，拥有近20年的软件开发和架构经验。他曾任独角兽公司DAZN的架构副总裁，成功帮助DAZN在5年内成为全球瞩目的体育流媒体服务平台。他讲解和分享微前端架构的视频深受欢迎。 【译者简介】 KFive是百度App大前端团队，成员涵盖PC端和手机百度的大前端研发者。除业务支持外，KFive研究的技术方向还包括前端基础架构、跨端开发、Node.js、端智能和前端智能化等，并且积累了丰富的产出。KFive的名称不仅来源于起初的办公地点是在百度科技园5号楼，而且体现了其对软件开发的理解，即“五Key”：Key1者，精益求精；Key2者，大巧不工；Key3者，独运匠心；Key4者，百炼千锤；Key5者，善始善终。

第 1章　前端概览 1

1.1　微前端应用 1

1.2　单页应用 2

1.3　同构应用 4

1.4　静态页面网站 6

1.5　JAMStack 6

1.6　小结 7

第 2章　微前端原则 8

2.1　从单体到微服务 9

2.1.1　微服务迁移 10

2.1.2　引入微前端 12

2.2　微服务原则 13

2.2.1　围绕业务领域建模 14

2.2.2　自动化文化 14

2.2.3　隐藏实现细节 14

2.2.4　分布式治理 15

2.2.5　独立部署 15

2.2.6　故障隔离 15

2.2.7　高度可观察性 15

2.3　在微前端中实践这些原则 15

2.3.1　围绕业务领域建模 15

2.3.2　自动化文化 16

2.3.3　隐藏实现细节 16

2.3.4　分布式治理 16

2.3.5　独立部署 16

2.3.6　故障隔离 16

2.3.7　高度可观察性 17

2.4　微前端不是灵药 17

2.5　小结 17

第3 章　微前端的架构和挑战 18

3.1　微前端决策框架 18

3.1.1　定义微前端 19

3.1.2　微前端的领域驱动设计 20

3.1.3　如何定义限界上下文 22

3.1.4　微前端组合 23

3.1.5　微前端路由 24

3.1.6　微前端通信 26

3.2　微前端实践 28

3.2.1　Zalando 29

3.2.2　HelloFresh 29

3.2.3　AllegroTech 29

3.2.4　Spotify 29

3.2.5　SAP 30

3.2.6　OpenTable 30

3.2.7　DAZN 31

3.3　小结 31

第4 章　探索微前端架构 32

4.1　微前端决策框架的应用 32

4.1.1　纵向拆分 33

4.1.2　横向拆分 34

4.2　架构分析 35

4.3　纵向拆分的架构 37

4.3.1　App shell 37

4.3.2　挑战 39

4.3.3　实现一个设计系统 45

4.3.4　开发体验 47

4.3.5　搜索引擎优化 48

4.3.6　性能与微前端 49

4.3.7　可用的框架 51

4.3.8　用例 52

4.3.9　架构特征 53

4.4　横向拆分的架构 54

4.4.1　客户端组合 55

4.4.2　挑战 58

4.4.3　搜索引擎优化 65

4.4.4　开发体验 65

4.4.5　用例 66

4.4.6　Module Federation 67

4.4.7　iframe 72

4.4.8　Web 组件 78

4.4.9　服务器端组合 81

4.4.10　边缘侧组合 89

4.5　小结 93

第5 章　微前端技术实现 94

5.1　项目背景 94

5.2　Module Federation入门 97

5.3　技术实现 98

5.3.1　项目结构 99

5.3.2　App shell 100

5.3.3　身份认证微前端 106

5.3.4　目录微前端 107

5.3.5　账户管理微前端 108

5.4　项目演变 112

5.4.1　嵌入旧版应用 112

5.4.2　开发收银台功能 114

5.4.3　实现动态远程容器 115

5.5　和webpack 捆绑 116

5.6　小结 116

第6 章　构建和部署微前端 117

6.1　自动化原理 118

6.1.1　反馈周期尽可能短 118

6.1.2　持续迭代 119

6.1.3　给团队赋能 120

6.1.4　定义围栏 120

6.1.5　可靠的测试策略 121

6.2　开发体验 121

6.2.1　横向拆分和纵向拆分 122

6.2.2　微前端脚手架 122

6.2.3　环境策略 123

6.3　版本控制 123

6.3.1　monorepo 123

6.3.2　polyrepo 127

6.3.3　版本控制系统的未来 129

6.4　持续集成策略 129

6.4.1　测试微前端 130

6.4.2　适应度函数 134

6.4.3　微前端特定操作 135

6.5　部署策略 135

6.5.1　蓝绿部署和灰度发布 136

6.5.2　绞杀者模式 138

6.5.3　可观察性 139

6.6　小结 140

第7章　案例分析：微前端自动化流水线 141

7.1　场景分析 141

7.1.1　版本控制 143

7.1.2　流水线初始化 143

7.1.3　代码质量审查 144

7.1.4　构建 145

7.1.5　构建后检查 146

7.1.6　部署 147

7.1.7　自动化策略总结 147

7.2　小结 148

第8章　微前端的后端模式 149

8.1　API 集成与微前端 149

8.1.1　使用服务字典 151

8.1.2　使用API网关 157

8.1.3　使用BFF模式 161

8.1.4　在微前端中使用GraphQL 166

8.1.5　实践 169

8.2　小结 172

第9章　案例分析：从单体架构到微前端 173

9.1　背景 174

9.1.1　技术栈 174

9.1.2　平台及主要用户流程 175

9.1.3　技术目标 177

9.2　迁移策略 178

9.2.1　微前端决策框架的应用 178

9.2.2　将单页应用拆分为多个子域 181

9.2.3　技术选型 184

9.3　实现细节 187

9.3.1　App shell 职责 187

9.3.2　应用初始化 187

9.3.3　通信 187

9.3.4　后端集成 189

9.3.5　在微前端中集成身份认证 189

9.3.6　依赖项管理 192

9.3.7　整合设计系统 193

9.3.8　组件共享 193

9.3.9　灰度发布 194

9.3.10　本地化 195

9.4　小结 197

第 10章 在组织中引入微前端 198

10.1 我们为什么要使用微前端 198

10.2　组织和软件架构之间的联系 199

10.2.1　委员会是怎么出现的 200

10.2.2　功能团队和组件团队 202

10.3　优化沟通流程 205

10.3.1　征求意见稿 205

10.3.2　架构决策记录 207

10.4　优化沟通流程的技巧 208

10.4.1　倒推 208

10.4.2　实践社群和集体会议 209

10.4.3　管理外部依赖 210

10.5　去中心化组织 211

10.6　小结 215

附录　社区对微前端的看法 217

本书聚焦微前端方方面面的知识、技巧、经验和实践，几乎涵盖了迄今为止出现的每一种微前端的实现原则和解决方案。遵循这些实践，你能够应对在开发微前端项目的过程中所面临的挑战，按照正确的思路完成微前端项目，实现组织目标。本书共10章，内容丰富，条理清晰，主要包括微前端决策框架、微前端的实现方式、微前端的自动化策略、微前端的后端模式、从单体架构到微前端的案例以及如何在组织中引入微前端等。

【作者简介】 卢卡·梅扎利拉（Luca Mezzalira）是AWS的解决方案架构师，拥有近20年的软件开发和架构经验。他曾任独角兽公司DAZN的架构副总裁，成功帮助DAZN在5年内成为全球瞩目的体育流媒体服务平台。他讲解和分享微前端架构的视频深受欢迎。 【译者简介】 KFive是百度App大前端团队，成员涵盖PC端和手机百度的大前端研发者。除业务支持外，KFive研究的技术方向还包括前端基础架构、跨端开发、Node.js、端智能和前端智能化等，并且积累了丰富的产出。KFive的名称不仅来源于起初的办公地点是在百度科技园5号楼，而且体现了其对软件开发的理解，即“五Key”：Key1者，精益求精；Key2者，大巧不工；Key3者，独运匠心；Key4者，百炼千锤；Key5者，善始善终。