He escrito mucho sobre   . Estaba tan entusiasmado que escribí el   sobre el tema (además del Libro de Vaadin), su   para Vaadin 7 y un   . Aun así, me sorprende que tanta gente en el mundo de JVM nunca haya oído hablar de él. Vaadin primer libro edición actualizada sitio web complementario  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:   . 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,   , 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. solo escribes código de backend es decir  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   . 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. tema  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>  </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId>  <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>  </dependency> </project>  Establezca la versión de Vaadin junto con otras propiedades.  Mantenga la versión de todas las dependencias consistente.  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   a través de la propiedad correspondiente: /vaadin   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 } }  Asocia el componente a la raíz   del servlet Vaadin. del subcontexto  Establezca el título de la página estática. En caso de que necesite un título dinámico, puede implementar   . HasDynamicTitle  Defina una clase   . RootComponent    es una clase que Vaadin representa como un   HTML VerticalLayout div  El iniciador Vaadin Spring Boot se encarga de inyectar la lista.  Vaadin ejecuta la función   en la primera solicitud del navegador. init()  Los siguientes fragmentos de código irán allí.  Agregar componentes  En el fragmento anterior, heredamos de   , un   proporcionado por Vaadin. VerticalLayout componente  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,   coloca los componentes de arriba a abajo en una columna;   los coloca de izquierda a derecha en una fila. VerticalLayout HorizontalLayout  Agregar componentes a un diseño es sencillo:   add(Label("Hello")) //1 add(Label("world!"))  En el contexto de la función   . init()  Si bien esto funciona perfectamente, podemos mejorar la situación utilizando   ya que utilizamos Kotlin. Podemos reescribir el fragmento anterior de la siguiente manera: Karibu-DSL,   label("Hello") //1 label("world!")    es una función de extensión DSL de Karibu en la interfaz  label() 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   cuando el usuario hacía clic en un botón. Hello world!  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 }  Inicializar un nuevo componente   con un valor. Checkbox  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:   https://github.com/ajavageek/compare-frontends?embedable=true   Para ir más allá:   Vaadín   ¿Qué es el flujo?   Más Vaadin   Publicado originalmente en   el 13 de octubre de 2024 A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Get Free Unlimited IP Geo Data With IPinfo Lite

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

El modelo Bitcoin UTXO, impulsando un ecosistema único

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

El modelo Bitcoin UTXO, impulsando un ecosistema único

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps