Microfrontends con React, Angular y WU
Cómo integrar React y Angular con WU Framework: shell, adapters, comunicación y migración gradual. Encuentra también ejemplos React/Vue y bindings para Svelte y Lit.
Esta guía desarrolla el caso de React y Angular como ejemplo de integración. Para trabajar con Svelte, Stimulus o cualquiera de las demás tecnologías incluidas, consulta el catálogo completo de adapters. WU utiliza un contrato de ciclo de vida independiente del framework.
Conservar cada framework y compartir un contrato
Una página puede alojar una capacidad React y otra Angular sin convertir sus componentes al mismo renderer. Cada app conserva su compilación; el shell entrega un contenedor y WU coordina su ciclo de vida. El mismo planteamiento sirve para una migración gradual: sustituye una capacidad cada vez y conserva las rutas de acceso del producto.
Esto requiere adaptar las entradas de las aplicaciones. Una SPA que toma el control de todo el documento no queda integrada por añadir su URL al catálogo. Debe montar dentro del contenedor recibido y liberar sus recursos al desmontarse.
React: registrar el renderer que usa tu aplicación
El adapter React recibe el componente raíz y las instancias de React y ReactDOM. Usa el mismo runtime que utiliza tu build; la guía de integraciones muestra el registro con runtime explícito y el montaje desde Astro.
La ruta completa para empezar es crear una app React, añadir Vue y compartir un contador. El último ejemplo incluye fuentes y ZIP; permite comprobar cambios desde ambos renderers y limpieza al desmontar.
Angular: elegir el adapter correcto
WU incluye entradas diferentes para aplicaciones basadas en módulos, componentes standalone y Angular Elements. Elige según la arquitectura de tu aplicación, no por el nombre del contenedor.
| Aplicación Angular | API de WU | Qué preparar |
|---|---|---|
| Basada en NgModule | register |
Módulo raíz, plataforma y selector raíz |
| Componente standalone | registerStandalone |
Componente, configuración y funciones de creación de Angular |
| Angular Elements | registerElement |
Dependencia Angular Elements y nombre del custom element |
Consulta las firmas y opciones en la referencia de adapters. El CLI ofrece una plantilla Angular con configuración de compilación y registro standalone: revisa sus archivos en plantillas del CLI antes de trasladar una aplicación existente.
Framework 4 incluye actualización de inputs standalone, montaje zoneless y soporte para aplicaciones con Zone.js. El keep-alive pausa y reanuda el detector de cambios del componente. Revisa la matriz de adapters para las opciones y versiones verificadas.
Comunicación entre React y Angular
Mantén el estado visual dentro de cada renderer. Comparte datos mediante el store, hechos mediante eventos y operaciones mediante contratos/RPC. En Framework 4, los bindings dentro de una microapp usan su facade e identidad; declara las solicitudes y grants necesarios. Fuera de un montaje WU, los bindings standalone pueden usar el runtime global.
Los ejemplos contador compartido y servicio de suma por RPC enseñan los contratos usando React y Vue. Al trasladarlos a Angular conserva los contratos y adapta la suscripción, la actualización de la vista y la limpieza a su ciclo de vida.
Vue, Svelte, Lit y otros renderers
El paquete también publica adapters para Vue, Svelte, Preact, Solid, Lit, Vanilla, Alpine, Qwik, Stencil, HTMX y Stimulus. Astro y Next tienen integraciones de shell. El catálogo de adapters describe sus diferencias; las plantillas distinguen el soporte de generación del pipeline completo de cada framework.
Antes de migrar otra capacidad, comprueba montaje, navegación, estilos, comunicación y desmontaje con las versiones de tu proyecto. Usa producción para revisar los assets publicados y diagnóstico si una app queda vacía.