Vaadin 10 + Spring Demo application: World Cup Rusia 2018 stats

To test out some new interesting web technologies, we decided to go ahead and build a small demo application that will point out ideas that could potentially help a developer when trying to decide which ones to use in a new project. We decided to create a small application with responsiveness in mind, that would show real time and aggregated data about the current Football World Cup event that is taking place in Russia.

Technologies

The chosen technologies where:

• Vaadin 10: The brand new version of the popular framework, that is powered by the new standards being pushed by the most popular browsers.
• SpringFramework: The almost de-facto standard dependency injection framework, that stands as the backbone of almost every java project that are currently being built.
• REST API: Our project uses the API available here. That API exposes data as a REST API with information being delivered in JSON format.

Features

This is a short list of currently supported features:

• The application is responsive, it will correctly display information regardless the device being used. This feature is achieved by using Vaadin & Polymer technologies.
• Depending on the device that you're browsing the site (especially mobile phones), you can add the application to the home screen, so it will look like a native application. The only catch is that it will not function in offline mode (yet, maybe sooner).
• You can follow the matches in realtime. Using WebSockets, the application maintains an opened communication pipe between the browser and the server, so the updates can be informed to the client as soon as they are received from the API

Construction

You need to have a good starting point to start any new project. For us it was the Vaadin Base Project with String starter. By choosing this option, we could benefit of the fact that it already has a tested and working Spring configuration, so it was an easy decision. 

Responsiveness

We achieved this goal, by starting also a parallel development: a new Addon for the Vaadin platform that helps you to build new applications using a simple skeleton that takes care of building the usual visual elements present in a responsive application: hamburger menu, paper-cards and more.

Besides that, we also used some CSS techniques as media queries to make the final touches.

PWA

To allow the application to be added to the home screen of your device, and then showing it as a native application, we generated a PWA manifest, with some properties that you can easily mimic, by using a tool like the App Manifest Generator.

Realtime updates

This feature is really easy to implement, given Vaadin's @Push tecnology, based on websockets. Just adding a simple annotation to your main layout will give life to your bubbling screen.

You can learn more about this technology in Vaadin's official documentation.

Roadmap

These are the things we would like to implement in the near future:

• Support for offline message that tells you that you need connectivity to use the app
• Support for notifications
• Localization

You can reach the demo online, by accessing: http://worldcup.flowingcode.com/ ... Try adding it to the home screen of your mobile device!

If you want to give us feedback, feel free to create issues in the GithHub page.

Finally some interesting links regarding these technologies:

• Documentation about Vaadin 10 Flow
• How to consume REST services with Spring Boot
• Creating a PWA Application
• Server push configuration

So that's it, enjoy the app, and if you want share your thoughts about it!