Arquitectura políglota
Distingue el CLI, el host, el runtime, las aplicaciones y la biblioteca visual antes de conectar frameworks.
Cinco responsabilidades distintas
Un shell es la página que reúne las aplicaciones; un microfrontend es cada aplicación que puede montar. El runtime WU conecta ambas partes. El CLI prepara los archivos y herramientas con los que las desarrollas.
La tabla utiliza la arquitectura de este portal como ejemplo. Puedes elegir otro shell y otros componentes visuales: Astro y Lit no son requisitos del runtime WU.
| Pieza | Qué posee | Qué entrega |
|---|---|---|
| WU CLI | Generación, desarrollo y compilación del workspace | Archivos, configuración, procesos y salida compilada |
| Shell Astro | URLs globales, navegación y composición de página | HTML de documentación y slots para aplicaciones |
| WU Framework | Registro, carga y ciclo de vida; servicios de comunicación | Un contrato común para aplicaciones independientes |
| Microfrontend | Una capacidad funcional y sus recursos | Implementación de mount/unmount y estado propio |
| Biblioteca Lit | Controles y contratos visuales | Custom Elements consumibles desde distintos frameworks |
El CLI trabaja durante desarrollo y compilación. El runtime se ejecuta en el navegador. Astro puede producir páginas sin JavaScript de framework; las partes interactivas se cargan mediante módulos cliente.
La URL pertenece al shell
Un shell necesita decidir qué URL muestra qué contenido, cómo funciona atrás/adelante y a dónde se mueve el foco. WU no incluye un router público que puedas invocar como wu.router o wu.routes. La metadata de rutas no implementa por sí misma navegación.
En este portal, Astro genera /docs/.../, /labs/ y /sources/. Se usan enlaces HTML normales. Un cambio de documento descarga la página anterior y crea un nuevo contexto de página. No hay una SPA oculta ni promesas de preservar estado entre documentos.
Un producto con shell persistente puede usar History API y un router propio. Allí debe serializar las transiciones: desmontar la app anterior, montar la siguiente, actualizar título/foco y gestionar fallos. Es una responsabilidad adicional del host.
Una capacidad por microfrontend
El laboratorio contiene dos capacidades deliberadamente pequeñas:
- Constructor de comandos: transforma una configuración elegida por el lector en una receta de CLI. React posee el estado y adapta eventos DOM.
- Inspector del runtime: muestra y modifica estado compartido, recibe eventos y permite observar limpieza. Vue posee esa lógica.
No se convierte cada botón o tarjeta en una aplicación WU. Los botones, formularios y paneles viven en componentes Lit; no necesitan despliegue ni lifecycle de MFE propio.
El contrato de montaje
Un lifecycle explícito deja visible qué recursos crea la app y quién los destruye:
import { wu } from 'wu-framework';
wu.define('saludo', {
mount(container) {
const message = document.createElement('p');
message.textContent = 'Aplicación montada por WU';
container.append(message);
},
unmount(container) {
container.replaceChildren();
}
});Esto define la implementación. El host debe inicializar el registro/configuración de la aplicación y llamar a mount; una definición no es sinónimo de que ya esté visible. Consulta el manual del framework para la forma exacta del manifest y de wu.init().
Estado local, DOM y comunicación entre apps
Usa el mecanismo más cercano a la relación que quieres expresar:
| Relación | Mecanismo |
|---|---|
| Estado interno de React o Vue | Estado del framework local |
| Datos de una app hacia un control Lit | Propiedades del Custom Element |
| Intención de un control hacia su app | Evento DOM tipado |
| Hecho que interesa a otras apps | Event bus WU |
| Dato compartido observable | Store WU |
| Servicio versionado entre proveedores/consumidores | Contracts WU |
No publiques objetos mutables del store como API visual. Transmite datos y eventos, y cancela las suscripciones cuando la app se desmonta.
Aislamiento y confianza
El portal usa sandbox: 'module'. Los módulos se ejecutan en el mismo contexto JavaScript; no es una frontera para código hostil. Los componentes Lit tienen Shadow DOM para sus estilos, pero Shadow DOM no impide acceder al contexto global.
Las aplicaciones de este proyecto son código local confiable. Las capabilities de la facade acotan las operaciones que hacen a través de ella; no convierten automáticamente un módulo arbitrario en código seguro. Los modos strict, eval, proxy y none tienen contratos distintos y se documentan con sus límites en el manual.
Una interfaz coherente
El sistema visual del portal utiliza fondo negro, texto hueso, rojo de señalización, estados lima y divisiones finas. Las páginas de lectura conservan tamaño de texto suficiente, foco visible y tablas desplazables.
La composición estática de documentos pertenece a Astro. Los controles interactivos se implementan en Lit. React y Vue no introducen una segunda familia de botones y formularios.
Referencias
- Código:
wu-framework/src/core/wu-core.js,wu-store.js,wu-event-bus.js,wu-contracts.jsysrc/index.js. - Astro: scripts cliente y Custom Elements.
- Lit: ciclo de vida y limpieza de recursos.