Lo que necesita saber sobre Vaadin: el marco AJAX del lado del servidor con batería incluida

He escrito mucho sobre Vaadin . Estaba tan entusiasmado que escribí el primer libro sobre el tema (además del Libro de Vaadin), su edición actualizada para Vaadin 7 y un sitio web complementario . Aun así, me sorprende que tanta gente en el mundo de JVM nunca haya oído hablar de él.

En esta publicación, me gustaría presentar Vaadin en el contexto de AJAX y SSR.

Una breve introducción a Vaadin

La belleza de Vaadin radica en su simplicidad: solo escribes código de backend . Lo has leído bien. Un desarrollador de Vaadin solo necesita saber Java, o cualquier lenguaje JVM, y la API de Vaadin. En tiempo de ejecución, Vaadin creará el código del lado del cliente, es decir , HTML, JavaScript y CSS. Este enfoque permite a los desarrolladores centrarse en la funcionalidad principal de la aplicación, lo que hace que el proceso de desarrollo sea más productivo.

Vaadin se basa en componentes y diseños, al igual que los frameworks de escritorio habituales. Si conoces Swing o JavaFX, te sentirás como en casa.

Mencioné CSS arriba: Vaadin te permite desarrollar tu CSS en un paquete reutilizable dedicado llamado tema . La guinda del pastel: el desarrollo de un tema se puede hacer en paralelo al desarrollo del backend y no tiene ninguna adherencia a este último; el código no necesita usar una plantilla específica ni agregar clases específicas al HTML.

Configuración de Vaadin

Configurar Vaadin en el contexto de Spring Boot es muy sencillo:

 <project> <properties> <java.version>17</java.version> <kotlin.version>1.9.24</kotlin.version> <vaadin.version>24.4.9</vaadin.version> <!--1--> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId> <!--2--> <version>${vaadin.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-spring-boot-starter</artifactId> <!--3--> </dependency> </project>

1. Establezca la versión de Vaadin junto con otras propiedades.
2. Mantenga la versión de todas las dependencias consistente.
3. Agregue la biblioteca de integración Vaadin Spring Boot.

Vaadin se basa en un servlet Java normal, que se asigna a la raíz de forma predeterminada. La integración de Vaadin con Spring Boot permite anular el valor predeterminado. Debido a que nuestra base de código integra varios marcos, la asignamos a /vaadin a través de la propiedad correspondiente:

 vaadin.url-mapping=/vaadin/*

En la primera solicitud de un cliente, Vaadin devolverá el código del motor de JavaScript. El motor realizará solicitudes posteriores para recuperar la interfaz de usuario configurada y crear el andamiaje del lado del cliente. A partir de ese momento, el motor maneja todas las interacciones del usuario y actualiza la interfaz de usuario si es necesario.

Primeros pasos con Vaadin

Una vez que configuramos el proyecto, debemos configurar qué componente muestra Vaadin cuando recibe una solicitud.

 @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }

1. Asocia el componente a la raíz del subcontexto del servlet Vaadin.
2. Establezca el título de la página estática. En caso de que necesite un título dinámico, puede implementar HasDynamicTitle .
3. Defina una clase RootComponent .
4. VerticalLayout es una clase que Vaadin representa como un div HTML
5. El iniciador Vaadin Spring Boot se encarga de inyectar la lista.
6. Vaadin ejecuta la función init() en la primera solicitud del navegador.
7. Los siguientes fragmentos de código irán allí.

Agregar componentes

En el fragmento anterior, heredamos de VerticalLayout , un componente proporcionado por Vaadin.

El sistema de diseño de Vaadin incluye un conjunto de componentes que puedes usar para crear tu interfaz de usuario. Los componentes tienen una API de Java del lado del servidor además de la API de TypeScript para el desarrollo del lado del cliente.

Para utilizar un componente, primero debe crearlo y luego agregarlo a un diseño contenedor.

-- Creación de UI en aplicaciones Vaadin

Algunos componentes pueden contener a otros y saben cómo organizar sus subcomponentes. Por ejemplo, VerticalLayout coloca los componentes de arriba a abajo en una columna; HorizontalLayout los coloca de izquierda a derecha en una fila.

Agregar componentes a un diseño es sencillo:

 add(Label("Hello")) //1 add(Label("world!"))

1. En el contexto de la función init() .

Si bien esto funciona perfectamente, podemos mejorar la situación utilizando Karibu-DSL, ya que utilizamos Kotlin. Podemos reescribir el fragmento anterior de la siguiente manera:

 label("Hello") //1 label("world!")

1. label() es una función de extensión DSL de Karibu en la interfaz HasComponent

Karibu es genial, pero tiene una pequeña desventaja: no ofrece funciones de extensión para toda la API. Por ejemplo, debes recurrir a la API normal para agregar un pie de página a un componente Grid :

 appendFooterRow().apply { getCell(completedProp).component = Button("Clean up") { todos.removeIf { it.completed } refresh() } }

El lado positivo es que Karibu es de código abierto y siempre puedes contribuir si tienes algo que agregar.

Los componentes específicos relacionados con la interfaz de usuario no son importantes para la comprensión general. Si te interesa, siempre puedes consultar el código fuente .

Interacciones del usuario

Cuando los mainframes eran los reyes de la informática, se accedía a ellos a través de terminales. La interfaz de usuario era bastante limitada y la representación se producía en la terminal "tonta". Las computadoras personales trasladaron la funcionalidad de representación del servidor al cliente. En esa época, los desarrolladores asociaban un comportamiento a un componente a través de un disparador. Por ejemplo, se podía vincular la impresión de Hello world! cuando el usuario hacía clic en un botón.

Las aplicaciones web cambiaron este paradigma. Como lo mostraron nuestros artículos anteriores, cada interacción ahora se asigna a un flujo de solicitud-respuesta, sincrónico o asincrónico. Vaadin nos lleva de regreso al paradigma original.

 Checkbox(todo.completed).apply { //1 addValueChangeListener { todo.completed = it.value } //2 }

1. Inicializar un nuevo componente Checkbox con un valor.

   
   

2. Cuando el valor de la casilla de verificación cambia, ejecutamos lambda: cambiamos el valor del modelo subyacente.

No es necesario ningún código JavaScript; Vaadin gestiona la interacción de forma independiente.

Conclusión

La publicación fue solo una breve introducción a Vaadin en el contexto de AJAX y SSR.

La mayoría de los desarrolladores que aprenden a programar en aplicaciones web y, por lo tanto, están acostumbrados al modelo de solicitud-respuesta reaccionan mal cuando se exponen a Vaadin. Su principal argumento es la ausencia de API. En mi humilde opinión, es una ventaja: algunas aplicaciones, en particular las aplicaciones empresariales, no evolucionan hasta el punto en que sea necesario desarrollar clientes móviles dedicados.

Vaadin viene con un conjunto de CSS predeterminado, como se indica en la introducción. Este tema predeterminado garantiza que las aplicaciones de Vaadin se vean bien desde el principio, brindando a los usuarios un entorno de trabajo cómodo y visualmente atractivo. Sin embargo, siempre puede integrar otro o incluso desarrollar el suyo propio.

Sin embargo, el verdadero beneficio se encuentra nuevamente en el nivel organizacional. En la publicación introductoria, mencioné que separar el desarrollo frontend y backend crea problemas durante su integración. Debido a que Vaadin no tiene tal separación, la planificación del proyecto es más predecible, ya que no hay un paso de integración entre el frontend y el backend. Asimismo, la creación de temas puede realizarse en paralelo al desarrollo.

El código fuente completo de esta publicación se puede encontrar en GitHub:

Para ir más allá:

• Vaadín
• ¿Qué es el flujo?
• Más Vaadin

Publicado originalmente en A Java Geek el 13 de octubre de 2024