让我们实现一个由React和Angular内置的MFE组成的应用程序
> Photo by Jorge Salvador on Unsplash
在开始编写代码之前，让我们看一下我们正在尝试使用Micro Frontends解决的问题。
过去，我们已经看到了组织代码和我们自己的方式的范式转变。
> Credit: https://micro-frontends.org/
当我们意识到将服务(为UI提供服务)作为一个整体进行管理是不正确的事情时，我们将其拆分为独立的，可管理的微服务。
问题：这已在代码的UI端创建了一个整体。 单个前端团队处理/使用所有微服务的更改会在整个系统中创建一个整体。 现在，可以独立和以更快的速度开发和部署服务，端到端地测试，发布这些服务的能力与开发速度不符。
· UI框架迁移并不容易。
· 就团队或代码库而言的Monolith UI。
· 没有端到端功能特定的团队。
· 不能轻松地将用不同UI框架编写的组件合并在一起。
解决方案：我们将自己和代码组织成具有微型前端的端到端团队。 根据用例，我们有多个端到端团队，负责服务层并为其开发UI。
这使我们可以在构建和发布管道中同时拥有多个UI组件(因此是用例)。 使用这种方法，可以并行部署后端或服务层上的更新，并且用户可以更快地看到更改。 此外，由于微前端将具有自己的错误范围，调试和单独的代码库，因此代码的可维护性和公共组件的共享得以改善。
> Credit: https://martinfowler.com/articles/micro-frontends.html
实施微型前端的方法
我们已经在许多方面做到这一点。 当我们使用外部库中的前端组件时，对我们来说这是一个微前端，因为它具有自己的开发和发布生命周期。
当我们将组件拆分为单独的代码库并以微型前端的形式使用它们时，将它们组合在一起的责任仍然在于容器应用程序。 当我们允许我们的应用程序从各种来源组成多个微前端时，我们还可以利用一个事实，即可以使用不同于生态系统中其他UI框架的UI框架来开发它们。
因此，基于此，我们可以采用两种方式来实现微前端：
· 构建时间集成：这与我上面提到的相同。 我们通常将第三方库中的组件作为捆绑插入npm模块中。 因此，如果我们开始将组件编写为公开发布的npm模块或一些私有存储库并将其插入我们的容器应用程序中，则此类代码组织仍将称为微前端架构。
· 运行时集成：这是当我们一次加载或通过延迟加载按需动态将微型前端注入到容器应用程序中时。 这可以通过多种方式完成：
iframe：在不同的iframe中呈现不同的组件是最简单的解决方案，但它似乎不可扩展。 此外，通过postMessages完成的iframe间通信将需要您实现自己的PubSub机制。
组件组成：通过动态加载组件包将微型前端注入到容器应用程序中。
在此处查看完整的源代码：https://github.com/gauravbehere/micro-frontends
在上面的示例中，我要注入三个从本地主机通过不同端口提供的微前端。 实际上，在生产中，它们将由不同的服务器提供服务。
这些脚本包含的是捆绑到单个文件中的独立UI组件/微型前端。 (我可以在重命名捆绑包方面做得更好)
在上面的示例中，我具有以下微型前端：
· 分页：在React中开发，在端口6001上使用
· 图库：在React中开发，在端口6002上使用
· 页码：在Angular中开发，在端口6003上投放
容器应用程序由上述所有组件组成，是用React编写的，并在端口5000上提供服务。
请在https://github.com/gauravbehere/micro-frontends处克隆存储库，按照说明进行操作并运行演示以查看实际操作。
看看如何从一个React组件上单击下一步，让我们知道另一个React组件和Angular组件。
这些东西如何工作？
我们如何让React和Angular微型前端协同工作？
现在您已经看到了微前端的实际应用，让我们看看这一切如何适应。现在是时候讨论Web组件了。
在上面的示例中，我们将用Angular编写的页码组件导出到标准Web组件中。
这篇文章帮助我做到了：https://medium.com/@suwigyarathore/angular-element-as-a-web-component-6e77a1e1b4a7
Web组件使您可以采用标准的方式来开发与框架无关的组件。 Web组件使用经典的DOM API和属性值的更改(React中的props)相互交互。 调度其他组件将要监听的自定义事件，可以完成消息传递。 容器应用可以修改属性/属性值，以将数据传递到Web组件。
在此处阅读有关Web组件的更多信息：https://www.webcomponents.org/introduction
总结
在我的示例中，我有用React编写的容器应用程序，它也可能是纯Web组件。 以此，我们打开了无尽的可能性，并组合了用不同框架编写的组件。 为了能够在需要时加载微型前端，还可以使用一个加载器来加载MFE捆绑包。 也就是说，这只是实现微前端的另一种方法。 在服务器端进行渲染时，我们也可以进行这种组合。 我很高兴听到您在实施微型前端方面的经验。
(本文翻译自Gaurav Behere的文章《Micro Frontends in Action》，参考：https://medium.com/swlh/micro-frontends-in-action-221d4ed81c35)
转播
