微前端设计与实现
上QQ阅读APP看书,第一时间看更新

前言

2016 年 12 月初,我第一次去东京。第一次只去了一周,但在后来的几周里又去了好几次。我仍然清楚地记得在伦敦希思罗机场即将登机时的情形。我心里琢磨着要在马上到来的 12 小时的飞行途中做些什么。在此之前,我已经在世界的另一端待过几个星期了:先是在旧金山湾区参加会议,然后去拉斯维加斯参加了一个活动。

当时我正在做一个类似于 Netflix 的 OTT(over-the-top)平台,专门针对体育内容。里面有每日直播和点播内容,支持在多个国家和 30 多种终端播放,包括网页、手机、游戏机、机顶盒和智能电视等。当时快到年底了,作为一名软件架构师,我必须提出一个新的架构,使公司能够在不同地点部署数百名开发人员,同时不能降低(甚至要提升)交付量。

在飞机上坐好后,我逐渐静下心来。我还没从拉斯维加斯之行的疲惫中解脱出来,而且一想到还要在飞机上度过 12 小时,我就有些烦闷。但是,由于是第一次去日本,因此我感到很兴奋。几分钟后,我点了这次飞行中的第一杯香槟。这也是我第一次坐公务舱,座位非常舒适,工作空间也很大。

起飞一小时后,我从背包里拿出笔记本计算机,开始执行我的“大计划”。我有超过 10 小时的飞行时间来处理这个将服务于全球数百万客户的庞大项目。当时我并不知道,接下来的几小时会彻底改变我对前端跨平台应用的架构方式。

在本书中,我想分享自己在微前端世界里的经历、构建和运行一个稳定的微前端项目的所有经验和技巧,以及微前端的优点和缺点。我希望这些内容能够帮助你评估正在进行的项目或者未来的项目是否适合采用微前端。

让我们现在启程吧!

我为什么写作本书

我从 2015 年开始思考微前端。在之后的几年里,我有幸在一个由多地团队组成、有着数百名开发人员的大型组织中采用微前端,并向人们解释它的优缺点。我还在会议、在线研讨会和聚会上分享我的微前端经验。通过这些方式,我有机会深入社区,倾听开发人员的故事,回答他们的问题,并与以不同方式采用微前端的各种公司交流。

最近,我向世界各地的公司推荐了本书中的一些做法。这些公司来自澳大利亚和北美的一些国家和地区。我在微前端的设计和实现阶段遇到了很多挑战,我将所有的收获都汇集到了本书中。

本书代表了我对微前端的研究、相关经验以及在几年的“实战”中积累的经验和见解。我想向你分享真实的例子,并和你讨论关于微前端的关键话题。不过,请不要期待能在本书中找到大量的代码,因为本书的重点是我在实践微前端的过程中学习到的架构、思想模式和方法论。依我拙见,在实现一个架构时,应该关注多种方式,了解它们的优缺点,而不是只会使用其中一种方式。尽管微前端在未来的几年里会不断演进,但本书仍然适合每一个有兴趣全面学习如何实践微前端架构风格的人。正如指引方向的北极星一样,本书将指导你创建成功的微前端项目。

谁适合阅读本书

本书是为那些希望扩展组织和前端应用的开发人员、架构师和首席技术官编写的。它是思想模式和经验的集合,对任何实现方式的微前端都有参考意义。在本书中,你可以找到迄今为止出现的每一种微前端的实现原则和解决方案。遵循这些最佳实践,你将能够按照正确的思路实现微前端项目,并应对团队在开发微前端项目的过程中所面临的共同挑战。

本书涵盖了技术架构、实现方式等方方面面的微前端知识,涉及从设计阶段一直到如何组织团队将现有项目迁移到微前端,或是开发全新的微前端项目。

本书结构

本书的每一章都有一个特定的主题,相互之间没有太多联系,因此你可以从某一章直接跳到任何一章。当然,阅读本书的最佳方式还是按顺序阅读。本书也可作为工作时的参考书,所以如果你只对特定的主题感兴趣,那么直接跳到对应的章节即可。

本书涵盖以下内容。

第 1 章 前端概览

  这一章将阐述选择微前端的思考过程,并概述不同的前端架构。

第 2 章 微前端原则

  这一章将分析微服务背后的原则以及这些原则是如何适用于前端开发的,重点是深入探究实现微前端的指导原则。

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

  这一章是理解微前端的重要“基石”,它将介绍微前端决策框架的四个关键点:定义、组合、路由和通信。一旦确定了这四个关键点,我们就可以很容易地从任何维度来设计系统的其余部分,比如自动化策略、设计系统等。

