Curso de Vaadin para Equipos de Desarrollo — Eficiencia y despliegues

Creación de proyectos mediante Vaadin Start y estructura inicial generada con Spring Boot y Maven.

Organización de paquetes para vistas, componentes, servicios, entidades, repositorios, seguridad y configuración.

Dependencias `vaadin`, `vaadin-core` y criterios para controlar los módulos incorporados al proyecto.

Development Mode frente a Production Mode.

Vite, npm, recursos frontend generados y proceso de construcción de los assets del navegador.

Gestión automática o personalizada de Node.js durante el build.

Ciclo de vida de `VaadinService`, `VaadinSession`, `UI` y componentes.

Attach y detach de componentes y liberación correcta de listeners y recursos asociados.

Uso de `whenAttached` para asociar inicialización y cleanup al ciclo de vida de un componente.

`Element` API para acceder a propiedades, atributos, estilos, eventos y funcionalidades de bajo nivel.

Propiedades, eventos y RPC dentro de la comunicación Flow cliente-servidor.

`@ClientCallable`, JavaScript interop y ejecución controlada de código en el navegador.

Componentes personalizados mediante Java, Web Components y Lit cuando los componentes existentes no cubren la necesidad.

Motor del navegador implementado actualmente en TypeScript manteniendo la API Java de las aplicaciones Flow.

Impacto de la arquitectura moderna sobre add-ons antiguos que dependían directamente del antiguo cliente GWT.

Catálogo de componentes Vaadin para entrada de datos, visualización, navegación, feedback, overlays y composición de interfaces.

Componentes fundamentales: Button, Text Field, Text Area, Checkbox, Radio Button Group, Combo Box, Select y Number Field.

Date Picker, Date Time Picker, Time Picker y restricciones de valor mediante required, min, max y validación.

Switch para configuraciones binarias cuyo cambio puede aplicarse de forma inmediata.

Dialog, Confirm Dialog, Notification, Popover, Context Menu, Menu Bar y Tooltip.

Vertical Layout, Horizontal Layout, Form Layout, Scroller, Split Layout y App Layout.

Diseño responsive con Form Layout, tamaños relativos, flexbox y CSS.

Breadcrumbs para reflejar jerarquía y permitir navegación hacia niveles superiores.

Definición de vistas mediante `@Route`.

Parámetros de ruta, parámetros opcionales, query parameters y deep linking.

Navegación programática mediante `UI.navigate()` y componentes RouterLink.

Parent Layouts y composición de una estructura de navegación empresarial.

Page titles, iconos, menús y metadata asociada a las rutas.

Eventos `BeforeEnter`, `BeforeLeave` y control del proceso de navegación.

Gestión de rutas inexistentes, errores de navegación y vistas de error personalizadas.

Diseño de formularios mediante componentes de entrada y Form Layout.

`Binder` como mecanismo principal para sincronizar campos de UI y objetos Java.

Binding mediante getters y setters explícitos.

Binding automático por nombres de propiedades cuando resulta apropiado.

Buffered y unbuffered binding y diferencias en el momento de actualizar el objeto.

Conversores para transformar valores entre representación visual y modelo de dominio.

Validadores de campo y mensajes de error específicos.

Validación cruzada a nivel de objeto.

`BeanValidationBinder` e integración con Jakarta Bean Validation.

Grupos de validación para aplicar reglas distintas, por ejemplo, durante borrador y envío definitivo.

Campos required, read-only, disabled y hidden y consecuencias sobre binding y validación.

Validación condicional y reglas dependientes del estado de otros componentes.

Upload y UploadManager para incorporar archivos dentro de workflows empresariales.

Validación de uploads mediante metadata, primeras partes del archivo o contenido completo antes de aceptar el fichero.

Gestión de errores, archivos rechazados, restricciones de tipo, tamaño, seguridad y almacenamiento posterior.

Grid como componente principal para mostrar conjuntos de datos empresariales.

Definición de columnas mediante propiedades, Value Providers y Component Renderers.

Ordenación, filtrado, resizing, reorder y freezing de columnas.

Selección simple y múltiple de elementos.

Headers, footers y agrupación visual de columnas.

Renderers para fechas, estados, componentes, iconos y formatos personalizados.

Data Providers para separar el componente visual de la procedencia real de los datos.

In-memory Data Provider frente a lazy loading.

Callback Data Provider para recuperar páginas bajo demanda desde backend.

Paginación, filtros y ordenación trasladados al repositorio o servicio.

