Qué es WU

Consulta las versiones, cambios y requisitos en Framework 4.0 y CLI 1.2.

WU permite reunir aplicaciones web independientes en una misma página. Cada aplicación conserva su interfaz y su framework; WU coordina cuándo aparece, cuándo se retira y cómo se comunica con las demás.

El paquete incluye adapters para React, Vue, Angular, Svelte, Preact, Solid, Lit, Vanilla, Alpine, Qwik, Stencil, HTMX y Stimulus. Consulta sus contratos en la referencia de adapters.

Para otra tecnología, registra mount y unmount con wu.define, o construye un adapter con createWuAdapter. El contrato común permite conectar aplicaciones con el mismo framework o con frameworks diferentes.

El problema que resuelve

Imagina una tienda con un catálogo en React y un carrito en Vue. Sus equipos necesitan cambiar y publicar cada parte por separado, pero el usuario espera una sola experiencia: elegir un producto en el catálogo y verlo en el carrito.

WU carga ambas aplicaciones, entrega a cada una un contenedor y ofrece canales para compartir datos. El catálogo puede avisar de una selección sin importar componentes ni código del carrito. Las dos aplicaciones también podrían usar React: la independencia entre aplicaciones es lo esencial; mezclar frameworks es una posibilidad.

Tres piezas para entenderlo

1. La app aporta una parte de la interfaz

El catálogo y el carrito son microapps, también llamadas microfrontends o MFE. Cada una registra cómo dibujarse en un contenedor y cómo retirar los recursos que creó al salir. En WU esas operaciones se llaman mount y unmount: su ciclo de vida.

Puedes escribirlas con JavaScript o utilizar un adapter, que conecta el ciclo de vida de React, Vue u otro framework con WU. Los adapters evitan repetir esa conexión en cada aplicación.

2. El shell decide dónde aparece cada app

El shell o host es la página que las reúne. Define sus URLs, reserva los espacios para mostrarlas y coordina navegación, permisos y errores visibles. Puede construirse con Astro, otro framework o HTML y JavaScript.

En la tienda, el shell puede reservar una zona para el catálogo y otra para el carrito. No necesita conocer los componentes internos de cada uno.

3. El runtime las conecta durante la ejecución

El runtime es el paquete JavaScript wu-framework ejecutándose en la página. Carga y monta las apps y proporciona eventos, estado compartido y llamadas con respuesta.

Por ejemplo, el catálogo puede emitir un evento al seleccionar un producto; el carrito lo recibe y actualiza su interfaz. El shell concede los permisos que necesita cada app. Aprende esos mecanismos después del primer montaje, en comunicación entre aplicaciones.

WU CLI prepara el proyecto. El comando wu trabaja en la terminal: genera archivos, prepara dependencias, inicia el desarrollo y reúne los archivos de producción. El runtime trabaja en la aplicación que abre el usuario. Puedes usar WU sin la CLI si preparas esos archivos con tus propias herramientas. Conoce el flujo de la CLI.

Cuándo tiene sentido

• Distintos equipos necesitan mantener y publicar partes de una misma experiencia por separado.
• Quieres incorporar una aplicación nueva junto a otra existente durante una migración.
• Necesitas componer interfaces con límites de estilos y comunicación explícita entre aplicaciones.

Si una sola aplicación con su router y sus componentes cubre tus necesidades, dividirla en microapps añade trabajo de configuración, montaje y coordinación. No necesitas varios frameworks para utilizar WU ni necesitas WU por el solo hecho de usar varios componentes.

WU tampoco es una frontera para ejecutar código hostil. Shadow DOM encapsula DOM y estilos, pero no impide por sí mismo el acceso al contexto JavaScript de la página. Consulta aislamiento y seguridad y permisos antes de elegir cómo cargar código de terceros.

Empieza con una app

Sigue Tu primera app para generar un shell con una microapp y comprobar el resultado en el navegador. Después puedes añadir otra app y preparar producción.

El recorrido utiliza Astro y React como ejemplo. El shell y los frameworks que elijas pueden ser otros.

Qué sucede al montar una app

El shell declara la URL de la app. En esa URL, un manifest (wu.json) describe el archivo JavaScript que debe cargar WU: su entry. Ese archivo registra el ciclo de vida; el shell pide el montaje y la interfaz aparece.

import { wu } from 'wu-framework';

await wu.init({
  apps: [{ name: 'hello', url: '/apps/hello' }],
  sandbox: 'module',
});

await wu.mount('hello', '#hello-slot');

{
  "name": "hello",
  "entry": "assets/hello.js",
  "styleMode": "own-only",
  "wu": { "permissions": [] }
}

import { wu } from 'wu-framework';

wu.define('hello', {
  mount(container) {
    const heading = document.createElement('h2');
    heading.textContent = 'Hola desde WU';
    container.append(heading);
  },
  unmount(container) {
    container.replaceChildren();
  },
});

Si necesitas profundizar

Consulta supervisión, recuperación y replay para superviseApp, createReplaySession y los métodos scoped reportError, now y random.