# Desarrollo frontend: qué puedes crear con WU

Desarrolla aplicaciones web con JavaScript o TypeScript y la tecnología de cada app. Conoce los 13 adapters de WU y cómo crear una integración propia.

<span class="section-anchor" id="section-1"></span>

## 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](/es/docs/framework/api-adapters/).

Para otra tecnología, registra `mount` y `unmount` con `wu.define`, o construye un adapter con [`createWuAdapter`](/es/docs/framework/api-adapters/#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.

<span id="dashboards"></span>

<span class="section-anchor" id="section-2"></span>

## 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](/es/docs/guides/shared-counter/): 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.

<span id="ecommerce"></span>

<span class="section-anchor" id="section-3"></span>

## 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](/es/docs/framework/communication/) ayuda a elegir entre eventos, estado y llamadas con respuesta. La [arquitectura del shell](/es/docs/guides/architecture/) 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.

<span id="internal-tools"></span>

<span class="section-anchor" id="section-4"></span>

## 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](/es/docs/guides/rpc-between-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.

<span class="section-anchor" id="section-5"></span>

## 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](/es/docs/guides/react-angular-microfrontends/) y las diferencias de cada [adapter](/es/docs/framework/api-adapters/).

<span class="section-anchor" id="section-6"></span>

## 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:

```sh
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](http://127.0.0.1:3000), selecciona **mi-plataforma** y comprueba que el contador React responde. La [guía completa](/es/docs/guides/quickstart/) identifica los archivos que vas a editar y el resultado de cada paso. Después puedes [añadir otra app](/es/docs/guides/add-an-app/) o consultar las [plantillas JavaScript y TypeScript](/es/docs/cli/templates/).

<span class="section-anchor" id="section-7"></span>

## 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](/es/api/) para consultar firmas concretas y el [laboratorio](/es/labs/) para observar su ejecución.

Después sigue [producción](/es/docs/guides/production/) 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](/es/docs/guides/microfrontends/) explica el coste de dividirla.