Introducción a Vaadin Flow

¡Hola a todos! En la entrada de hoy os presentamos la plataforma Vaadin y sus componentes, además nos centraremos en su desarrollo Java a través de Vaadin Flow y veremos todo lo que éste nos puede ofrecer.

Vaadin es un framework para el desarrollo de aplicaciones web Open Source modernas que posee una librería con numerosos componentes de usuario con los que construir aplicaciones web profesionales similares a los interfaces de una aplicación de escritorio. Este framework se ejecuta del lado del servidor lo que significa que la mayoría de la lógica y por tanto la mayor carga del trabajo recae en el servidor.

Vaadin utiliza tecnología Ajax del lado del cliente cuya base es GWT (Google Web Toolkit) para renderizar la interfaz de usuario en el navegador. Las aplicaciones Google Web Toolkit se escriben en Java y son automáticamente «traducidas» a JavaScript y HTML. GWT es muy cómodo para el desarrollador porque le mantiene al margen de estas acciones de presentación y sin la necesidad de instalar ningún plugin en el navegador para su funcionamiento.

Consta de componentes con comportamiento responsive, que además están preparados para nuevas tecnologías como PWA, http2, etc.

Se pueden distinguir 4 bloques dentro de Vaadin:

• Componentes web:  bloques visuales para componer la aplicación Custom elements. Se pueden usar en más frameworks, Angular , Polymer.
• Framework Java: Permite usar los componentes web desde el backend. Java en Vaadin se refiere al servidor, JVM.
• Herramientas: plugins de Maven, librerías JavaScript, etc. El producto estrella es –Designer, un diseñador visual para crear pantallas completas a base de componentes. Permite hacer composiciones de elementos web y crear vínculos entre esas clases a golpe de ratón.
• Starters: Plantillas para crear nuevos proyectos, (más sencillos o más completos). Disponibles para Java, Poymer, React, etc.

Cuando se hace referencias a Vaadin, se hacen sobre la plataforma completa, y cuando se hacen sobre Vaadin Flow, se hacen sobre la parte Java.

En esta entrada, nos centraremos en Vaadin Flow.

Arquitectura

Trabajar con tecnologías de bajo nivel es tedioso y consume mucho tiempo. En Vaadin todos los elementos de la interfaz de usuario, están compuestos por componentes Web , lo que significa que están desacoplados, haciendo el desarrollo web más fácil. Flow proporciona una API Java del lado del servidor para usar estos componentes web. Flow ofrece una comunicación bidireccional automática entre el servidor y el navegador que da a los desarrolladores Java acceso completo a la web y hace mucho más fácil integrar la UI con los datos mediante un backend robusto, usando la comunicación REST tradicional.

Con Vaadin Flow se puede acceder a las APIS de los navegadores, a los componentes Web, o incluso a los elementos del DOM, directamente desde Java. Con Vaadin Flow, sólo necesitas concentrarte en usar y crear componentes que trabajan con un nivel mucho mayor de abstracción.

Flow tiene un binding bidireccional, así que cuando la UI cambia en el cliente o en el servidor, estos cambios se reflejan también en el otro lado.

Construyendo UIs con componentes

El núcleo de Vaadin Flow son los componentes UI, que usan para construir aplicaciones y páginas web interactivas. En la cima de los componentes preparados, hay potentes capas de abstracción.
Vaadin Components

En las altas capas de abstracción, puedes construir UIS de una manera altamente productiva, usando las APIs de Java para los componentes web the Vaadin. De esta manera sólo tienes que dar a tu aplicación el “look and feel” que tú quieras.

Encontrarás más componentes disponibles en: Using Vaadin Components.

Creando nuevos componentes en Java

En la siguiente capa de abstracción , puedes crear nuevos componentes personalizándolos y mezclándolos con los componentes habilitados por una arquitectura más ligera y con la posibilidad de acceder al DOM y a la APIs del navegador desde el lado servidor.

