新書推薦:
《
奶奶的半个心愿 “课本里的作家” 中考热点作家孙道荣2024年全新散文集
》
售價:NT$
190.0
《
天生坏种:罪犯与犯罪心理分析
》
售價:NT$
445.0
《
新能源材料
》
售價:NT$
290.0
《
传统文化有意思:古代发明了不起
》
售價:NT$
199.0
《
无法从容的人生:路遥传
》
售價:NT$
340.0
《
亚述:世界历史上第一个帝国的兴衰
》
售價:NT$
490.0
《
人工智能与大数据:采煤机智能制造
》
售價:NT$
440.0
《
未来漫游指南:昨日科技与人类未来
》
售價:NT$
445.0
編輯推薦:
就像微服务为后端系统带来了灵活性和可维护性,微前端也为基于浏览器的应用程序提供了同样的优势。
你可以将项目设计为包含多个单独的组件,每个组件中包括各自的接口、逻辑和存储功能,这样就可以独立开
发这些组件,并在浏览器中组合使用它们。
《微前端实战》一书指导读者将微服务方法应用于前端领域。本书首先会介绍微前端的核心设计思想,之
后你将亲手创建一个电商应用程序,并在开发过程中处理一些实际问题,如服务端组合和客户端组合、路由、
确保外观和交互的一致性等。最终,你将深入了解团队工作流模式,这种模式能够最大化地突显独立开发应用
程序组件的优势。
內容簡介:
主要内容
●将多个独立的应用程序组合成一个统一的前端应用程序
●将基于不同框架的代码组合在一起
●浏览器端组合、服务端组合以及路由
●高效的开发团队实践和项目工作流
關於作者:
Michael Geers是一名软件开发者,专注于用户界面相关开发领域。他从十几岁起就开始为网站开发软件。在过去的几年里,他参与过多个垂直架构的项目,在多个国际性会议上分享了自己的经验,并在杂志上发表了一系列相关的文章。
目前,他仍在持续运营https://micro-frontends.org站点。
目錄 :
第Ⅰ部分 微前端初体验
第1章 什么是微前端 3
1.1 概览图 4
1.1.1 系统和团队 5
1.1.2 前端 8
1.1.3 前端集成 11
1.1.4 公共话题 13
1.2 微前端解决了哪些问题 14
1.2.1 优化功能开发 14
1.2.2 不再有前端巨石架构 15
1.2.3 适应变化 16
1.2.4 自主的优势 19
1.3 微前端的缺点 21
1.3.1 冗余 21
1.3.2 一致性 21
1.3.3 异质性 22
1.3.4 更多的前端代码 22
1.4 使用微前端的合理时机 23
1.4.1 适合大中型项目 23
1.4.2 在Web应用程序中使用效果最好 23
1.4.3 效率与开销 24
1.4.4 微前端不适用的场景 25
1.4.5 谁在使用微前端 26
1.5 本章小结 26
第2章 我的第一个微前端项目 29
2.1 The Tractor Store简介 30
2.1.1 准备开始 30
2.1.2 运行书中的示例代码 32
2.2 通过链接进行页面跳转 35
2.2.1 数据所有权 35
2.2.2 团队契约 36
2.2.3 如何实现 37
2.2.4 处理URL的变化 40
2.2.5 优点 41
2.2.6 缺点 42
2.2.7 何时使用链接集成技术 42
2.3 通过iframe进行组合 42
2.3.1 如何实现 43
2.3.2 优点 45
2.3.3 缺点 45
2.3.4 何时使用iframe集成技术 46
2.4 内容预告 46
2.5 本章小结 47
第Ⅱ部分 路由、组合与通信
第3章 使用Ajax进行组合与服务端路由 51
3.1 通过Ajax进行组合 52
3.1.1 如何实现 53
3.1.2 样式与脚本的命名空间 55
3.1.3 声明式地加载h-include 59
3.1.4 优点 59
3.1.5 缺点 61
3.1.6 何时使用Ajax集成 62
3.1.7 总结 62
3.2 通过Nginx实现服务端路由 63
3.2.1 如何实现 66
3.2.2 资源的命名空间 69
3.2.3 路由配置的方法 70
3.2.4 基础设施的归属 71
3.2.5 何时应使用单个域名 73
3.3 本章小结 73
第4章 服务端组合 75
4.1 通过Nginx和服务端包含(SSI)进行组合 76
4.1.1 如何实现 77
4.1.2 更少的加载次数 80
4.2 处理不可靠的片段 81
4.2.1 可分离的片段 82
4.2.2 集成Near You片段 83
4.2.3 超时和回退 84
4.2.4 回退内容 86
4.3 深入研究标签的组装性能 87
4.3.1 并行加载 87
4.3.2 嵌套的片段 88
4.3.3 延迟加载 89
4.3.4 首字节时间和流式输出 90
4.4 其他解决方案概述 92
4.4.1 Edge-Side Includes 92
4.4.2 Zalando Tailor 93
4.4.3 Podium 95
4.4.4 哪种方案更适合 102
4.5 服务端组合的优缺点 104
4.5.1 优点 104
4.5.2 缺点 104
4.5.3 使用服务端集成的时机 105
4.6 本章小结 106
第5章 客户端组合 107
5.1 使用Web Component封装微前端 108
5.1.1 如何实现 110
5.1.2 将框架封装在Web Component内 115
5.2 使用Shadow DOM实现样式隔离 117
5.2.1 创建shadow root 117
5.2.2 样式隔离 118
5.2.3 何时使用Shadow DOM 120
5.3 使用Web Component进行组合的优缺点 121
5.3.1 优点 121
5.3.2 缺点 122
5.3.3 使用客户端集成的时机 122
5.4 本章小结 123
第6章 通信模式 125
6.1 用户界面通信 126
6.1.1 父级页面到片段 127
6.1.2 片段到父级页面 131
6.1.3 片段到片段 135
6.1.4 使用Broadcast Channel API发布/订阅 140
6.1.5 UI通信更适合什么场景 142
6.2 其他通信机制 143
6.2.1 全局上下文和身份验证 143
6.2.2 管理状态 145
6.2.3 前后端通信 145
6.2.4 数据复制 146
6.3 本章小结 148
第7章 客户端路由和应用程序容器 149
7.1 应用程序容器中的扁平化路由 152
7.1.1 什么是应用程序容器 152
7.1.2 剖析应用程序容器 153
7.1.3 客户端路由 155
7.1.4 页面的渲染 158
7.1.5 应用程序容器和团队间的契约 161
7.2 双层路由的应用程序容器 162
7.2.1 实现一级路由 163
7.2.2 团队层面的路由实现 164
7.2.3 在URL变化时会发生什么 166
7.2.4 应用程序容器API 169
7.3 single-spa元框架的简述 171
7.4 来自统一单页面应用的挑战 178
7.4.1 需要思考的问题 179
7.4.2 何时适合使用统一的单页面应用 181
7.5 本章小结 183
第8章 组合和多端渲染 185
8.1 结合使用服务端和客户端组合 187
8.1.1 SSI和Web Component 188
8.1.2 团队间的约定 194
8.1.3 其他解决方案 195
8.2 何时适合采用多端组合 195
8.2.1 纯服务端组合的多端渲染 195
8.2.2 复杂性增加 196
8.2.3 多端的统一单页面应用 196
8.3 本章小结 197
第9章 适合我们项目的架构 199
9.1 复习专业术语 200
9.1.1 路由和页面切换 200
9.1.2 组合技术 201
9.1.3 顶层架构 203
9.2 复杂度的比较 206
9.3 是构建网站还是应用程序 208
9.3.1 Documents-to-Applications Continuum 208
9.3.2 服务端渲染、客户端渲染和多端渲染的选择 210
9.4 选择正确的架构和集成技术 211
9.4.1 强隔离(遗留系统,第三方引入) 213
9.4.2 快速的首页加载/渐进式增强 213
9.4.3 即时的用户反馈 214
9.4.4 路由跳转 215
9.4.5 同一页面集成多个微前端 216
9.5 本章小结 216
第Ⅲ部分 如何做到快速、一致、有效
第10章 资源加载 221
10.1 资源引用策略 222
10.1.1 直接引用 222
10.1.2 挑战:缓存破坏和独立部署 223
10.1.3 通过重定向引用(客户端) 225
10.1.4 通过include引用(服务端) 227
10.1.5 挑战:同步标签和资源版本 230
10.1.6 代码嵌入 233
10.1.7 集成解决方案(Tailor、Podium等) 234
10.1.8 简单总结 237
10.2 打包粒度 238
10.2.1 HTTP/2 238
10.2.2 all-in-one打包方式 239
10.2.3 以团队维度进行打包 239
10.2.4 以页面和片段的维度进行打包 240
10.3 按需加载 241
10.3.1 微前端代理 241
10.3.2 CSS的懒加载 242
10.4 本章小结 242
第11章 至关重要的性能 243
11.1 高性能架构设计 244
11.1.1 性能指标因团队而异 245
11.1.2 多团队协作时的性能预算 246
11.1.3 排查性能下降的原因 247
11.1.4 性能收益 249
11.2 精简并复用vendor库 251
11.2.1 团队自治的代价 251
11.2.2 精简代码 253
11.2.3 全局范围内引用相同版本的verdor库 254
11.2.4 vendor代码版本管理 256
11.2.5 不要共享业务代码 271
11.3 本章小结 272
第12章 UI设计系统 275
12.1 为什么需要一个设计系统 276
12.1.1 目标与作用 278
12.1.2 益处 278
12.2 公用设计系统与自治团队 279
12.2.1 是否有必要搭建自己的设计系统 279
12.2.2 不断完善设计系统 280
12.2.3 持续投入以及责任到人 280
12.2.4 获得团队的认可 281
12.2.5 开发流程:集中模式与联合模式 283
12.2.6 开发阶段 285
12.3 运行时整合与构建时整合 286
12.3.1 运行时整合 287
12.3.2 版本包 289
12.4 样式库中的组件:通用与定制 293
12.4.1 组件类型的选择 293
12.4.2 改变 297
12.5 哪些组件应该沉淀到中心化的样式库中 298
12.5.1 公用组件的成本 299
12.5.2 公用样式库或者本地开发 299
12.5.3 公用样式库和私有样式库 302
12.6 本章小结 303
第13章 团队及职责边界 305
13.1 将系统与团队对齐 306
13.1.1 明确团队边界 307
13.1.2 团队组成 310
13.1.3 文化改变 313
13.2 知识分享 314
13.2.1 实践社区 315
13.2.2 学习及赋能 316
13.2.3 展示工作 316
13.3 横向共性问题 317
13.3.1 中心化的基础设施 317
13.3.2 专业化的组件团队 318
13.3.3 一致的协议和约定 319
13.4 技术多样性 319
13.4.1 工具箱和默认选择 319
13.4.2 前端蓝图 320
13.4.3 不要抵触复制 322
13.4.4 步调一致的好处 322
13.5 本章小结 323
第14章 迁移、本地开发及测试 325
14.1 迁移 326
14.1.1 概念验证和示范作用 326
14.1.2 策略一:逐个迁移 328
14.1.3 策略二:前端先行 330
14.1.4 策略三:greenfield和“大爆炸” 332
14.2 本地开发 333
14.2.1 不要运行其他团队的代码 334
14.2.2 模拟页面片段 335
14.2.3 沙盒化代码片段 337
14.2.4 从备机环境或者生产环境中集成其他团队的微前端 339
14.3 测试 339
14.4 本章小结 341
內容試閱 :
我是一名有着20年经验的Web开发人员。在这20年中,我参与了各种规模的项目,其中包括独自一人开发的微型创业项目,与其他几位同伴一同完成的小型项目,也参与过多人合作的大型项目(人数肯定超过了我家餐桌旁摆放的椅子数量)。
2014年,我和neuland Büro für Informatik的同事们负责为一家连锁百货公司重建电子商务系统。其现有的电子商务系统不仅存在性能问题,而且结构非常混乱,在其基础上开发新的功能需要耗费很长时间,通常还会引发系统其他功能的故障。随着相关开发团队规模的逐渐扩大,系统愈发难以维护。客户要求新的系统除了具有更加合理的架构外,还希望在此架构上,不同的开发团队能够独立开展工作,互不影响。这种并行开发的能力,对于客户以信息化为基础快速扩张业务的计划,有着至关重要的意义。为此,我们选择了一种“垂直化”的系统架构:按照职能划分,设立多个独立的团队,每个团队专门负责一块特定业务的开发,包括从数据库到前端页面展示的所有工作。这样每个团队所负责开发的部分都是独立和自治的,最终会在前端页面层面整合在一起。从概念上来看,前端整合似乎没有什么难度,但事实上我们需要掌握大量的知识才能有效地实现前端整合。随着项目的深入,我们逐步完善了所采用的技术,并从实践中总结了大量经验。
与此同时,其他公司也在采用类似的技术方案。然而业界对这种方案没有一个统一的命名。每当我想通过搜索引擎了解多个独立且自治的团队在共同完成一个Web应用程序所面临的挑战时,总是无法找到合适的搜索词来恰当地描述我的意图。在2016年11月,ThoughtWorks Technology Radar将这种技术方案命名为“微前端”,这一术语的出现更加便于大家在开发社区中围绕一致的技术架构分享最佳实践、技术和工具。
在2017年的夏天,我抽空对实践中的一些经验进行了总结。将所使用的技术凝结为独立的示例项目,并发布到https://micro-frontends.org上。从那时起,情况发生了一些变化,我被邀请在各种会议上发言,也收到了许多杂志社的约稿。社区中的开发人员还将网站翻译成各种语言。
最重要的是,去年年初,Manning出版社的Nicole和Brian找到了我。他们邀请我写一本关于微前端的书。收到邀请时我首先想到的是:“这有点离谱,我可不是一名作家!我甚至不喜欢阅读文字,而更喜欢倾听、编写代码、搭建系统以及解决问题”。但这看起来又是一个千载难逢的机会,在给出答复之前我经过了慎重考虑,并与家人和朋友讨论了多次。最后我决定抓住机会,接受这个邀请。毕竟,我非常喜欢表达和阐述。将思考总结成书,以图(我非常喜欢图)和代码示例的方式呈现,对我来说也是一种挑战,在整个过程中我也能学到很多东西。回顾编写本书的历程,我很满意当初的决定,以及这个决定的最终产物,也就是各位现在看到的这本书。