Aplicación Demo Vaadin 10 + Spring: estadísticas de la Copa Mundial Rusia 2018

20 mayo, 2020

Para probar algunas nuevas e interesantes tecnologías web, decidimos crear una pequeña aplicación demo que muestre ideas que podrían ayudar a un desarrollador cuando intente decidir cuáles usar en un nuevo proyecto. Esto lo realizamos, teniendo en mente el objetivo de que sea responsiva, que permita mostrar información acumulada y en tiempo real del Mundial de Fútbol que actualmente se desarrolla en Rusia.

Tecnologías

Las tecnologías elegidas fueron:

Vaadin 10: La nueva versión de este popular framework, basada en los nuevos estándares impulsados por los browsers más populares.
Spring Framework: El framework de inyección de dependencias estándar, que actúa como la columna vertebral de la mayoría de los proyectos en java actuales.
REST API: Nuestro proyecto utiliza la API que puede encontrarse aquí. La misma expone los datos como una API REST entregando la información en formato JSON.

Características

Esta es la lista de las principales características de la aplicación:

Es responsiva, mostrará correctamente la información independientemente del dispositivo que se utilice. Esto es posible gracias a Vaadin y Polymer.
Dependiendo del dispositivo en que navegues el sitio (especialmente dispositivos móviles), puedes agregar la aplicación a la pantalla de inicio, para que se vea como una aplicación nativa. El único inconveniente es que no funcionará en modo offline (aún, capaz pronto).
Se pueden seguir los resultados de los partidos en tiempo real. Utilizando WebSockets, la aplicación mantiene un canal de comunicación abierto entre el navegador y el servidor, por lo que las actualizaciones pueden ser informadas al cliente tan pronto como se reciban de la API

Construcción

Se necesita tener un buen punto de inicio para comenzar un nuevo proyecto. Para nosotros, ese punto de inicio fue el starter Vaadin Base Project with String. Al seleccionar esta opción, nos beneficiamos del hecho de que ya tiene una configuración Spring probada y en funcionamiento, por lo que la decisión fue fácil.

Responsividad

Alcanzamos esta meta, trabajando en paralelo en el desarrollo de un nuevo addon para Vaadin que permite construir nuevas aplicaciones usando una estructura simple que se encarga de construir los elementos visuales habituales presentes en una aplicación responsiva: hamburger menu, paper-cards y más.

Además, utilizamos algunas técnicas CSS como media queries para completar los toques finales.

PWA

Para permitir que la aplicación pueda agregarse a la pantalla de inicio de un dispositivo, y se muestre como una aplicación nativa, generamos un manifiesto PWA, con algunas propiedades que puede imitar fácilmente, utilizando una herramienta como el App Manifest Generator.

Actualizaciones en tiempo real

Esto es realmente fácil de implementar, gracias a la tecnología @Push de Vaadin, la cual está basada en Websockets. Solamente agregando una simple anotación al layout principal y la aplicación cobrará vida.

Puede aprender más sobre esta tecnología en la documentación oficial de Vaadin.

Roadmap

Estas son las funcionalidades que quisiéramos poder implementar en un futuro cercano:

Soporte para mensajes offline que informen qué se necesita conectividad para utilizar la aplicación.
Soporte para notificaciones.
Localización.

Se puede acceder al demo online, visitando: http://worldcup.flowingcode.com/ … ¡Intenta agregarla a la pantalla de inicio de tu dispositivo móvil!

Si deseas compartir algún feedback sobre la aplicación, no dudes en crear issues en nuestra página de GithHub.

Finalmente, te dejamos algunos links interesantes sobre estas tecnologías:

Así que eso es todo, disfruta de la aplicación y, si quieres, comparte tus opiniones al respecto.

By Martín López

Ingeniero en Sistemas, programar es mi pasión. Tengo experiencia en el ecosistema Java en General, y frameworks tales como Vaadin, Spring y Hibernate. Siempre dispuesto a ayudar a las empresas a diseñar workflows de construcción y como usar las herramientas correctas para construir software de alta calidad.