Micro Frontends de Wippy
El código de frontend de Wippy se ejecuta dentro del límite de aislamiento del Web Host. Hay dos tipos de artefacto que puede construir: apps de micro frontend y web components. Ambos son proyectos Vite independientes, ambos se comunican con la plataforma mediante @wippy-fe/proxy y ambos se declaran al backend mediante una entrada de registry en _index.yaml. La diferencia está en cómo se renderizan y para qué son adecuados.
App de micro frontend frente a web component
App de micro frontend (view.page) |
Web component (view.component) |
|
|---|---|---|
| Se renderiza como | Iframe completo, contexto de navegación aislado | Elemento personalizado en Shadow DOM, dentro de una página |
| Tiene su propia URL / entrada de navegación | Sí: reclama un mountRoute del backend |
No: se incrusta dentro de otra página o de un artefacto de chat |
| Enrutamiento interno | Sí: vue-router con historial en memoria |
No: un solo componente, sin router |
| Controla el viewport | Sí | No: lo dimensiona el layout circundante |
| Reutilizable entre páginas | No: una URL, un sitio | Sí: cualquier página puede incrustar la etiqueta |
| Recibe props tipadas | No: lee AppConfig |
Sí: atributos HTML declarados por esquema |
| Emite eventos tipados | No: se comunica vía la API del proxy | Sí: CustomEvents declarados por esquema |
| Aislamiento de CSS | Límite del iframe | Shadow DOM (encapsulación completa) |
Regla rápida: si necesita vue-router, una URL dedicada o es dueño del viewport completo, es una app de micro frontend. Si es incrustable, reutilizable y autocontenido, es un web component.
En caso de duda, empiece con un web component. Es más fácil promoverlo después a app de micro frontend que al revés.
Qué leer a continuación
¿Con prisa? Quickstart tiene ejemplos mínimos de extremo a extremo tanto para una app de micro frontend en Vue como para un web component en Vue, con enlaces al repositorio público app.
Construir una app de micro frontend:
- Micro Frontend App: andamiaje, bloque wippy de
package.json, configuración de Vite, secuencia de arranque, sincronización del router - Sistema de Build:
@wippy-fe/vite-plugin,wippy-meta.json, externals - API del Proxy: referencia de
@wippy-fe/proxypara comunicarse con el host - Temas → Temas: Apps de Micro Frontend: catálogo de variables CSS y, después, cómo recibirlo mediante inyecciones del proxy
Construir un web component:
- Web Component: andamiaje,
WippyVueElement, props, eventos, CSS en shadow DOM - Sistema de Build: la misma cadena de herramientas de Vite, distinto plugin y formato de salida
- API del Proxy: la misma API, importada directamente de
@wippy-fe/proxy - Temas → Temas: Web Components: catálogo de variables CSS y, después, cómo recibirlo a través del límite del shadow DOM
Para ambos:
- Modo Host-less: desarrollar y probar sin ejecutar el Web Host completo
- Índice de Reglas de Conformidad: propietarios canónicos de las reglas y puertas deterministas
- Depuración: guía orientada a síntomas para los escenarios de fallo más comunes
Requisitos previos
- Módulo de backend de Wippy con
wippy/viewsdeclarado como dependencia (vea Views) wippy/facadepara el punto de entrada del Web Host (vea Punto de Entrada del Facade)- Node.js 22 o posterior y Vite 7, según lo declarado por la fuente del Web Host seleccionada; vuelva a comprobar su paquete cuando cambie la release de destino