什么是微前端？

微前端是一种架构方法，将微服务的概念扩展到Web应用程序的前端。在微前端架构中，复杂的Web应用程序被拆分成更小、可独立部署和可维护的单元，称为微前端。每个微前端负责用户界面的特定部分及其相关功能。

微前端的关键特征和概念包括：

• 独立性： 微前端是自包含的，可以独立开发、测试和部署。这种自治性允许不同团队在应用程序的不同部分上进行工作，减少协调成本。
• 技术无关性： 每个微前端可以使用不同的前端技术（例如 Angular、React、Vue.js），只要它们可以集成到父级或Shell应用程序中。
• 隔离性： 微前端在代码和依赖方面相互隔离。这种隔离确保一个微前端的更改不会影响其他微前端。
• 集成： 一个容器或Shell应用程序负责集成和编排微前端。它提供用户界面的整体结构，并处理微前端之间的路由。
• 独立部署： 微前端可以独立部署，实现持续交付和更快的更新。这降低了回归问题的风险，并加快了发布周期。
• 松耦合： 微前端通过定义良好的API和共享协议（如HTTP）进行通信，实现松耦合。这种关注点的分离简化了开发和维护。
• 用户界面组合： 容器应用程序通过组合微前端来组装用户界面。这种组合可以在服务器端（服务器端包含）或客户端（客户端路由）上完成。
• 扩展和性能： 微前端使应用程序的特定部分可以进行水平扩展，有助于优化频繁访问的区域的性能。
• 分散的团队： 不同的团队或开发组可以负责各自的微前端。这种分散对于大型或分布式组织是有利的。

微前端架构在大型、复杂的Web应用程序中特别有用，因为单体化方法可能导致开发瓶颈、增加复杂性，并且在维护和扩展应用程序方面存在困难。

通过使用微前端，组织可以在前端开发过程中实现更大的灵活性、敏捷性和可维护性，与软件架构领域中微服务的更广泛趋势相一致。

将微前端托管到单个Shell UI中

让我们看看如何将两个Angular微前端托管到单个Shell UI 中。

要在单个Shell Angular UI 中托管两个Angular微前端，您可以使用微前端框架，如 single-spa 或 qiankun 来实现。这些框架使您能够将多个独立开发的微前端集成到单个应用程序Shell中。以下是如何设置这样的架构的高级概述：

1. 创建Shell Angular应用程序

设置您的Shell Angular应用程序作为托管微前端的主要容器。您可以使用Angular CLI或任何其他首选方法创建此应用程序。

2. 创建微前端

将您的两个Angular微前端作为单独的Angular应用程序创建。每个微前端应该有自己的路由和功能。

3. 为微前端配置路由

在每个微前端应用程序中，配置路由，以便每个微前端都有自己的路由集。您可以使用Angular路由来实现这一点。

4. 使用微前端框架

在您的Shell Angular应用程序中集成微前端框架，如 single-spa 或 qiankun。

以下是如何在Shell Angular应用程序中使用 single-spa 的示例：

安装 single-spa：

npm install single-spa

Shell Angular应用程序代码

在您的Shell Angular应用程序中，配置 single-spa 来加载微前端。

import { registerApplication, start } from 'single-spa';

// 注册微前端
registerApplication({
 name: 'customer-app',
 app: () => System.import('customer-app'), // 加载customer-app
 activeWhen: (location) => location.pathname.startsWith('/customer-app'),
});

registerApplication({
 name: 'accounts-app',
 app: () => System.import('accounts-app'), // 加载accounts-app
 activeWhen: (location) => location.pathname.startsWith('/accounts-app'),
});

// 启动single-spa
start();

5. 托管微前端

配置您的Shell Angular的路由，根据URL定向到相应的微前端。例如，当用户访问 /customer-app 时，Shell 应该加载客户微前端，而对于 /accounts-app，加载账户微前端。

6. 开发和构建

分别开发和构建您的微前端。每个都应该是一个独立的Angular应用程序。

7. 部署

部署Shell Angular应用程序以及微前端，确保它们可以从同一域名下访问。

通过这种设置，您的Shell Angular应用程序将充当托管微前端的主要容器，并且您可以在Shell的路由中在微前端之间进行导航。这使您可以拥有一个单一的Angular UI，托管多个微前端，每个都有自己的功能。