Grid Pro para determinados escenarios de edición inline.

Tree Grid para representar estructuras jerárquicas.

Auto Grid cuando se dispone de servicios compatibles que permiten generar la representación tabular.

Familia Table para tablas HTML semánticas, captions, headers, bodies, footers, spans y conjuntos pequeños de información.

Diferencia entre Table para contenido tabular semántico y Grid para grandes datasets, lazy loading, sorting, filtering y edición.

Modelo de estado de una interfaz Flow y relación entre componentes, sesión y servidor.

Eventos de componentes y registro y eliminación de listeners.

`Registration` como mecanismo para liberar listeners y evitar referencias innecesarias.

Signals como modelo reactivo para representar estado de interfaz mediante Java.

`ValueSignal`, `ListSignal`, computed signals y efectos.

Binding de texto, visibilidad, enabled state, estilos, clases, listas e items directamente a Signals.

Two-way binding entre componentes de formulario y Signals.

Local Signals para estado reactivo dentro de una instancia de aplicación.

Shared Signals para sincronización de información entre diferentes UIs y usuarios en los escenarios compatibles.

Diferencias entre Signals, campos Java convencionales, Binder y estado persistente de negocio.

Server Push para actualizar una UI como consecuencia de procesamiento realizado fuera del request original.

Signals como opción recomendada para actualizaciones reactivas thread-safe.

`UI.access()` para actualizaciones imperativas desde threads externos.

WebSocket y Server-Sent Events como mecanismos disponibles para determinados escenarios de Push.

Prevención de race conditions, flooding, deadlocks y actualizaciones innecesarias en aplicaciones concurrentes.

Aura como tema predeterminado actual para las aplicaciones Vaadin.

Lumo como alternativa madura para aplicaciones que requieren mantener su sistema visual.

Base Styles para proyectos que necesitan un diseño visual altamente personalizado.

Diferencias entre `--vaadin-*`, `--aura-*` y `--lumo-*`.

Custom properties para color, tipografía, espaciado, superficies, radios, sombras y jerarquía visual.

Light Mode, Dark Mode y adaptación a preferencias de usuario.

Component Style Variants como primera opción antes de escribir CSS específico.

CSS normal y pseudo-elementos `::part()` para adaptar partes internas documentadas de componentes.

Estrategia actual recomendada: tema → variante → style properties → CSS específico.

Tailwind CSS, utility classes y criterios para incorporarlos al proyecto.

Responsive design y adaptación a escritorio, tablet y móvil.

Accesibilidad mediante labels, helper texts, error messages, ARIA y navegación mediante teclado.

Uso de `HasAriaDescription`, roles accesibles y nombres de componentes para tecnologías de asistencia.

Localización de textos, componentes, fechas, números y mensajes mediante i18n.

Diseño de un sistema visual corporativo reutilizable y mantenible entre diferentes áreas de la aplicación.

Integración entre Vaadin y Spring Boot y ciclo de vida de los beans utilizados por las vistas.

Inyección de dependencias mediante constructor y separación entre vista y lógica de negocio.

`@Service`, repositorios y componentes del backend.

Entidades JPA y persistencia mediante Spring Data JPA.

Repositories, queries derivadas y consultas personalizadas.

Transacciones y límites transaccionales en operaciones lanzadas desde la interfaz.

Patrón View → Service → Repository para evitar acceso directo de la UI a persistencia.

DTO, entidades de dominio y modelos específicos de interfaz cuando la complejidad lo requiere.

Lazy loading desde Grid conectado con servicios y repositorios paginados.

Gestión de errores de negocio y traducción a feedback comprensible para el usuario.

Integración con APIs REST y servicios externos.

Procesamiento asíncrono y tareas de larga duración.

Integración con sistemas de mensajería, procesos batch y eventos empresariales.

Consumo de información desde microservicios manteniendo desacoplada la UI.

Organización modular de aplicaciones de gran tamaño mediante features o dominios funcionales.

Modelo de seguridad de Flow y ventaja de mantener estado y lógica empresarial en el servidor.

Integración con Spring Security mediante `VaadinSecurityConfigurer`.

Diseño de una Login View y flujo de autenticación.

`@AnonymousAllowed`, `@PermitAll`, `@RolesAllowed` y `@DenyAll` para proteger vistas.

Control de acceso a rutas en función de autenticación y roles.

Autorización de operaciones de negocio independiente de la simple protección de la vista.

Logout y limpieza apropiada del contexto de usuario.

