具有微前端的分布式架构
Posted: Thu Jan 16, 2025 6:40 am
微前端通常，基于微服务架构的后端应用程序由前端的整体应用程序（通常以 Web 应用程序的形式）进行补充。虽然服务器端系统受益于分布式架构的所有优点，但众所周知的挑战阻碍了前端的开发。可扩展性、灵活性、组织以及持续集成和交付方面的优势不会超出后端的边界，但会在整体应用程序开发开始时结束。微前端的概念旨在通过将前端 Web 应用程序划分为单独的、独立的子系统来解决这个问题。这创建了从用户界面到服务器端数据逻辑和持久性的垂直结构。
具有微前端的垂直结构，来源：
具有微前端的垂直结构，来源：
优点和缺点
应该强调的是，微前端较少用于解决技术性质的问题，而是代表克服组织挑战的一种手段。微前端提供了很大的潜力，特别是对于后端基于微服务架构的大型项目，并且可能已经需要开发团队的职能部门。具体来说，它们的使用具有以下优点：
由自治团队独立开发和交付
松散耦合和更简单的代码库
各个团队的技术独立性
然而，当将微前端视为一种架构模式来使用时，发挥作用的不仅仅 捷克共和国 whatsapp 数据 是其优点。与软件开发中的任何解决方案一样，它们并不是“灵丹妙药”，而是有一些缺点。这些主要归因于技术和组织复杂性的增加，应考虑以下方面：
将应用程序划分为子系统
将子系统合并为一个整体系统
确保一致的用户体验
依赖管理
基础设施成本增加
任何考虑微前端架构的人都应该投入足够的时间进行规划，以便正确评估所涉及的工作并能够在早期阶段解决任何问题。
技术实施
如果将微前端与微服务的受欢迎程度进行比较，您会发现前者远不如后端那么成熟。这也可能是没有最佳实践或“可行”实施方法的原因之一。由于微前端的原理基本上只是单独开发和部署独立的前端应用程序并将它们组合成一个无缝的整体应用程序，因此实现选项范围从简单的本机解决方案到更复杂的工具支持的方法。下面我将向您展示使用 webpack 和 Module-Federation 的实现。
带有 Angular 和 webpack 的微前端模块联盟
模块捆绑器 webpack 从版本 5 及更高版本提供了一个名为“模块联合”的功能，借助该功能，可以在运行时将单独捆绑和提供的应用程序集成到另一个应用程序中。除其他外，捆绑器还用于 Angular CLI（用于开发和交付 Angular 应用程序的标准工具）中。因此，模块联合是在 Angular 应用程序环境中实现微前端架构的一种有趣的方法。在下一节中，我将向您展示如何使用模块联合来设计基于 Angular 的微前端，并将它们组合到一个通用应用程序中。
我们想要实现一个基于 Angular 和 Module Federation 的原型应用程序，它由以下子系统组成：
原型应用，来源：自己的插图
原型应用，来源：自己的插图
红色： App Shell：Angular 组件作为框架应用程序的一部分
黄色： “购买”组件：动态加载的 Angular 组件
橙色： “Banner”组件：动态加载的Web组件
绿色： “购物车”和“菜单”组件：动态加载的 Angular 模块的一部分
为了使用 Module-Federation，Angular CLI 使用的 webpack 配置必须进行相应调整。最简单的方法是使用自定义 Angular CLI 构建器。为此，我们使用构建器，它是 npm 包 @angular-architects/module-federation 的一部分。
具有微前端的垂直结构，来源：
具有微前端的垂直结构，来源：
优点和缺点
应该强调的是，微前端较少用于解决技术性质的问题，而是代表克服组织挑战的一种手段。微前端提供了很大的潜力，特别是对于后端基于微服务架构的大型项目，并且可能已经需要开发团队的职能部门。具体来说，它们的使用具有以下优点：
由自治团队独立开发和交付
松散耦合和更简单的代码库
各个团队的技术独立性
然而，当将微前端视为一种架构模式来使用时，发挥作用的不仅仅 捷克共和国 whatsapp 数据 是其优点。与软件开发中的任何解决方案一样，它们并不是“灵丹妙药”，而是有一些缺点。这些主要归因于技术和组织复杂性的增加，应考虑以下方面：
将应用程序划分为子系统
将子系统合并为一个整体系统
确保一致的用户体验
依赖管理
基础设施成本增加
任何考虑微前端架构的人都应该投入足够的时间进行规划，以便正确评估所涉及的工作并能够在早期阶段解决任何问题。
技术实施
如果将微前端与微服务的受欢迎程度进行比较，您会发现前者远不如后端那么成熟。这也可能是没有最佳实践或“可行”实施方法的原因之一。由于微前端的原理基本上只是单独开发和部署独立的前端应用程序并将它们组合成一个无缝的整体应用程序，因此实现选项范围从简单的本机解决方案到更复杂的工具支持的方法。下面我将向您展示使用 webpack 和 Module-Federation 的实现。
带有 Angular 和 webpack 的微前端模块联盟
模块捆绑器 webpack 从版本 5 及更高版本提供了一个名为“模块联合”的功能，借助该功能，可以在运行时将单独捆绑和提供的应用程序集成到另一个应用程序中。除其他外，捆绑器还用于 Angular CLI（用于开发和交付 Angular 应用程序的标准工具）中。因此，模块联合是在 Angular 应用程序环境中实现微前端架构的一种有趣的方法。在下一节中，我将向您展示如何使用模块联合来设计基于 Angular 的微前端，并将它们组合到一个通用应用程序中。
我们想要实现一个基于 Angular 和 Module Federation 的原型应用程序，它由以下子系统组成：
原型应用，来源：自己的插图
原型应用，来源：自己的插图
红色： App Shell：Angular 组件作为框架应用程序的一部分
黄色： “购买”组件：动态加载的 Angular 组件
橙色： “Banner”组件：动态加载的Web组件
绿色： “购物车”和“菜单”组件：动态加载的 Angular 模块的一部分
为了使用 Module-Federation，Angular CLI 使用的 webpack 配置必须进行相应调整。最简单的方法是使用自定义 Angular CLI 构建器。为此，我们使用构建器，它是 npm 包 @angular-architects/module-federation 的一部分。