Migrate to Vaadin Flow before anyone else

Have you already migrated to Vaadin 10? Are you ready to enjoy all the benefits of Vaadin Flow once the final version is released? In this post, I will show you how to experiment with Vaadin Flow, with your current Vaadin 7 or 8 application.

This is not a migration reference, although there are some success stories with Vaadin Flow already (vaadin.com website for instance), but in many cases you might not be interested in going into production just yet. APIs are a bit different and some features are still not available. Nevertheless, it's a good idea to experiment with the latest framework locally to feel the difference, and evaluate the migration efforts needed by your team.

In my little experiment, I found that tailoring the properties of a Vaadin Framework 8 project is very complicated and prone to errors. The best alternative is to start with a fresh Vaadin Flow project, and carefully move the code piece by piece. So to start, I have this simple Vaadin Flow application created using the project base of the starter pack.

And in the MainView constructor, let's copy the default code generated by a simple Vaadin Framework 8 project:

	final VerticalLayout layout = new VerticalLayout();

	final TextField name = new TextField();
	name.setCaption("Type your name here:");

	Button button = new Button("Click Me");
	button.addClickListener(e -&gt; {
		layout.addComponent(
			new Label("Thanks " + name.getValue() + ", it works!"));
	});

	layout.addComponents(name, button);

	setContent(layout);

My IDE immediately started to complain about some API changes, such as:

	name.setCaption( .. );

is now:

	name.setTitle( .. );

and both:

	layout.addComponent( .. );
	layout.addComponents( .. );

are now overloaded in:

	layout.add( .. );

Also, there is no:

	setContent( .. );

it's also:

	add( .. );

And that's it, now it works! Almost the same code style, but the end result is using Web Components and a completely different client-side code.

For the second experiment, I’ll make a polymer-based application to run inside Vaadin 10. To make things simple, I will just copy the content of the src folder into webapp/frontend/src/ folder of our Vaadin 10 project.

Following this, in the ExampleTemplate.java file, I will modify the Tag and HTML Import to be:

	@Tag("polymer-wc-app")
	@HtmlImport("src/polymer-wc-app/polymer-wc-app.html")

Finally, the constructor of MainView should be:

	ExampleTemplate template = new ExampleTemplate();
	add(template);

And that’s pretty much it again, now restart the application to see the full demo.

Is it that simple? No. It's not optimal to copy the code block by block, many APIs need to be updated, Layouts have got a different concept now, and there is no more Navigator but Router which is again completely different.

Also, if you have some custom servlet configurations or deep modifications in VaadinService, or if you are using custom components, then some more complex migration tasks need to be done. But hopefully this gives you a good experimental base on how coding for the newest framework will look like, while we wait for the final release, documentation, and migration tools.

In case of a Polymer project, it’s a bit simpler from a front-end point of view, but you will have to take into consideration the following:

Import all external dependencies that do not come with Vaadin 10.
The demo I showed hosts the front-end application inside Vaadin 10, but does not show how to connect the front-end with the backend using java.
In some cases, it’s advised to replace Polymer tools with native Vaadin Flow tools, such as iron-ajax. In many cases, you don’t need to fetch the data on the client side code anymore.

Have you tried Vaadin Flow? What's your experience with it so far?