Iframes, web components, paquetes o federation: técnicas de integración comparadas

Hay cuatro formas comunes de poner en una misma página interfaces que pertenecen a equipos distintos. Cada una intercambia aislamiento por rendimiento y experiencia de usuario de manera diferente. La mayoría de las plataformas reales usa más de una.

Iframes

Cada microfrontend es una página completa que se muestra dentro de un <iframe>. El aislamiento lo da el navegador: un documento separado, un scope global de JavaScript separado y CSS separado. El host y el frame se comunican con postMessage.

Fortalezas. El aislamiento lo impone el navegador, y es la única técnica de esta lista que protege frente a código no confiable. El atributo sandbox restringe lo que el frame puede hacer.

Costos. Cada frame carga su propio framework y sus propios recursos. El layout exige trabajo a medida: la altura del frame, los diálogos y overlays que no pueden salir del frame, el foco y la navegación con teclado a través del límite. Los deep links y el botón atrás necesitan un protocolo de mensajes entre host y frame.

Web components (custom elements)

Cada microfrontend expone uno o más custom elements, por ejemplo <billing-root>. El host carga un script y coloca la etiqueta. El contrato es independiente del framework: entran atributos y propiedades, salen eventos del DOM. En Angular, @angular/elements empaqueta un componente como custom element.

Fortalezas. Cualquier framework puede alojar a cualquier otro. El contrato es un estándar del navegador y va a durar más que los frameworks de ambos lados.

Costos. El aislamiento es parcial. Shadow DOM encapsula los estilos cuando se usa. JavaScript sigue compartiendo un solo scope global. Cada elemento puede traer su propia copia del framework, salvo que se organice aparte cómo compartirlo. Los nombres de custom elements son globales y solo se pueden registrar una vez, algo que importa cuando dos versiones del mismo elemento se cargan en una página.

Paquetes en tiempo de build

Cada equipo publica un paquete npm. El host instala los paquetes y construye todo en una sola aplicación.

Fortalezas. Un solo build optimizado, una sola copia del framework, chequeo de tipos completo entre límites y herramientas que todos ya conocen.

Costos. No hay despliegue independiente. Cada cambio necesita subir la versión en el host, un build del host y una publicación del host. Este enfoque es excelente para librerías compartidas y design systems, y débil como técnica principal cuando el objetivo son publicaciones independientes.

Federation en tiempo de ejecución

El host carga módulos de los remotos mientras la página está corriendo, y comparte dependencias con ellos. Webpack Module Federation y Native Federation funcionan así.

Fortalezas. Despliegue independiente con una sola instancia del framework. La experiencia de usuario es la misma de una aplicación única: un router, servicios compartidos, sin costuras visibles.

Costos. El aislamiento es el más bajo entre las opciones en tiempo de ejecución. Todo corre en el mismo contexto de JavaScript, el mismo DOM y el mismo scope de CSS, así que un remoto defectuoso puede afectar a la página. Las versiones de las dependencias compartidas exigen disciplina, como se explica en Dependencias compartidas y versiones.

Comparación

Combinarlas

Estas técnicas se complementan. Una plataforma madura típica se ve así:

• Federation en tiempo de ejecución para las áreas de negocio principales, todas en el mismo framework.
• Un envoltorio de custom element para el área construida en otro framework o en una versión mucho más antigua.
• Un iframe para una herramienta de terceros, o para una aplicación legacy demasiado frágil para cargarla en la página compartida.
• Paquetes en tiempo de build para el design system, las utilidades compartidas y los contratos tipados entre equipos.

Cómo elegir

1. ¿Los equipos necesitan publicar de forma independiente? Si no, usa paquetes en tiempo de build dentro de una sola aplicación. Es la opción más barata y la más rápida.
2. ¿Confías en todo el código de la página? Si alguna parte viene de un tercero o maneja datos que otras partes no deben alcanzar, usa un iframe para ella. El lado de seguridad se cubre en Seguridad en microfrontends.
3. ¿Hay un solo framework, en versiones compatibles? Usa federation en tiempo de ejecución.
4. ¿Hay varios frameworks o versiones incompatibles? Usa web components, o un orquestador como single-spa. Mira single-spa vs Module Federation.

Una regla práctica

Elige la técnica con el menor aislamiento que todavía cumpla tus restricciones de confianza y de frameworks. El aislamiento siempre cuesta rendimiento y experiencia de usuario.

Más en esta sección

• El host de microfrontends: de qué es responsable y qué no debe hacer
• Rutas entre microfrontends: dueños de rutas, deep links y contrato de navegación
• Cómo compartir login y sesión entre microfrontends
• Cómo se comunican los microfrontends y qué evitar