Vaadin 10 Beta: Un nuevo framework para web y Java

Después de años de trabajo, ha llegado el momento: La nueva generación de la plataforma Vaadin está lista para su lanzamiento. Antes de ver en qué consiste, discutamos un poco su trasfondo y antecedentes.

Construído para una web moderna con filosofía “mobile first”

En la actualidad, existen tres plataformas objetivo para desplegar interfaces de usuario de aplicaciones empresariales: Web, Android y iOS. Mientras que las aplicaciones nativas para Android y iOS pueden, discutiblemente, proveer la experiencia de usuario más sofisticada hoy en día, la naturaleza “write once, run everywhere” de la web se ha establecido largamente como la principal plataforma para desplegar aplicaciones empresariales. Ahora están surgiendo dos importantes tecnologías, que creemos, cambiarán el panorama de las aplicaciones empresariales: Progressive Web Applications (PWA) y Web components.

Con PWA, la experiencia de usuario de la web se acerca a la de las aplicaciones nativas en iOS y Android. Los navegadores Chrome, Safari, Edge y Firefox proveerán una experiencia similar a la de escritorio, por medio de PWA, en cualquier sistema operativo sobre los que corran. Android ya soporta PWA y se espera que el resto de sistemas operativos y navegadores web avancen de versiones beta a versiones de producción durante este año.

Los Web Components cambiarán cómo funciona el ecosistema del desarrollo web, en donde los componentes se vuelven compatibles entre frameworks y plataformas web. Todos los navegadores web publicados después de IE11 ya soportan Web Components y los más populares lo implementan de forma nativa.

Hemos rediseñado la plataforma Vaadin desde cero para esta nueva y moderna web. Con un enfoque en aplicaciones empresariales, nuestra prioridad principal es simplificar el desarrollo sobre una web moderna y alargar el ciclo de vida de las aplicaciones desarrolladas.

Vaadin 10: Para web y java

Toda aplicación web tiene un lado cliente, que muestra la interfaz gráfica de usuario dentro de un navegador web, y un lado servidor, que provee acceso a los datos, asegura la seguridad del sistema y provee la lógica requerida por la aplicación.

Creemos que para ayudar a los desarrolladores de la mejor forma, la plataforma de desarrollo debe soportar tanto tecnologías del lado del cliente como de lado del servidor y hacerlas trabajar juntas de la mejor manera. Esto no significa que la plataforma deba asumir que cada aplicación tenga la misma arquitectura o componentes. En vez de esto, la plataforma debe proveer componentes que trabajen bien juntos, que puedan ser usados independiente y que permitan a los desarrolladores elegir los componentes que deseen usar.

Por primera vez, los desarrolladores web se sentirán en casa usando la plataforma Vaadin: Podrán tomar los componentes que deseen y usarlos con el framework de su elección, ya sea Polymer, React, Angular, Vue, e incluso, sin ningún framework. No es necesario usar Java en absoluto.

Por otro lado, los desarrolladores Java tendrán la capacidad de construir aplicaciones single-page, enfocadas a móviles, sin necesidad de escribir JavaScript. Es posible implementar una aplicación web completamente en Java, Kotlin, Scala o cualquier otro lenguaje para la Máquina Virtual de Java y acceder a cualquier API del lado del servidor sin necesidad de implementar nada directamente en el lado de cliente. Esta nueva naturaleza dual de la plataforma permite a los equipos de desarrollo construir una colaboración eficiente entre desarrolladores web y desarrolladores Java para aprovechar de forma eficiente su experiencia y habilidades.

Aquí un ejemplo de ambos mundos:

HTML:

<vaadin-date-picker

label="Select birth date"

value="[[user.birthDate]]"

required>

</vaadin-date-picker>

Java:

DatePicker bd = new DatePicker(“Select birth date”);

bd.setValue(user.getBirthDate());

bd.setRequired(true);

Una biblioteca de componentes web

Vaadin 10 incluye 48 Web Components - todo desde un componente Grid con “lazy loading”, hasta elementos y visualizaciones animadas. Aunque hemos dado prioridad a la calidad sobre la cantidad, los componentes están listos para la gran mayoría de aplicaciones empresariales.

Todos los componentes han sido diseñados para trabajar bien tanto en pantallas de dispositivos móviles como de escritorio. Las capacidades de accesibilidad han sido probadas en todos los navegadores modernos y en múltiples lectores de pantalla, teclados y dispositivos apuntadores.

Como cada componente es un “custom element” en HTML, se pueden usar con cualquier framework web que admita Web Components. La mayoría de las funciones se pueden acceder de forma declarativa desde HTML o por medio de una API en JavaScript. La conección entre datos e interfaz gráfica (data binding) y el uso de plantillas son compatibles con Polymer.

Todos los componentes se pueden personalizar fácilmente y de manera consistente usando propiedades CSS. Además, Vaadin 10 incluye un tema llamado “Lumo” que es usado por defecto y muy fácil de ajustar a las necesidades de visualización. La lista de todos los componentes disponibles junto con su documentación y ejemplos, se puede encontrar en: https://vaadin.com/components.

