Arquitectura de Micro-frontends con Module Federation de Webpack

Este curso se sitúa en un producto concreto: un panel interno de operaciones que reúne ventas, inventario, soporte y facturación, mantenidos por equipos distintos. El problema inicial no es dividir por moda, sino permitir que un equipo publique cambios en inventario sin reconstruir ni detener el panel completo. Module Federation de Webpack ofrece una composición en tiempo de ejecución, pero introduce decisiones sobre contratos, dependencias, disponibilidad, observabilidad y reversión.

La primera etapa establece el vocabulario y el mecanismo. Configurar Webpack 5 implica distinguir host y remoto, declarar módulos expuestos, resolver la dirección de remoteEntry y decidir qué dependencias se comparten. Después se construye un micro-frontend mínimo para observar el recorrido completo: compilación del remoto, carga desde el host, tratamiento de errores y compatibilidad entre React y React DOM. La evaluación de conceptos obliga a clasificar responsabilidades, no solo a repetir definiciones.

La segunda etapa aborda la coordinación. Un evento como inventario actualizado puede viajar entre aplicaciones sin revelar la implementación interna del productor. Cuando el dato exige una única fuente de verdad, Redux puede centralizar acciones y reducers, mientras que un sistema de notificaciones muestra cómo separar eventos de presentación y estado. Las pruebas de sincronización comparan eventos DOM, store compartido y estado local, incluyendo desmontaje de listeners, orden temporal y comportamiento al recargar. La decisión correcta depende del alcance y la duración del dato.

La tercera etapa lleva la federación a producción. El pipeline debe construir cada remoto, ejecutar comprobaciones de contrato y publicar artefactos identificables. El lazy loading reduce el trabajo inicial, pero requiere fallback, frontera de error y una estrategia para que una URL inaccesible no bloquee el shell. El despliegue en la nube se analiza como una cadena de artefactos, cabeceras, caché y rutas públicas. Versionado y rollback completan el circuito: una versión nueva solo es segura si existe una ruta verificable hacia la anterior.

La etapa integradora convierte esas decisiones en un dashboard modular. Primero se delimitan dominios y propietarios; luego se exponen componentes con contratos pequeños y se define una comunicación explícita. El dashboard se integra de forma incremental, cargando cada sección cuando corresponde. Finalmente se mide el coste de los remotos, la latencia de recursos y el comportamiento ante fallos. No basta con que la pantalla aparezca: hay que demostrar qué ocurre cuando falta un remoto, cambia un contrato o aumenta la carga.

El trabajo final será un dashboard local de operaciones con un host y tres remotos: métricas, incidencias y preferencias. Cada remoto tendrá una responsabilidad acotada, una versión identificable y al menos un contrato de comunicación. El entregable debe incluir configuración de federación, carga diferida, estado o eventos justificados, una secuencia de publicación y un procedimiento de rollback. La comprobación se realizará con una matriz de casos: carga normal, remoto ausente, evento duplicado, dependencia incompatible, recarga del navegador y degradación de red. Para cada caso se anotará el resultado observable, la causa y la decisión aplicada. Así se evalúa arquitectura y operación, no únicamente código que funciona en el escenario ideal.