Conceptos y compromisos de los micro-frontends

Los micro-frontends extienden los microservicios a la capa de interfaz de usuario. Una sola aplicación web se divide en partes del frontend que distintos equipos gestionan, desarrollan y despliegan de forma independiente.

Hay tres estrategias principales de integración: en tiempo de compilación (paquetes npm), del lado del servidor (composición en el edge) y en tiempo de ejecución (Module Federation, iframes y Web Components).

Publique los componentes compartidos como paquetes npm. Es sencillo, pero cualquier cambio requiere publicar una nueva versión y volver a desplegar todos los consumidores; por tanto, no permite un despliegue verdaderamente independiente.

Module Federation de Webpack 5 permite que una aplicación (host) cargue componentes de otra aplicación (remote) en tiempo de ejecución, lo que permite un despliegue verdaderamente independiente.

Inserte los micro-frontends en iframes para obtener el máximo aislamiento. Ventajas: cero conflictos de CSS o JavaScript. Desventajas: mala experiencia de usuario (desplazamiento, foco y dimensiones), dificultad para compartir el estado y poca compatibilidad con SEO.

Envuelva cada micro-frontend en un elemento personalizado. Funciona con cualquier framework y proporciona aislamiento nativo, pero no incluye características específicas de React, como compartir el contexto.

Despliegue independiente (desplegar la interfaz de un equipo sin afectar a los demás), autonomía de los equipos (elegir su propia tecnología y dependencias) y escalabilidad (los equipos trabajan en paralelo sin conflictos de código).

Complejidad operativa (más repositorios, canalizaciones de CI y despliegues), duplicación de bundles (React se carga varias veces si no se comparte), sobrecarga de rendimiento y mayor dificultad para depurar entre límites.

Los micro-frontends son especialmente útiles cuando varios equipos grandes trabajan en el mismo producto, se necesitan diferentes tecnologías para distintas secciones o es necesario desplegar las secciones de forma completamente independiente.

Evítelos en equipos pequeños (la sobrecarga supera las ventajas), aplicaciones sencillas o situaciones en las que tenga el control total de todo el frontend; los monorepos con Nx/Turborepo suelen ser suficientes.

Independientemente de la estrategia de integración, un sistema de diseño compartido (publicado como paquete o expuesto mediante Module Federation) garantiza la coherencia visual entre los micro-frontends.

Los micro-frontends descomponen la interfaz de usuario para proporcionar autonomía a los equipos y permitir despliegues independientes. Las opciones de integración van desde los paquetes npm (sencillos, pero no independientes) hasta Module Federation (en tiempo de ejecución y verdaderamente independiente). Sopese los costes operativos: los micro-frontends son adecuados para productos grandes con varios equipos, pero añaden complejidad a los proyectos pequeños.