Implementar micro-frontends con Module Federation en Angular y React no es trivial. Estas son las lecciones reales de RUNT 2.0.
¿Por qué micro-frontends?
En RUNT 2.0 teníamos 6 equipos trabajando en el frontend. Un monolito Angular se había vuelto insostenible: merge conflicts constantes, builds de 20 minutos, y un deploy de un módulo obligaba a re-deployar todo. Module Federation nos permitió que cada equipo tuviera su propio repositorio, build y deploy independiente.
Versionado de dependencias compartidas
El problema más común: dos micro-apps con versiones diferentes de Angular o RxJS. Configuramos shared dependencies con singleton: true y strict version ranges. Un pipeline de validación verifica compatibilidad antes de cada deploy.
Routing entre micro-apps
El shell app maneja el routing principal. Cada micro-app registra sus rutas y se carga lazy bajo demanda. Usamos un contrato de rutas versionado para evitar colisiones. La navegación entre micro-apps es transparente para el usuario.
Estado compartido
Esto fue lo más difícil. Optamos por un enfoque event-driven: un bus de eventos customizado que permite a las micro-apps comunicarse sin acoplarse. El estado de autenticación se gestiona en el shell y se propaga via custom events.
Deploy independiente
Cada micro-app se despliega a su propio bucket S3 con CloudFront. El shell app referencia las URLs de los remote entries. Un deploy de SSIS no afecta a FUEC ni a RNA. Esto multiplicó nuestra velocidad de entrega por 4.
