Consejos de arquitectura de micro frontend

Tenemos varias aplicaciones web que deseamos presentar en una sola aplicación de página. Estamos buscando una arquitectura / marco de micro frontend para usar. Tal como lo vemos, estas son nuestras opciones de implementación:

Usando el marco de código abierto de spa único:https://github.com/CanopyTax/single-spaUsando Iframes (Iframes amigables) la aplicación de alojamiento (el shell) y cargando cada aplicación de acuerdo con la url actual.Escribiendo nuestro propio marco Javascript¿Otro?

El estado actual es una aplicación monolith FE que consume la otra aplicación secundaria como paquetes internos de terceros. Este enfoque no es escalable para nosotros, porque la aplicación de alojamiento está creando todos los productos juntos, y nada está realmente separado.

Nuestros requisitos son los requisitos habituales para micro-frontend: 1. Desarrollo independiente: cada equipo puede elegir sus propios marcos y crear sus productos independientemente de los otros productos.

Implementación independiente: cada aplicación se puede actualizar en producción sin tiempo de inactividad y sin interferir con las otras aplicaciones.

Componentes compartidos: estamos utilizando Angular4 en nuestras aplicaciones, y tenemos una biblioteca patentada de terceros (componentes y lógica compartidos) que ya hemos escrito y que debería compartirse entre todos los productos para una apariencia similar.

Nos gustaría tener la capacidad de actualizar el marco de trabajo de cada aplicación (Angular, RXjs, Typescript, etc. y también para nuestra biblioteca de componentes patentada) sin preocuparnos por las otras aplicaciones.

Intentamos usar el marco de un solo spa, pero tenemos algunos problemas y actualmente estamos pensando en nosotros mismos si este es el enfoque correcto para nosotros, o deberíamos intentar un enfoque diferente.

Los problemas que tenemos al usar el spa único son: 1. La carga de activos es problemática. (Debemos tener los archivos de activos en la carpeta raíz de la aplicación de alojamiento, y sufrimos conflictos de activos al cambiar a otra aplicación). 2. Todavía no sabemos cómo manejar el estilo global para todas las aplicaciones (utilizamos sass para el estilo y se debe cumplir con los estilos locales para cada aplicación) 3. No es posible actualizar el marco angular (o todos los demás marcos) para una aplicación, es todo o nada (ya que tenemos una instancia de angular). 4. Tenemos que implementar un paquete diferente para el desarrollo al otro lado de la aplicación de alojamiento (el shell).

Cuando pensamos en la solución Iframe (usando Iframe amigable), visualizamos una separación completa entre todas las aplicaciones para niños y tendemos a creer que este es un enfoque más adecuado para nosotros.

¿Hay alguna dificultad para usar Iframes?

Gracias Daniel

Respuestas a la pregunta(5)

Su respuesta a la pregunta