Vaadin 10: Our first impression about the new platform
Every year, students from all over the world are competing by building racing cars at the Formula Student. To convince the judges, who are mostly sponsors from the automotive sector, they also must provide a fully developed business plan. Until now, the judging and evaluation process was done by filling out tons of papers — but this year, we provide the Formula Student Germany event with a web-based mobile judging application based on Vaadin 10.
Development was done with all the new cool stuff: Agile, DevOps and in the Cloud — It had to be fast! It took us 15 person days to setup the environment and implement the application for mobile judging.
The magic behind
Vaadin 10 is a platform composed of Vaadin Elements and Vaadin Flow. Vaadin Elements provides a new set of UI components that were built with mobile use and accessibility in mind. These components are distributed as browser-native Web Components and can be used in any frontend project — without the need to use Vaadin Flow.

Vaadin Flow is the next-generation Java web framework. That means you implement web based UIs directly with Java. This framework handles server-browser communication, routing, data binding, validation, and everything else. You don’t need to take care about theses tasks. As before, it runs on the JVM, giving you access to all the tools, languages, and libraries you love. With Vaadin Flow you get direct access to the DOM so you can extend or integrate components without additional build steps.
We have used Vaadin 10 on top of Spring Boot, Docker, ECS and other services from AWS. We worked in an End-to-End process — of course we had a Continuous Delivery Pipeline. By using it for development and production stage, we were able to get our software tested and deployed in minutes.
Our first impressions
Vaadin 10 being new, promises some cool new features. The key idea is that it lets you forget about the web and you can develop a web application much like you would program any java application.
@Route("")
public class MainView extends VerticalLayout {
public MainView(@Autowired HelloService service) {
TextField name = new TextField("Name");
Button button = new Button("Say hello", click ->
service.sayHello(name.getValue()));
add(name, button);
}
}Some of our developers being new to the technology had to learn from scratch. But Vaadin is built in such a way that it makes it easier for a newbie developer to start implementing with ease. Mobile development is always the pain point for developers who are not confronted with mobile development every day. The mobile-first components are just working — that was a relief and the components are looking really good.
The PolymerTemplates are cool, especially for someone who has some experience in hybrid application development based on web frameworks. Data and events can be binded to Java and HTML without much effort. Vaadin Flow is taking care of it.
Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub.
For the first time Spring Framework is officially supported — that means you can now use the inversion of control container and of course other libraries from the Spring ecosystem.
The learning curve is a bit steep because the official documentation is sometimes difficult to understand e.g. if you have detailed questions.
Conclusion
Vaadin 10 is a great platform that does a lot of work for you. It is a powerful tool, which can be used to build data-driven web applications very quickly. The development of this application was pretty fun and with the help of the Vaadin Platform we could deliver a new web application in a very short time with a real benefit for the judges at the Formula Student Germany 2018.

