微前端如何分解UI？答案

【问题标题】：How to decompose UI in micro front ends?微前端如何分解UI？
【发布时间】：2019-08-24 14:55:58
【问题描述】：

这是Adding Data from UI to different microservices 的延续。这个问题是关于将 BE 拆分为微服务的。现在，我也在寻找一种将 UI 分解为微前端的方法。

假设您有一个用户注册表单，您在其中填写表单：名字、姓氏、年龄、地址、首选通信方式：短信、电子邮件（单选按钮）。您有 2 个微服务：

用户管理服务通讯服务当用户注册时，我们应该在 2 个服务中创建 2 个聚合：UserManagementContext 中的 User 和 Communication 中的 UserCommunicationSettings。所以我觉得我应该有来自 2 个微服务的 2 个不同的 UI 组件，但是如何将它们放在 UI 上的 1 种形式中呢？当用户点击提交按钮时会发生什么，这些组件将如何将数据发送到他们的服务？

【问题讨论】：

标签： c# user-interface domain-driven-design microservices micro-frontend

【解决方案1】：

所以我觉得我应该有来自 2 个微服务的 2 个不同的 UI 组件，但是如何将它们以一种形式放置在 UI 上？当用户点击提交按钮时会发生什么，这些组件将如何将数据发送到他们的服务？

微服务是应用程序，而 UI 是应用程序。

如果您的前端需要所有微服务工作，它是一个应用程序，您应该这样对待它，使用一个 UI，这非常好。

如果某些功能是完全可选的（即单独出售），您可以将 UI 拆分为模块并单独发布模块。

或者换句话说。如果一个（前端）应用程序需要多个服务来工作并带来她的功能，则将其视为一个应用程序和一个 UI。您将其拆分为不同的视图，但这仍然不能使其成为不同的“微前端”。

拥有 15 个独立的应用程序作为前端解决不了多少问题。

【讨论】：

问题是：1) 如何将 2 个不同的组件放在一个
中。 2）当用户点击提交按钮时会发生什么，这些组件如何将数据发送到他们的服务？
您需要考虑如何使用您的 UI 应用程序（以及业务需求是什么）。如果你的两个特性是不同的并且总是作为一个使用，它的一个 UI，所以你只需要一个视图。如果它有两个不同的功能（可以相互独立使用），您可以创建两个视图。 1 个微服务 = 1 个 UI 元素/组件没有规则或准则。微服务是关于关注点分离和可扩展性（一个微服务可能需要运行 40 个实例，而只有 2 个，因为它确实获得更多请求或执行更多计算工作）
不同的 UI 框架让您以不同的方式处理组件和可组合的 UI。在 Angular 中，每个功能都可能有两个组件，您可以将它们嵌入到自己的组件中，并在其中放置按钮，然后读取子组件的值（或调用操作）。每个应用程序实现者都决定他如何处理这个功能。
如果你想强制这两个操作总是作为一个单独的操作完成，做一个网关 api 端点，它接受两者的输入数据并在后端执行操作并将结果传递给UI，但我们对您的要求一无所知。显然，从您上面的问题来看，用户注册和首选通信似乎都属于 1 个有界上下文（这当然也意味着只有一个微服务），因为您可能无法单独使用 UserCommunicationSettings。
微前端背后的想法是将网站或 Web 应用程序视为由独立团队拥有的功能的组合。每个团队都有不同的业务领域或任务，它关心和专攻。一个团队是跨职能的，从数据库到用户界面，端到端地开发其功能。它并不总是关于能够出售应用程序的一部分，或者没有它的一部分应用程序是否无法工作。主要动力是团队内部语言无处不在，模块化分离带来快速发展。