Desarrollo frontend: qué puedes crear con WU

Tu código, tus interfaces

Con WU puedes desarrollar el frontend de una aplicación web como un conjunto de capacidades que trabajan juntas. Escribes componentes, formularios, tablas y pantallas con JavaScript o TypeScript y el framework de cada app. WU conecta esas aplicaciones; WU CLI genera el proyecto y prepara el flujo de desarrollo.

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.

Por ejemplo, puedes mantener un panel en React y añadir una sección Angular sin reescribir el primero. También puedes usar React en todas las apps. La separación útil está en las capacidades del producto, como informes o administración, y no en tener un framework distinto por pantalla.

Los casos siguientes describen cómo organizar un producto. Los enlaces llevan a guías y ejemplos ejecutables que puedes adaptar; el CLI genera un punto de partida, no una tienda o un SaaS terminado.

Dashboards y paneles SaaS

En un dashboard, una app puede mostrar informes y otra gestionar una selección de cliente o de periodo. El shell mantiene la navegación y el espacio de cada app. Guarda un filtro compartido en el store de WU y deja que cada vista observe los cambios; conserva dentro de cada renderer el estado de sus tablas y formularios.

Empieza con el contador compartido React y Vue: ya muestra cómo leer un dato, actualizarlo desde dos apps y cancelar suscripciones. Sustituye el contador por el filtro de tu producto y conecta cada vista con tu API. Comprueba que desmontar y volver a montar una vista conserva el dato compartido esperado.

Tiendas online y catálogos

Separa catálogo y carrito si necesitan evolucionar de forma independiente. El catálogo comunica la selección mediante datos o eventos; el carrito conserva su representación. Define identificadores de producto y cantidades como contrato público, sin pasar componentes del catálogo al carrito.

La guía de comunicación entre aplicaciones ayuda a elegir entre eventos, estado y llamadas con respuesta. La arquitectura del shell explica quién controla las rutas. El backend de tu tienda debe validar precios, stock y pedidos; el estado compartido del navegador no es la autoridad de esas operaciones.

Herramientas internas y portales de administración

Un portal interno puede reunir inventario, informes y soporte en apps mantenidas por equipos diferentes. Usa contratos cuando una app necesita pedir una operación y recibir su resultado. Acuerda los datos de entrada, los errores y la compatibilidad de versiones antes de conectar proveedor y consumidor.

El servicio de suma entre apps enseña petición, respuesta, validación, timeout y recuperación del proveedor. Puedes trasladar ese patrón a operaciones de tu producto. La autorización de usuarios y las validaciones de negocio corresponden a tu aplicación y su backend; los grants de WU regulan el acceso a su facade.

Migrar una aplicación por etapas

Elige una capacidad con límites claros, adapta su entrada al ciclo de vida de WU y conserva las rutas que utiliza el usuario. Prueba montaje y desmontaje antes de trasladar otra parte. Si combinas frameworks, consulta React y Angular y las diferencias de cada adapter.

Crea tu primer proyecto frontend

Con Node 24 y npm, el recorrido inicial usa estos comandos. Ejecuta la creación donde todavía no exista el directorio indicado:

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-open

Abre http://127.0.0.1:3000, selecciona mi-plataforma y comprueba que el contador React responde. La guía completa identifica los archivos que vas a editar y el resultado de cada paso. Después puedes añadir otra app o consultar las plantillas JavaScript y TypeScript.

De la primera pantalla a una aplicación publicable

Antes de separar más apps, completa una capacidad: interacción, carga, error, estado vacío y limpieza. Prueba el contrato desde ambos lados y revisa navegación, foco y estilos. Usa las APIs para consultar firmas concretas y el laboratorio para observar su ejecución.

Después sigue producción para construir y revisar lo que publicarás. Si un solo equipo puede entregar todo de forma coordinada, una app modular puede ser suficiente; cuándo elegir microfrontends explica el coste de dividirla.