想象一个网站,客户可以在其中订购外卖食品。从表面上看,这是一个相当简单的概念,但如果你想做得好,还有惊人的细节:
应该有一个登陆页面,客户可以在其中浏览和搜索餐馆。餐厅应该可以通过任意数量的属性进行搜索和过滤,包括价格、美食或客户之前订购的东西
每家餐厅都需要自己的页面来显示其菜单项,并允许客户选择他们想吃的东西,包括折扣、餐饮优惠和特殊要求
客户应该有一个个人资料页面,他们可以在其中查看他们的订单历史记录、跟踪交付和自定义他们的付款选项
每个页面都有足够的复杂性,我们可以轻松地证明每个页面都有一个专门的团队,并且每个团队都应该能够独立于所有其他团队在他们的页面上工作。他们应该能够开发、测试、部署和维护他们的代码,而不必担心与其他团队发生冲突或协调。但是,我们的客户仍然应该看到一个无缝的网站。
在本文的其余部分,我们将在需要示例代码或场景的任何地方使用此示例应用程序。
Integrationapproaches
鉴于上面相当松散的定义,有许多方法可以合理地称为微前端。在本节中,我们将展示一些示例并讨论它们的权衡。所有这些方法都有一个相当自然的架构——通常应用程序中的每个页面都有一个微前端,并且有一个容器应用程序,它:
呈现常见的页面元素,例如页眉和页脚
解决跨领域问题,如身份验证和导航
将各种微前端放在页面上,并告诉每个微前端何时何地渲染自己
Server-sidetemplate