微前端设计与实现

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

【作者简介】

卢卡.梅扎利拉（Luca Mezzalira）是AWS的解决方案架构师，拥有近20年的软件开发和架构经验。他曾任独角兽公司DAZN的架构副总裁，成功帮助DAZN在5年内成为全球瞩目的体育流媒体服务平台。他讲解和分享微前端架构的视频深受欢迎。

【译者简介】

KFive是百度App大前端团队，成员涵盖PC端和手机百度的大前端研发者。除业务支持外，KFive研究的技术方向还包括前端基础架构、跨端开发、Node.js、端智能和前端智能化等，并且积累了丰富的产出。KFive的名称不仅来源于起初的办公地点是在百度科技园5号楼，而且体现了其对软件开发的理解，即“五Key”：Key1者，精益求精；Key2者，大巧不工；Key3者，独运匠心；Key4者，百炼千锤；Key5者，善始善终。

如今，Web应用日益复杂。要化繁为简，解决方案是什么？答案是微前端。微前端是受微服务启发的一种新兴架构，它将单体代码库分解成多个部分，以便多个相对独立的团队分工协作，从而提高项目的灵活性和团队的整体效率。

本书凝结了作者的真知灼见和一手经验，既有原理阐述，又有案例分析。作者详细阐释了微前端的各种适用场景、不同微前端架构的优缺点、微前端决策框架，以及具体的方法和实践。通过90余张示意图，作者直观地呈现了微前端的设计思路与实现技巧。书后附有作者与多位微前端技术先锋的访谈实录。

* 了解微服务原则如何应用于前端开发
* 掌握微前端决策框架的四大关键要素
* 探究各种微前端实现，分析不同架构的优缺点
* 学习微前端自动化策略和持续优化微前端自动化流水线的实践
* 理解微前端的后端模式，探究微前端如何与微服务或单体API层集成
* 洞悉传统的前端应用向微前端迁移的全过程

第 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