Para saber más sobre la cómo construir componentes con una API reutilizable:

Creating Components , Element API

Integrar un componente web

Con Vaadin Flow, puedes coger cualquier componente web, crear una API Java para ellos y usarlos en tus proyectos.

Construir componentes web con plantillas HTML

En el nivel más bajo, es posible controlar totalmente el DOM y la comunicación creando componentes como plantillas HTML, y creando clases Java del servidor que las encapsulan en componentes reutilizables con una API de alto nivel. Para ayudar con las plantillas, Flow proporciona:

• Un modelo para compartir y sincronizar datos entre el código Java y la plantilla HTML.
• Una representación en el servidor del árbol del DOM en el lado del cliente para modificaciones dinámicas.
• Una API Java  PRPC para interactuar con Javascript en el navegador.

Rutas y Navegación

Flow proporciona la clase Router para ayudar a estructurar la aplicación web en diferentes partes a las que el usuario puede navegar. Para registrar la ruta a la que se quiere navegar, se utiliza la anotación @Route. Se puede especificar la ruta, y opcionalmente, la capa padre en la que se quiere mostrar el componente.

Para saber más, puedes visitar el enlace Routing and Navigation .

Cómo trabaja FLOW con los componentes

Flow permite al código Java controlar el DOM en el navegador web con una representación Java del mismo DOM. Todos los cambios se sincronizan automáticamente con el DOM real del navegador.

El DOM se construye a partir de instancias Element , cada una de las cuales representa un elemento del DOM del navegador. La raíz del DOM en el servidor, es el Element de la instacia UI, accesible usando ui.getElement(). Este elemento representa la etiqueta <body>.

Para comparar elementos, no se puede utilizar == o !=, en su lugar hay que utilizar element.equals(otherElement) para comprobar si las dos instancias se refieren al mismo elemento DOM del navegador.

Jerarquía de elementos

Una aplicación web está estructurada como un árbol de elementos siendo su raíz el elemento de a instancia UI. Un elemento puede ser añadido como un hijo a otro elemento, usando métodos tales como element.appendChild(Element)para añadir al final de una lista de hijos, o utilizando element.insertChild(int, Element) para añadirlo a una posición concreta de la lista.

En está jerarquía se puede navegar hacia arriba utilizando element.getParent() y hacia abajo usando element.getChildCount() y element.getChild(int).

Jerarquía de componentes

La jerarquía de componentes proporciona un alto nivel de abstracción. Un componente consiste en un elemento raíz y opcionalmente puede contener cualquier número de hijos. Los componentes que pueden ser añadidos dentro de otros componentes tales como UI.add(Component), proporcionan al componente padre apoyo con los componentes hijos.

Composite es un tipo de componente especial que no tiene un elemento raíz en sí mismo, pero en su lugar encapsula a otros componentes. El principal caso de uso de un “composite” es combinar los componentes existentes en nuevos componentes mientras se oculta la API del componente original.

La jerarquía de componentes se puede navegar hacia arriba utilizando component.getParent () y hacia abajo usando component.getChildren (). La jerarquía de componentes se construye en función de la jerarquía de elementos, por lo que siempre están sincronizados.

Plantillas

En lugar de escribir código Java para construir el DOM a partir de elementos individuales, también es posible usar un archivo de plantilla HTML para definir la estructura general del DOM y usar un modelo de Java para controlar el contenido de los elementos.

Además de proporcionar una visión general más clara de la estructura de un componente, la funcionalidad de la plantilla también ayuda a mejorar el rendimiento: la misma definición de plantilla se reutiliza para todas las instancias de componentes que utilizan el mismo archivo de plantilla. Esto significa que se utiliza menos memoria en el servidor y menos datos deben enviarse al navegador.

Hasta aquí todo por hoy, esperamos que os haya resultado interesante. Ahora os animamos a ponerlo en práctica:

¡Sigue el tutorial para crear tu primera aplicación Vaadin! Getting started with Vaadin Flow