Protección CSRF y tratamiento especial de las peticiones internas del framework.

Integración con LDAP, OAuth 2.0, OpenID Connect y proveedores corporativos mediante Spring Security.

SSO empresarial utilizando las capacidades actuales del ecosistema de seguridad Java.

Protección de endpoints REST que conviven con las vistas Vaadin.

Gestión de secretos, API keys y credenciales fuera del código fuente.

Content Security Policy, headers, cookies, HTTPS y configuración del reverse proxy.

Prevención de XSS, inyecciones y exposición accidental de datos sensibles.

Principio de mínimo privilegio aplicado a vistas, servicios, datos, herramientas de IA y sistemas externos.

Arquitectura de AI Integration para incorporar interfaces de IA dentro de aplicaciones Flow.

`AIOrchestrator` como motor no visual que conecta componentes, contexto, herramientas y proveedor LLM.

Integración con Spring AI y LangChain4j y posibilidad de desarrollar proveedores propios mediante `LLMProvider`.

Message Input, Message List, streaming, historial conversacional y attachments.

Tool Calling para que el modelo pueda utilizar funciones de la propia aplicación.

Session Context para aportar tenant, locale, página actual u otra información contextual controlada.

`GridAIController` para permitir interacción en lenguaje natural con información representada en Grid.

`ChartAIController` para generar o modificar visualizaciones apoyándose en información de negocio.

`FormAIController` para completar formularios desde lenguaje natural o documentos adjuntos.

Integración de la validación de Binder dentro del proceso de escritura realizado por el modelo.

Marcado de campos modificados por IA, identificación del origen del valor y reversión individual de cambios.

Source Tracking mediante `ValueSource`, nivel de confianza, extractos de origen y localización dentro del documento.

`RequestInterceptor` para inspeccionar, anonimizar, sustituir o rechazar prompts y adjuntos antes de enviarlos al modelo.

`ResponseMetadata` para registrar finish reason, input tokens, output tokens y coste operacional de cada turno.

Tool limits, `ToolException`, ejecución background, privacidad, auditoría y consideración del estado Preview de estas APIs antes de utilizarlas en sistemas críticos.

Vaadin Copilot como conjunto de herramientas de desarrollo, inspección, edición visual y asistencia dentro de aplicaciones Vaadin.

Modos de edición, inspección y testing disponibles desde la interfaz de Copilot.

Selección visual de componentes y acceso contextual a propiedades, documentación, sizing y padding.

Accessibility Checker para localizar problemas habituales de accesibilidad durante desarrollo.

Theme Editor para trabajar visualmente sobre el diseño de Aura.

All Components View para revisar conjuntamente componentes, variantes y comportamiento del tema.

Integración de Copilot con proyectos Java y Kotlin dentro de las capacidades actualmente soportadas.

Servidor MCP oficial de Vaadin para que coding agents consulten documentación y APIs actuales en lugar de depender únicamente de conocimiento del modelo.

Configuración del MCP Server desde clientes compatibles con Model Context Protocol.

Dev Loop CLI diseñado para que un coding agent pueda verificar si sus modificaciones han llegado realmente a la aplicación en ejecución.

Comandos `status`, `start`, `apply`, `restart`, `stop` y `shutdown` para controlar el ciclo de desarrollo.

Hot swap de determinados cambios Java y aplicación directa de modificaciones CSS sin reinicio completo.

Retención de la última versión funcional cuando una nueva modificación no compila.

Agent Skills generadas para proporcionar a herramientas compatibles procedimientos específicos sobre el Dev Loop.

Uso de coding agents con validación mediante build, tests, navegador y evidencias antes de considerar finalizada una modificación.

Pirámide de testing aplicada a una aplicación Vaadin.

Unit tests de servicios, reglas de negocio, validadores y transformaciones independientes de la UI.

Browserless Testing para probar vistas y componentes directamente dentro de la JVM sin navegador ni servlet container.

Component Testers para interactuar con componentes utilizando una API orientada a comportamiento.

Localización de componentes y simulación de acciones de usuario.

Testing de Grid, Tree Grid, Grid Pro, Switch, Split Layout, Card, Avatar Group y overlays mediante testers compatibles.

Testing de Signals y de interfaces basadas en bindings reactivos.

Testing de acceso a vistas y Spring Security dentro del entorno browserless.

Snapshots para facilitar diagnóstico de pruebas fallidas.

Escenarios multi-user y multi-window.

End-to-End Testing para verificar navegador, cliente-servidor y comportamiento completo de la aplicación.