Nuevo framework web para Java

El nuevo framework, Vaadin Flow, conecta a la Web con Java de una manera única proporcionando acceso completo a los componentes web, desde el lado del servidor, en Java. Al automatizar la comunicación bidireccional entre el navegador y el servidor, los desarrolladores Java pueden escribir aplicaciones web modernas, sin necesidad de escribir HTML o JavaScript.

Flow proporciona una abstracción fácil de usar para construir una interfaz de usuario web de la misma manera que Vaadin 8, pero con los modernos Web Components de Vaadin 10. A diferencia de antes, Flow ofrece acceso completo y directo al lado del cliente (la página web). Estas son algunas de las funcionalidades. Entre otras cosas, Vaadin Flow permite:

Manipular el DOM desde el lado del servidor en Java.
Llamar métodos del lado del cliente, desde el servidor.
Publicar métodos del servidor en el lado del cliente.
Implementar nuevos componentes en HTML.
Usar Web Component de terceros.
Compartir modelos de datos en vivo entre el cliente y el servidor.
Conectar plantillas del lado del cliente a datos en el servidor.
Agregar lógica del lado del cliente para validación o compensación de latencia.

En resumen, los desarrolladores obtienen una abstracción fácil de usar que no limita el acceso a las plataformas web.

Hay tres ventajas principales al desarrollar interfaces de usuario en el lado del servidor:

Simplifica la estructura de la aplicación ya que no se tiene que publicar una API REST o escribir código del lado del cliente en absoluto.
De forma predeterminada, el código se ejecuta en el lado del servidor, de forma segura, en lugar de en un navegador.
Fácil acceso al rico ecosistema de Java.

Al mismo tiempo, el lado del servidor tiene algunas limitaciones:

No hay soporte fuera de línea.
Las aplicaciones pueden consumir más recursos del servidor.

En la mayoría de los casos, las aplicaciones basadas en Vaadin Flow pueden servir fácilmente miles de usuarios activos simultáneos por servidor. Como Vaadin 10 permite desarrollar tanto en el lado del servidor como en el lado del cliente con los mismos componentes, las partes de la aplicación donde estas limitaciones impiden usar Flow se pueden construir con las partes del lado del cliente de la plataforma Vaadin.

Al pasar al nuevo estándar, Web Components, el desarrollo de aplicaciones Vaadin ya no depende de GWT. Si bien GWT se podría usar para desarrollar componentes web, hemos pasado al uso de Polymer para desarrollar los componentes en Vaadin.

Las populares herramientas de Vaadin 8, como Vaadin TestBench y Vaadin Designer, también estarán presentes en Vaadin 10.

Soporte a largo plazo

La plataforma Vaadin consiste en componentes web (Web Components), el framework Flow, herramientas e inicializadores de aplicaciones (app starters). Todas estas partes se diseñaron y probaron para que funcionen juntas, pero se crearon para permitir a los desarrolladores seleccionar y elegir sólo las partes que desean. Por ejemplo, un equipo de front-end trabajando en un requerimiento para una aplicación basada en Angular puede elegir incluir solo un par de componentes de Vaadin, mientras que un equipo de Java que comienza desde cero puede elegir usar la mayoría de las partes de la plataforma Vaadin.

Queremos brindar nuevas características a los usuarios de la plataforma Vaadin de forma rápida, garantizar que funcionan bien en conjunto y que las empresas puedan mantener sus aplicaciones durante muchos años sin necesidad de actualizar la plataforma todos los años. Para que esto sea posible, planeamos lanzar una nueva versión de la plataforma cada 3 meses en un “tren de lanzamiento” predecible y promocionar una versión “Long Term Support (LTS)” cada 2 años. Cada versión LTS es oficialmente mantenida por 5 años. Vaadin 10 será la primera versión LTS. Si bien las partes de cada versión de la plataforma Vaadin son probadas para que funcionen juntas, los desarrolladores también pueden optar por actualizar sólo algunas de las partes para tener acceso a las nuevas características sin la necesidad de actualizar la plataforma completa.

Cabe señalar que tanto Vaadin 7 como Vaadin 8 siguen siendo mantenidas hasta el año 2019 y 2022, respectivamente. Hoy, Vaadin 8 es la versión más estable y rica en funciones. Sería la mejor opción para muchas aplicaciones.

No lista para producción... aún

La versión de Vaadin publicada recientemente (Vaadin 10 beta) ofrece una perspectiva de lo que nos espera en la versión final. Estamos trabajando arduamente para lanzar una versión estable de Vaadin 10 y todo informe sobre defectos encontrados nos ayudarán en esta tarea.

Comenzar a usar Vaadin 10 es tan fácil como generar un nuevo proyecto en: https://vaadin.com/start#vaadin10. En caso de encontrar defectos, puedes crear “issues” en el respectivo repositorio de GitHub.

También puedes acceder al entrenamiento gratuito sobre Vaadin 10 en: http://pages.vaadin.com/free-vaadin-10-intro-training.

Adaptación al Español de la versión original https://vaadin.com/blog/vaadin-10-beta