微前端概述(Micro Frontends) 以及相比单体应用，微前端能带来什么好处
原文地址
好的前端开发很难。 扩展前端开发，让多个团队可以同时开发一个大型复杂的产品就更难了。在本文中，我们将描述将前端单体分解成许多更小、更易于管理的部分的最新趋势，以及这种架构如何提高处理前端代码的团队的效率和效率。 除了讨论各种好处和成本外，我们还将介绍一些可用的实现选项，我们将深入研究演示该技术的完整示例应用程序。
近年来，微服务大受欢迎，许多组织使用这种架构风格来避免大型单体后端的局限性。虽然关于这种构建服务器端软件的风格已经写了很多，但许多公司仍在与单体前端代码库作斗争。
也许您想构建一个渐进式或响应式 Web 应用程序，但找不到一个简单的地方来开始将这些功能集成到现有代码中。也许您想开始使用新的 JavaScript 语言功能（或可以编译为 JavaScript 的无数语言之一），但您无法将必要的构建工具放入现有的构建过程中。或者，也许您只是想扩展您的开发，以便多个团队可以同时处理单个产品，但现有单体的耦合性和复杂性意味着每个人都在互相踩踏。这些都是真正的问题，都会对您有效地为客户提供高质量体验的能力产生负面影响。
最近，我们看到越来越多的人关注复杂的现代 Web 开发所需的整体架构和组织结构。特别是，我们看到出现了将前端单体分解为更小、更简单的块的模式，这些块可以独立开发、测试和部署，同时仍然作为一个单一的有凝聚力的产品出现在客户面前。我们称这种技术为微前端，我们将其定义为：
一种架构风格，其中可独立交付的前端应用程序组合成一个更大的整体。
我们从微前端看到的一些主要好处是：
- 更小、更有凝聚力和可维护的代码库
- 具有解耦、自治团队的更具可扩展性的组织
- 能够以比以前更多的增量方式升级、更新甚至重写前端的某些部分
- 这些突出优势与微服务可以提供的优势相同，这并非巧合。
当然，在软件架构方面没有免费的午餐——一切都是有代价的。一些微前端实现可能导致依赖项重复，增加用户必须下载的字节数。此外，团队自主性的急剧增加可能导致团队工作方式支离破碎。尽管如此，我们相信这些风险是可以管理的，而且微前端的好处往往大于成本。
收益
我们不是根据特定的技术方法或实现细节来定义微前端，而是强调出现的属性及其带来的好处。
增量升级
对于许多组织来说，这是他们微前端之旅的开始。旧的、大型的前端单体被过去的技术堆栈或在交付压力下编写的代码所阻碍，并且已经到了完全重写很诱人的地步。为了避免完全重写的危险，我们更愿意逐个扼杀旧的应用程序，同时继续向我们的客户提供新功能，而不会被单体应用拖累。
这通常会导致微前端架构。一旦一个团队获得了在对旧世界几乎没有修改的情况下将功能一路投入生产的经验，其他团队也将希望加入新世界。现有的代码仍然需要维护，在某些情况下，继续向其添加新功能可能是有意义的，但现在可以选择。
最终结果是，我们获得了更多的自由，可以对产品的各个部分进行逐案决策，并对我们的架构、依赖项和用户体验进行增量升级。如果我们的主框架发生重大突破性变化，每个微前端都可以在有意义的时候升级，而不是被迫停止世界并立即升级所有内容。如果我们想尝试新技术或新的交互模式，我们可以以比以前更加孤立的方式进行。
简单、解耦的代码库
根据定义，每个单独的微前端的源代码将比单个单体前端的源代码小得多。这些较小的代码库对于开发人员来说往往更简单、更容易使用。特别是，我们避免了不应该相互了解的组件之间无意和不适当的耦合所带来的复杂性。通过在应用程序的有界上下文周围绘制更粗的线，我们使这种意外耦合更难出现。
当然，单一的、高层次的架构决策（即“让我们做微前端”）并不能替代良好的老式干净代码。我们并没有试图让自己免于考虑我们的代码并努力提高其质量。相反，我们试图让错误的决定变得困难，而好的决定变得容易，从而使自己陷入成功的陷阱。例如，跨有界上下文共享域模型变得更加困难，因此开发人员不太可能这样做。类似地，微前端促使您明确和深思熟虑地了解数据和事件如何在应用程序的不同部分之间流动，无论如何我们都应该这样做！
独立部署
与微服务一样，微前端的独立部署能力是关键。这会缩小任何给定部署的范围，从而降低相关风险。 无论您的前端代码以何种方式或在哪里托管，每个微前端都应该有自己的持续交付管道，用于构建、测试和部署它一直到生产。我们应该能够在不考虑其他代码库或管道的当前状态的情况下部署每个微前端。
旧的单体应用是否处于固定的、手动的、每季度的发布周期，或者隔壁的团队是否将一个半完成或损坏的功能推送到他们的主分支中都无关紧要。
如果给定的微前端准备投入生产，它应该能够这样做，并且该决定应该由构建和维护它的团队决定。
自治团队
作为将我们的代码库和我们的发布周期解耦的更高层次的好处，我们在拥有完全独立的团队方面还有很长的路要走，他们可以拥有一个产品的一部分，从构思到生产再到更远。 团队可以完全拥有为客户提供价值所需的一切，这使他们能够快速有效地行动。 为此，我们的团队需要围绕业务功能的垂直切片组建，而不是围绕技术能力。 一种简单的方法是根据最终用户将看到的内容划分产品，因此每个微前端封装应用程序的单个页面，并由单个团队端到端拥有。 与围绕技术或“横向”问题（如样式、表单或验证）组建团队相比，这为团队工作带来了更高的凝聚力。
总结
简而言之，微前端就是将大而可怕的东西切成更小、更易于管理的部分，然后明确它们之间的依赖关系。 我们的技术选择、我们的代码库、我们的团队和我们的发布流程都应该能够彼此独立地运行和发展，而无需过度协调。
更多Jerry的原创文章，尽在：“汪子熙”:
微前端概述(Micro Frontends) 以及相比单体应用，微前端能带来什么好处相关推荐
- 单体架构、分布式架构、微服务概述
单体架构.分布式架构.微服务概述 一.单体架构 二.分布式架构 三.微服务 总结 集群:同一个应用,部署在不同的服务器 服务:业务功能拆分独立成一个模块(业务模块) 一.单体架构 单体架构:将业务的所 ...
- Intel Sandy Bridge/Ivy Bridge架构/微架构/流水线 (4) - 流水线前端概述
The Front End 本节讲述流水线前端的关键特征.下表列出了前端的主要部件,以及对应的功能和所面临的性能挑战. 表:Intel Sandy Bridge微架构的前端部件 部件 功能 性能挑战 ...
- 【项目实战】Java从单体到微服务打造房产销售平台(一) - 整体概述
Java从单体到微服务打造房产销售平台 可掌握技能:从0-1业务设计 + SpringCloud(微服务改造) https://coding.imooc.com/class/174.html
- 分布式与微服务——Iaas，Paas和Saas、单体应用和缺点、微服务概念、传统 分布式 SOA 架构与微服务架构的区别、微服务实战、什么是RPC、CAP定理和BASE理论、唯一ID生成、实现分布式
文章目录 1-什么是Iaas,Paas和Saas 一 IaaS基础设施服务 二 paas平台即服务 三saas软件即服务 四 总结 2-单体应用和缺点 一 单体应用 二 单体应用的缺陷 3-微服务概念 ...
- Go语言云原生与微服务（二）微服务概述
Hello,我是普通Gopher,00后男孩,极致的共享主义者,想要成为一个终身学习者.专注于做最通俗易懂的计算机基础知识类公众号.每天推送Golang技术干货,内容起于K8S而不止于K8S,涉及Do ...
- 牛批了第一次见到这么清晰的微服务概述，助你轻松入门到进阶
前言 随着各行各业的快速发展,业务规模的不断扩大,不可避免地造成原有架构不能够适应快速的增长和变化.这时,微服务就进入大家的视野,其实在微服务之前,很多公司已经做过服务化的改造,并且取得了一定的成果, ...
- 介绍微服务框架Micro笔记
Micro - 微服务开发套件 原文地址 目前,你应该听说过了一个新概念-微服务; 如果你不熟悉而又对微服务感兴趣,可以来这里查看更多的介绍: 本文将介绍开源的微服务开发套件-Micro; Micro ...
- 前端iframe 能指定本地网页吗_微前端的技术拆分方式
路由分发式 通过HTTP服务器的反向代理功能,将请求路由到对应的应用上 特点 采用的最多.最容易的"微前端"方案 并非一个整体,每当用户从A应用转换到B应用的时候,往往需要刷新一下 ...
- 单体 soa 微服务 区别_漫谈何时从单体架构迁移到微服务？
面对微服务如火如荼的发展,很多人都在了解,学习希望能在自己的项目中帮得上忙,当你对微服务的庐山真面目有所了解后,接下来就是说服自己了,到底如何评估微服务,什么时候使用微服务,什么时间点最合适,需要哪些 ...
最新文章
- 简单实现ConfigurationManager.AppSettings[]效果存储系统变量
- poj 1269 计算几何
- php和python性能-python、node、php、go、java性能对比测试
- 基于Python的Web自动化（Selenium）之读取文件
- 基于matlab的点云重建与三角剖分
- E - Escape from the Island（最短路+dp）
- 侬娜·杰尔_杰尔·地狱
- windows Virtualbox下配置Ubuntu，且用ssh连接
- 【Python】模块学习之Timer定时任务，递归定时自调获取博客浏览量
- c# 线程 WPF 进度百分比（菜鸟）
- Linux kernel路由机制分析（上）
- 测试er如何通过MacOS连接IOS系统iPhone查看系统崩溃日志？
- OTL电路与OCL功放电路的区别
- visual studio2017登录时需要更新 microsoft edge 或当前浏览器的最新版本
- 双非渣本，他是如何逆袭拿到3W高薪
- C# 修改图片文件分辨率大小
- 【编程不良人】快速入门Spring学习笔记08---事务属性、Spring整合Structs2框架(SM)、Spring整合Mybatis+Struts2(SSM)、Spring注解、SSM注解式开发
- DiskGenius分区时提示：磁盘“**”的分区已更改，请先保存分区表，然后执行本操作解决方法
- bilibili服务器维护7月,GitHub - thestarweb/bilibilidan: 一个B站弹幕姬，就是不会在第一时间维护。。支持插件！！...
- 十二种卫星地图的快速比较和选择方法