什么是微前端架构？

本文概述了微前端以及如何将旧用户界面分解为 Angular 微前端。

什么是微前端？

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

微前端的主要特征和概念包括：

• 独立性：微前端是独立的，独立开发、测试和部署。这种自主权允许不同的团队以最少的协调来处理应用程序的不同部分。

• 技术不可知论：每个微前端都可以使用不同的前端技术（例如，Angular、React、Vue.js），只要它们可以集成到父应用程序或 Shell 应用程序中即可。

• 隔离：微前端在代码和依赖关系方面都是相互隔离的。这种隔离可确保一个微前端的更改不会影响其他微前端。

• 集成：容器或 Shell 应用程序负责集成和编排微前端。它提供用户界面的整体结构并处理微前端之间的路由。

• 独立部署：微前端可以独立部署，持续交付，更新更快。这降低了回归问题的风险并加速了发布周期。

• 松散耦合：微前端通过定义良好的 API 和共享协议（例如 HTTP）进行通信，从而允许它们松散耦合。这种关注点分离简化了开发和维护。

• 用户界面组合：容器应用程序通过将微前端组合在一起来组装用户界面。这种组合可以在服务器端（服务器端包含）或客户端（客户端路由）上完成。

• 扩展和性能：微前端支持应用程序特定部分的水平扩展，有助于优化频繁访问区域的性能。

• 去中心化团队：不同的团队或开发小组可以在单独的微前端上工作。这种去中心化对于大型或分布式组织来说是有利的。

微前端架构在大型、复杂的 Web 应用程序中特别有用，其中单一方法可能会导致开发瓶颈、复杂性增加以及维护和扩展应用程序的困难。

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

托管在单个 Shell UI 中的微前端

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

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

1. 创建 Shell Angular 应用程序

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

2. 创建微前端

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

3. 为微前端配置路由

在每个微前端应用程序中，配置路由，以便每个微前端都有自己的一组路由。您可以为此使用 Angular 路由。

4. 使用微前端框架

将微前端框架（例如 single-spa 或）集成 qiankun 到您的 Shell Angular 应用程序中。

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

安装 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 
start();

5. 托管微前端

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

6. 开发与构建

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

7. 部署

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

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

文章来源地址 https://www.toymoban.com/diary/system/559.html

到此这篇关于什么是微前端架构？的文章就介绍到这了, 更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持 TOY 模板网！

原文地址:https://www.toymoban.com/diary/system/559.html

如若转载，请注明出处：如若内容造成侵权 / 违法违规 / 事实不符，请联系站长进行投诉反馈，一经查实，立即删除！