Curso de Arquitectura de Microfrontends en React para empresas

Separación por verticales funcionales

Fractura según equipos, flujo o contexto

Diseño de bounded contexts visuales

Identificación de puntos de acoplamiento

Routing distribuido o centralizado

Jerarquía de responsabilidad entre shells y remotes

Autonomía vs consistencia visual

Catálogo de UI compartido vs duplicación controlada

Control de estilo y naming para evitar conflictos

Práctica: diseño modular de una app e-commerce multiequipo

¿Qué es un Shell y qué debe contener?

Renderizado principal y layout general

Separación del Router vs Microfrontends

Tipos de integración: remota, embed, iframe

Base de navegación y breadcrumbs

Control de login y autenticación en Shell

Paso de props y eventos a remotes

Integración de librerías compartidas globales

Gestión del estado general

Práctica: creación de Shell base con React Router y layout compartido

Introducción a Module Federation

`ModuleFederationPlugin`: configuración de host y remotes

Tipos de exposición: componentes, hooks, utilidades

`shared` entre microfrontends: React, ReactDOM, etc.

Carga dinámica de código (`loadRemoteModule`)

Aislamiento de dependencias por versión

Comunicación entre MFEs mediante props

Sincronización de rutas y estados

Resolución de errores comunes de integración

Práctica: integración de 3 microfrontends con Webpack MF

Integración mediante Web Components

Cómo usar Shadow DOM para aislar estilos

Iframes controlados con eventos custom

Carga de microapps desde CDN

Inclusión de microapps en SSR o Next.js

HTML `<script type="module">` para import remoto

Limitaciones de comunicación entre sandboxes

Registro de componentes globales

Estrategias de fallback y desconexión

Práctica: integración de un microfrontend por Web Component

Tipos de comunicación: global, directa, eventos

EventBus, Pub/Sub, CustomEvents

Contexto compartido o descentralizado

Librerías: RxJS, EventEmitter3, mitt

Comunicación unidireccional vs bidireccional

Cross-window messaging (`postMessage`)

Sincronización de rutas entre shells y MFEs

Autenticación y paso de tokens

Gestión de errores y estados compartidos

Práctica: sistema de eventos para interacción entre microfrontends

¿Debemos compartir estado global?

Context API, Redux, Zustand entre microfrontends

State lifting o replicación deliberada

Centralización de estado en el Shell

Persistencia con localStorage o sessionStorage

BroadcastChannel API

Compartición de contexto autenticado

Compatibilidad entre versiones de librerías de estado

Renderizado reactivo vs polling

Práctica: compartición de contexto de usuario entre MFEs

Enrutamiento controlado desde el Shell

React Router DOM y sincronización de URLs

`MemoryRouter` vs `BrowserRouter` por microfrontend

Routes hijack y fallback visual

Reenvío y sincronización de navegación

Control de scroll y anchor inter-MFE

Hash routing como solución técnica

Historias compartidas por servicio central

Actualización del título y metadatos

Práctica: sincronización de rutas entre 2 microfrontends con React Router

Suspense + lazy para carga bajo demanda

Loading states inteligentes

Evitar carga duplicada de librerías

Errores en la carga remota: control de fallback

Gestión del retry automático

Precarga anticipada de microfrontends críticos

División de bundles y chunks por dominio

Control de prioridades y estrategias

Análisis de bundle size individual

Práctica: carga dinámica segura con fallback por error 404

¿Cuándo elegir monorepo?

Herramientas: Nx, Turborepo, Lerna

Monorepos con PNPM workspaces o Yarn

Repos separados con Git submodules o GitHub Packages

Problemas de CI/CD por acoplamiento

Versionado independiente con semver

Reutilización de código entre módulos

Scope de dependencias por microapp

Limitación de acceso a rutas compartidas

Práctica: configuración de monorepo híbrido para microfrontends

Autenticación centralizada desde Shell

JWT, OAuth2 y almacenamiento local

Renovación de tokens y expiración

Seguridad en comunicación entre apps

Login unificado y logout sincronizado

Control de acceso por microfrontend

Protección contra XSS entre dominios

CORS y headers de seguridad

Seguridad con subdominios

Práctica: login centralizado con paso de JWT entre MFEs

Testing unitario por microfrontend

Testing E2E con Cypress/Playwright

Mocking de contexto y eventos globales

Test de integración del Shell

Visual Regression Testing entre versiones

Validación de rutas, errores y estado

Pruebas en dispositivos y navegadores

Integración de testing en CI/CD

Estrategias de rollback

Práctica: test de integración entre Shell y 2 MFEs

Logging centralizado por microfrontend

Correlación de errores y trazas

Log structured y compatibilidad con Sentry/LogRocket

Recolección de métricas con Web Vitals

Trazas distribuidas entre MFEs

Instrumentación con OpenTelemetry

Dashboards por microfrontend

Alertas por error rate o tiempo de carga

Visualización en Grafana/Datadog

Práctica: trazabilidad de errores entre Shell y microfrontend externo

Pipelines independientes por microfrontend

Despliegue por entorno (QA, UAT, prod)

CDN, S3, Vercel o Azure Static Web Apps

Versionado con cache busting

Registro de microfrontends en tiempo real

Rollback automático por error

Sincronización de cambios en rutas

Monitoreo post-deploy

Coordinación con equipos DevOps

Práctica: despliegue de microfrontend aislado en entorno QA

Diseño de arquitectura basada en dominio

Creación de Shell + layout común

Implementación de MFE de catálogo

Implementación de MFE de usuario

Comunicación y navegación entre MFEs

Autenticación unificada en el Shell

Carga dinámica + fallback inteligente

Observabilidad distribuida

Despliegue en Vercel o local con Docker

Documentación técnica + flujo CI/CD