微前端架构建议

Question

我们有几个Web应用程序,我们希望在一个单页面应用程序下呈现.我们正在寻找一个可以使用的微前端架构/框架.正如我们所看到的,这些是我们实施的选择:

1. 使用单一spa开源框架:https://github.com/CanopyTax/single-spa
2. 使用Iframes(友好的Iframes)托管应用程序(shell)并根据当前url加载每个应用程序.
3. 编写我们自己的Javascript框架
4. 其他？

当前状态是monolith FE应用程序,它将其他子应用程序作为内部第三方程序包使用.这种方法对我们来说是不可扩展的,因为托管应用程序正在一起构建所有产品,并没有真正分离.

我们的要求是微前端的通常要求:1.独立开发 - 每个团队都可以选择自己的框架并构建他们的产品,而不管其他产品.

2. 独立部署 - 每个应用程序都可以在生产中升级,无需停机,也不会干扰其他应用程序.

3. 共享组件 - 我们在我们的应用程序中使用Angular4,并且我们已经编写了一个专有的第三方库(共享组件和逻辑),应该在所有产品之间共享,以获得相似的外观.

4. 我们希望能够升级每个应用程序的框架(Angular,RXjs,Typescript等以及我们的专有组件库),而无需关心其他应用程序.

我们尝试使用单一spa框架,但我们遇到了一些问题,如果这对我们来说是正确的方法,或者我们应该尝试不同的方法,我们现在可以自己思考.

我们使用单一水疗中心的问题是:1.资产加载是有问题的.(我们必须将资产文件放在托管应用程序的根文件夹中,并且切换到另一个应用程序时会遇到资产冲突).2.我们仍然不知道如何处理所有应用程序的全局样式(我们使用sass进行样式化,并且必须与每个应用程序的本地样式一起使用)3.升级角度框架(或所有其他框架)是不可能的对于一个应用程序,它是全部或全部(因为我们有一个角度的实例).4.我们必须在托管应用程序(shell)的另一侧实现不同的捆绑开发.

当我们考虑Iframe(使用友好的Iframe)解决方案时,我们可视化所有子应用程序之间的完全分离,并倾向于认为这对我们来说是更合适的方法.

使用Iframe有任何陷阱吗？

谢谢,丹尼尔

Answer 1

我们目前正在使用单 Spa 框架进行完全相同的工作。我们得出了与您相同的结论。我们面临的一个主要问题是子应用程序的翻译，因为至少我们无法找到一种将它们捆绑到子应用程序的方法。其他资产（例如样式）也是一个问题。

我的建议是等待角度元素，因为该框架并非设计用于微前端风格。