微前端架构建议

问题描述

我们希望在一个单页应用程序下展示多个 Web 应用程序.我们正在寻找要使用的微前端架构/框架.正如我们所见，以下是我们的实施选项:

We have several web applications that we wish to present under one single page application.We are looking for a micro-frontend architecture/framework to use.As we see it, these are our options for implementation:

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

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

The current state is a monolith FE application that consumes the other child-application as internal 3rd party packages.This approach is not scalable for us, because the hosting application is building all the products together, and nothing is really separated.

我们的要求是微前端通常的要求:1、自主开发——每个团队都可以选择自己的框架并构建自己的产品，而无需考虑其他产品.

Our requirements are the usual requirements for micro-frontend:1. Independent development -Each team can choose their own frameworks and build their products regardless the other products.

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

1. Independent deployment -Each application can be upgraded in production without downtime and without interfering the other applications.

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

Shared components -We're using Angular4 in our applications, and we have a proprietary 3rd party library (shared components and logic) that we've already wrote that should be shared among all of the products for similar look and feel.

我们希望能够在不关心其他应用程序的情况下升级每个应用程序的框架(Angular、RXjs、Typescript 等以及我们的专有组件库).

We would like to have the ability to upgrade each application's framework (Angular, RXjs, Typescript etc and also for our proprietary component library) without caring about the other applications.

我们尝试使用 single-spa 框架，但我们遇到了一些问题，我们目前正在思考这是否适合我们，或者我们应该尝试不同的方法.

We tried to use the single-spa framework but we have some issues and we are currently found our-self thinking if this is the right approach for us, or should we try a different approach.

我们在使用 single-spa 时遇到的问题是:1.资产加载有问题.(我们必须在托管应用程序的根文件夹中拥有资产文件，并且在切换到另一个应用程序时会遇到资产冲突).2.我们还不知道如何处理所有应用程序的全局样式(我们使用sass进行样式处理，必须与每个应用程序的本地样式一起遵守)3.升级angular框架(或所有其他框架)对于一个应用程序是不可能的，要么全有要么全无(因为我们有一个angular实例).4. 我们必须在托管应用程序(外壳)的另一端实现不同的捆绑开发.

The issues we have using the single-spa are:1. Assets loading is problematic. (We must have the assets files on the root folder of the hosting application, and we suffer from assets conflicts when switching to another application).2. We still don't know how to handle global styling for all applications (We use sass for styling and it must be complied together with the local styles for each application)3. Upgrade angular framework (or all other frameworks) is not possible for one application, it's all or nothing (since we have one instance of angular).4. We have to implement a different bundling for development other side the hosting application (the shell).

当我们考虑 Iframe(使用友好的 Iframe)解决方案时，我们想象了所有子应用程序之间的完全分离，并倾向于认为这是更适合我们的方法.

When we think about the Iframe (using friendly Iframe) solution, we visualize a full separation between all child-application, and tend to believe this is a more suitable approach for us.

使用 Iframe 有什么陷阱吗?

Are there any pitfalls for using Iframes?

谢谢，丹尼尔

推荐答案

我想将我的 2¢ 添加到前端微服务可能的架构解决方案的主题中:

I would like to add my 2¢ to the topic of possible architectural solutions for frontend's microservices:

1. OpenTable 使用的 OpenComponents – https://github.com/opentable/oc
2. Mosaic by Zalando – https://www.mosaic9.org/

希望你觉得它们有用.

这篇关于微前端架构建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！