什么是微前端

引言

微服务架构使我们能够编写可扩展且敏捷的后端系统。编写独立的，独立的服务使我们能够灵活地快速添加新功能或轻松更改现有功能，而不会影响整个系统。可独立部署的服务还使我们能够根据需求扩展服务。

在前端应用程序中使用类似的方法。前端微服务化，将单片式Web应用分解为多个微前端的策略。

什么是微前端架构？

微型前端架构是一种将Web应用程序开发为小型前端应用程序的方法。该应用程序没有编写大型的整体式前端应用程序，而是细分为特定于域的微前端，这些前端是独立的，可以独立开发和部署。

使用微型前端有什么优势？

微前端将微服务的概念和好处带到了前端应用程序中。每个微型前端都是独立的，因此可以更快地交付，因为多个团队可以在应用程序的不同部分上工作而不会互相影响。这也使每个团队可以自由选择所需的不同技术。由于微前端高度解耦，因此它们对应用程序其他部分的影响较小，可以独立进行增强和部署。

微前端架构设计时有什么注意事项？

1. 单一责任

首先要考虑的是如何将一个应用程序拆分为多个较小的应用程序，以便可以独立开发和部署每个应用程序。当团队在不同的微型前端上工作时，我们希望这些应用程序高度分离，以使一个应用程序中的更改不会影响其他应用程序。

这可以通过构建具有单一职责和定义明确的有界上下文的特定于领域的微前端来实现。就像我们的代码一样，我们希望我们的微前端具有高内聚性和低耦合性，即所有相关的代码应该彼此靠近，并且对其他模块的依赖性较小。

如果以在线购物网站为例，我们希望在产品微前端中包含所有与产品相关的UI组件，并在订单微前端中获得所有与订单相关的功能。假设我们有一个用户仪表板屏幕，用户可以在其中查看来自不同域的信息，他们可以查看待处理的订单以及特价产品。建议不要将待处理的订单UI组件作为订单微前端的一部分，而将与产品相关的组件作为产品微前端的一部分，而不是创建一个仪表板微前端。这将使我们能够垂直拆分系统，并具有特定于域的前端和后端服务。

2. 通讯和数据交换的通用接口

为了使微前端作为单个Web应用程序和谐地工作，它们需要一种通用且一致的方式来相互通信。即使他们是高度独立的，他们仍然需要互相交谈。常见方法之一是拥有一个可用作集成层的应用程序。该应用程序可以充当容器来呈现不同的微前端，并促进它们之间的通信。

例如，在我们的在线购物网站中，一旦用户通过购物车微型前端提交了订单，我们就希望将该用户带到他们的订单列表屏幕。由于订单和购物车微型前端之间的耦合程度很高，并且彼此之间并不了解，因此我们可以将容器应用程序用作业务流程层。

在从购物车微型前端接收到订单提交事件后，容器应用程序会将用户导航到订单微型前端。容器应用程序还可用于处理跨领域问题，例如用户会话管理，分析等。

此方法与现有的一体式前端很好地结合使用，其中现有的一体式应用程序可以用作容器，并且任何新功能都可以独立开发为微型前端，并且可以集成到现有的应用程序中。还可以根据需要提取现有功能并将其重写为微前端。

3. 外观一致

尽管我们的用户界面被划分为多个微型前端，但我们仍然希望我们的用户感觉好像他们正在与单个应用程序进行交互。我们希望我们的应用具有一致的外观和风格，以及能够在多个应用之间轻松更改UI的功能。例如，我们应该能够在多个微前端中更改字体或原色。这可以通过共享CSS和资源（例如图像，字体，图标等）来完成。

我们还希望应用程序使用相同的UI组件，例如，如果我们在多个屏幕上都有日期选择器，则我们希望所有日期选择器看起来都一样。这可以通过创建UI组件的公共库来实现，该库可以由微前端共享。使用共享资产和UI组件库将使我们能够轻松进行更改，而不必更新多个微型前端。

在本文中，我们讨论了微前端，它们的好处以及在迁移到微前端架构之前要考虑的事项。为了提供更快的速度，我们希望能够独立构建，测试和部署功能，而这可以通过使用微前端和微服务来实现。实施微型前端可能会面临自身的挑战，将有技术上的障碍需要克服，但好处多于复杂性。