TestBench como solución especializada para E2E sobre componentes Vaadin.

Playwright y Selenium como alternativas para determinadas estrategias de automatización.

Visual Regression Testing y cross-browser testing cuando el riesgo de interfaz lo requiere.

Integración de tests, análisis estático, accesibilidad y build de producción dentro de CI/CD.

Observabilidad como combinación de métricas, trazas, insights, datos del navegador y evidencia de interacciones.

Instrumentación integrada mediante Micrometer sin necesidad de arrancar la aplicación con un Java Agent independiente.

Spring Boot Actuator como mecanismo de exposición dentro de aplicaciones Spring.

Micrometer Registry para integración con Prometheus, Datadog, OTLP y otras plataformas.

Grafana como posible capa de visualización sobre las métricas y trazas recopiladas.

Interaction Insights para conservar interacciones lentas o fallidas con ruta, componente, evento y contexto de aplicación.

Detección específica de Data Provider queries lentas o fallidas.

Registro de errores procedentes del navegador que nunca llegaron a ejecutarse en el servidor.

UI State Size para analizar el número de componentes mantenidos por pestaña y diagnosticar crecimiento de memoria.

Monitorización opcional de consultas JDBC y relación entre una consulta y la vista que la originó.

Métricas frontend como Largest Contentful Paint y First Contentful Paint.

Panel de observabilidad de Vaadin Copilot durante el desarrollo para localizar problemas antes del despliegue.

`@Observed`, `@Timed`, MeterRegistry y Observation API para instrumentación personalizada.

Creación de dashboards y alertas sobre errores, latencias, consultas, sesiones y consumo de recursos.

Diagnóstico sistemático de memory leaks, UIs excesivamente grandes, consultas lentas, bloqueos de sesión y degradaciones de experiencia.

Diferencias entre Development Mode y Production Mode.

Production Build con optimización y minificación de recursos del navegador.

Empaquetado como JAR ejecutable mediante Spring Boot.

Empaquetado WAR para determinados servidores compatibles con Jakarta EE.

Externalización de configuración por entorno.

Contenedores Docker y generación de imágenes reproducibles.

Reverse proxies, HTTPS, compresión, caching y configuración apropiada del transporte de Push.

Despliegue cloud y Kubernetes.

Arquitecturas distribuidas y consideración del estado de sesión almacenado en el servidor.

Replicación y alta disponibilidad mediante mecanismos compatibles con la arquitectura Vaadin; Spring Session no sustituye el modelo de sesión de Flow.

Escalabilidad vertical y horizontal y análisis del consumo de memoria por sesión y UI.

Native Image con GraalVM cuando el proyecto y las dependencias utilizadas son compatibles.

Source maps, logs, métricas y procedimientos de rollback para investigar errores en producción.

Estrategia de actualización periódica del framework, Spring, Java, componentes y add-ons.

Identificación y migración de APIs deprecadas, evitando basar nuevos desarrollos en kits o componentes con retirada anunciada.

Arquitectura de una aplicación empresarial completa basada en Vaadin Flow y Spring Boot.

Organización del código en vistas, componentes reutilizables, servicios, dominio, repositorios, seguridad y configuración.

App Layout con navegación, Breadcrumbs, rutas parametrizadas y control del ciclo de navegación.

Dashboard principal con indicadores, tablas y componentes adecuados al tipo de información.

Grid conectado a un Data Provider con filtrado, ordenación y lazy loading desde backend.

Formulario empresarial mediante Binder, conversión, validación de campo y reglas de negocio.

Persistencia mediante servicios y repositorios evitando acceso directo desde la vista.

Estado reactivo mediante Signals y Server Push para información que cambia en segundo plano.

Tema corporativo basado en Aura o Lumo con responsive design, dark mode y criterios de accesibilidad.

Autenticación y autorización mediante Spring Security y permisos de vista y operación.

Funcionalidad de IA con AIOrchestrator y un controller de Form, Grid o Chart según el escenario seleccionado.

Auditoría de entradas IA mediante markers, Source Tracking, Request Interceptor y registro de metadata cuando resulte aplicable.

Suite de pruebas browserless y pruebas end-to-end sobre las operaciones críticas.

Observabilidad mediante Micrometer, Actuator, Interaction Insights y métricas relevantes para el caso de uso.

Build de producción, contenedor, estrategia de despliegue, monitorización, rollback y checklist final de seguridad, rendimiento y mantenibilidad.