第 4 章 探索微前端架构

  微前端有很多实现方式,这一章将探究所有的微前端实现。我将对各种微前端实现的优缺点进行分类和分析。更重要的是,我将为所介绍的每种实现找到合适的使用场景。

第 5 章 微前端技术实现

  在第 4 章的架构分析之后,我们将利用所学的知识实现一个微前端项目,其使用的微前端架构将符合所阐述的决策框架。

第 6 章 构建和部署微前端

  这一章将涵盖为微前端创建成功的自动化策略的原则和最佳实践。具体来说,我们将了解不同的代码仓库策略、持续集成流水线的关键步骤以及如何在生产环境中交付微前端。

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

  这一章将探讨一个微前端自动化策略的实例,其中的见解都来自实际工作,可以立即应用于现有的自动化流水线。

第 8 章 微前端的后端模式

  这一章将涵盖微前端与单体 API 层或微服务集成的不同模式,包括 BFF(服务于前端的后端)、API 网关、服务字典,以及相应的实例和最佳实践。

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

  这一章将分析一个潜在的用例,呈现传统的前端应用迁移到微前端的过程,探讨 ACME

公司的团队向前端分布式架构迁移的方法以及他们为实现目标做出了哪些决策。

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

  这一章的重点是组织,这也是本书的最后一章。架构不仅能指导技术实现,更重要的是,它是帮助你的团队取得成功的机制。

附录 社区对微前端的看法

  微前端社区里有很多值得分享的故事和经验。附录收集了开发过很多微前端项目的专业人士的优秀经验和重要建议。

排版约定

本书使用下列排版约定。

黑体字

表示新术语或重点强调的内容。

 

● 等宽字体(constant width

表示程序片段,以及正文中出现的变量名、函数名和数据类型。

 

● 等宽粗体(constant width bold

表示应该由用户输入的命令或其他文本。

 

● 等宽斜体(constant width italic

表示应该由用户输入的值或根据上下文确定的值替换的文本。

 该图标表示提示或建议。

 该图标表示一般性注记。

O'Reilly 在线学习平台(O'Reilly Online Learning)

40 多年来,O'Reilly Media 致力于提供技术和商业培训、知识和卓越见解,来帮助众多公司取得成功。

我们拥有由专家和创新者组成的庞大网络,他们通过图书、文章和我们的在线学习平台分享他们的知识和经验。O'Reilly 在线学习平台让你能够按需访问现场培训课程、深入的学习路径、交互式编程环境,以及 O'Reilly 和 200 多家其他出版商提供的大量文本资源和视频资源。更多信息,请访问 http://oreilly.com

联系我们

请把对本书的评价和问题发给出版社。

美国:

  O'Reilly Media, Inc.

  1005 Gravenstein Highway North

  Sebastopol, CA 95472

中国:

  北京市西城区西直门南大街 2 号成铭大厦 C 座 807 室(100035)

  奥莱利技术咨询(北京)有限公司

请访问 https://www.oreilly.com/library/view/building-micro-frontends/9781492082989/,以查看相关勘误。1

1本书中文版勘误请到图灵社区本书主页查看和提交。——编者注

对于本书的评论和技术性问题,请发送电子邮件到:errata@oreilly.com.cn

要了解更多 O'Reilly 图书和培训课程等信息,请访问以下网站:http://oreilly.com

我们在 Facebook 的地址如下:http://facebook.com/oreilly

请关注我们的 Twitter 动态:http://twitter.com/oreillymedia

我们的 YouTube 视频地址如下:http://www.youtube.com/oreillymedia

致谢

首先,我要感谢我的家人,包括我的女朋友 Maela 和我的女儿,感谢家人所做的一切,让我获得了每天更进一步的力量。感谢所有一直以来用各种方式鼓励我的人。

非常感谢体育流媒体平台 DAZN 背后的团队,是他们相信我的想法和判断,鼓励我全面应用微前端并深入探索它的益处。

感谢出版商 O'Reilly Media 让我有机会写一本关于微前端的书,尤其感谢 Jennifer Pollock 和 Angela Rufino 在我这几个月的写作过程中提供的所有支持,她们为改进本书提供了持续不断的反馈。我还要感谢出色的编辑 Erin Brenner,她花了相当多的时间来梳理我的想法,并把它们解读成你即将阅读的内容。

感谢我的“虚拟导师”Neal Ford,我称他为“架构师”,因为他懂的知识令人难以置信。他还礼貌地同意了为本书写序。

最后,感谢所有审阅书稿并提供改进建议的人们,感谢所有参加过我的讲座和研讨会的人们。我希望本书恰当地呈现了他们所分享的经验和挑战。

更多信息

扫描下方二维码,即可获取电子书相关信息及读者群通道入口。