微前端设计与实现

如今，Web应用日益复杂。要化繁为简，解决方案是什么？答案是微前端。微前端是受微服务启发的一种新兴架构，它将单体代码库分解成多个部分，以便多个相对独立的团队分工协作，从而提高项目的灵活性和团队的整体效率。 本书凝结了作者的真知灼见和一手经验，既有原理阐述，又有案例分析。作者详细阐释了微前端的各种适用场景、不同微前端架构的优缺点、微前端决策框架，以及具体的方法和实践。通过90余张示意图，作者直观地呈现了微前端的设计思路与实现技巧。书后附有作者与多位微前端技术先锋的访谈实录。 * 了解微服务原则如何应用于前端开发 * 掌握微前端决策框架的四大关键要素 * 探究各种微前端实现，分析不同架构的优缺点 * 学习微前端自动化策略和持续优化微前端自动化流水线的实践 * 理解微前端的后端模式，探究微前端如何与微服务或单体API层集成 * 洞悉传统的前端应用向微前端迁移的全过程

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

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

译者序xi
序xv
前言xvii
第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
……