微前端设计与实现

第1章　前端概览 1
1.1　微前端应用 1
1.2　单页应用 2
1.3　同构应用 4
1.4　静态页面网站 6
1.5　JAMStack 6
· · · · · · (更多)

第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
· · · · · · (收起)