Microfrontends.
Una misma página.
WU Framework compone aplicaciones mediante un ciclo de vida común, independiente del framework. Cada app conserva su tecnología; WU coordina el montaje y la comunicación. WU CLI prepara el proyecto para empezar.
Un clic en React. Un cambio en Vue.
Pulsa Sumar uno. Dos microapps reales comparten el contador mediante WU. Después desmonta Vue y comprueba qué ocurre con el estado.
Conectando dos microapps…
Haz clic para escribir en el store de WU.
0Se actualiza desde el mismo store de WU.
Configuración y aislamiento.
Elige según cómo quieres cargar, montar y conectar las aplicaciones. Estas herramientas también pueden combinarse.
| Decisión | WU Framework | single-spa | Webpack Module Federation |
|---|---|---|---|
| Composición | Ciclo de vida, store, eventos y servicios | Ciclo de vida y orquestación | Carga de módulos remotos y dependencias compartidas |
| Aislamiento de CSS | Shadow DOM gestionado por WU según la configuración | Estrategia de la app; admite Shadow DOM | Estrategia de la app y del renderizador |
| Aislamiento de DOM | Un Shadow Root por app en esta demo; el modo iframe es una opción distinta. | Contenedor de montaje; la app decide si usa Shadow DOM. | La federación comparte módulos; el contenedor DOM lo decide la app. |
| Configuración habitual | WU CLI genera el shell y las apps. Configuras manifests, grants y lifecycle; no necesita ModuleFederationPlugin. | Root config, registro de apps, reglas de activación y lifecycle; eliges el cargador y el build. | Con webpack: ModuleFederationPlugin, exposes/remotes y la política shared. Otros hosts de federación tienen su propia configuración. |
Alcance y fuentes técnicas
Shadow DOM encapsula la estructura y los selectores de CSS. No crea un límite de seguridad contra JavaScript hostil. La configuración descrita no es una puntuación de dificultad ni un benchmark de productividad.
Fuentes técnicas oficiales: webpack / ModuleFederationPlugin · single-spa / CSS · single-spa + Module Federation
Participa directamente en WU.
Explora los repositorios oficiales, comparte un caso reproducible o habla con sus creadores.
Los repositorios de Forgejo requieren iniciar sesión. También puedes reportar un bug o proponer una idea desde Soporte.
13 adapters incluidos. Integración abierta.
También puedes conectar otra tecnología con un lifecycle propio. Crear una integración →
¿Qué quieres construir?
Programa tus pantallas con JavaScript o TypeScript. Conecta capacidades de tu producto con estado, eventos y servicios de WU.
Desarrollar aplicaciones web con WU →Aprende paso a paso
01 / EMPEZAR- 01 / ENTENDERQué es WU
Qué problema resuelve y cuándo te conviene utilizarlo.
- 02 / CREARTu primera microapp
Genera el proyecto y comprueba una app React funcionando.
- 03 / AMPLIARAñadir una segunda app
Incorpora Vue al mismo proyecto y prueba las dos apps.
- 04 / CONSTRUIRPreparar producción
Construye los archivos que publicarás y revísalos en el navegador.
Elige cómo componer tu frontend
Microfrontends y microfronts
Qué son, cuándo convienen y qué decisiones siguen en manos de tu equipo.
Entender la arquitectura →INTEGRACIÓNElige tu integración
Consulta los 13 adapters incluidos y aprende a conectar otra tecnología con su propio ciclo de vida.
Conectar frameworks →COMPARACIÓNWU vs Module Federation
Compara WU, Module Federation y single-spa según lo que necesitas integrar.
Evaluar las opciones →Continúa según lo que necesitas
02 / CONSULTAR Y PRACTICARConsulta una API
Busca mount, store.on o request. Encuentra sus parámetros, resultado, permisos y ejemplos de uso.
FIRMAS · ERRORES · LIMPIEZAESTOY EN LA TERMINALUsa WU CLI
Entiende qué genera cada comando, dónde editar tu app y cómo desarrollar, construir y servir el proyecto.
CREATE · ADD · DEV · BUILD · SERVEQUIERO PROBARLOEjecuta un ejemplo
Elige una receta, lee su código y observa el resultado. Sigue la guía para llevar ese ejemplo a tu aplicación.
ESTADO · EVENTOS · SERVICIOSALGO NO FUNCIONAEncuentra la causa
Parte de un síntoma: una app vacía, un evento rechazado o una petición sin respuesta. Comprueba qué revisar y cómo corregirlo.
SÍNTOMA · COMPROBACIÓN · SOLUCIÓNCómo encajan las aplicaciones
VER ARQUITECTURA ↗Tu primer resultado
03 / EN TU PROYECTOEmpieza con una app.
El CLI genera una página anfitriona Astro y una microapp React. La guía explica qué archivos aparecen y cómo probar su contador. Añadirás Vue en el siguiente paso.
Seguir la guía completa →npm install --global @wu-framework/cli@1.2.0
wu create mi-plataforma --template react --shell astro
cd mi-plataforma
wu install
wu dev --native --port 3000 --no-openEdita Astro, React y Vue en el navegador. El entorno instala las dependencias del ejemplo y arranca la vista previa.
Este starter usa herramientas JavaScript. Para ejecutar el CLI nativo de WU, sigue la guía local. Guía local →¿Quieres estudiar una aplicación completa? Mira cómo está construido este portal. Para elegir npm o CDN, consulta versiones y distribución.