Labs | Vaadin

Client side views in Vaadin 15 applications

Written by Artur Signell | December 10, 2019

Vaadin 15 handles routing mainly on the client side and only delegates to the server for server side routes. Why? So we can add client side views easily.

In Vaadin 14, you can add a template based view using a two step process:

  1. Create the HTML template

  2. Create a Java class for the template, so it can be added as a @Route or inside another component

With Vaadin 15, this becomes:

  1. Create the HTML template

If you want to use the template as a route, then add the tag to the router configuration.

As long as a main layout is implemented as a template and not using the Java API, you can share the layout between client side and server side views.

To demonstrate this, we took the Business App Starter from vaadin.com/start, upgraded to V15 and changed to use Spring Boot, replaced the main layout, menu and app bar with client side versions and rewrote the home and statistics views as a fully client side view.

The result

The app, which looks visually the same as before, is running here: https://labs.vaadin.com/business-hybrid

The source code can be found in GitHub. Of particular interest might be:

Try it out

To try out Vaadin 15, go to https://start.vaadin.com and select 'Typescript' for at least one view.

You can also use the CLI to get an empty project

npx @vaadin/cli init  --pre hello-vaadin15

What will you use this for? Do you have frontend developers who want to work on your Vaadin project? Do you need client side UI logic for a particular view?

Do tell us more so we know in which direction to take this.