Best practices for structuring Vaadin Flow code?

Our project’s Vaadin code feels like a hot mess and it’s frustrating to work with.
Can you tell me how you structure your code to make it readable and maintainable?
Are there any open source projects that I can use as a reference?

Mainly I’m looking of a way to enforce separation of concerns. In that regard I really like how Vue separates template, script and styling. I only just discovered that you can also use templates in Vaadin but if there’s a way to do it in pure Java as well I’d like to try that first.

Some pain points:

  • separating templating, styling and logic
  • making api calls and updating the ui
  • using the component lifecycle correctly (onAttach vs constructor)

I know the docs probably contain all the answers but it’s difficult for me to envision how to implement them in a real project. It would be easier for me to see an example of how to do it correctly and emulate it.

Most (if not all) Vaadin enterprise grade applications are built in non-accessible private repositories of companies… so it’s pretty hard to get you an example.

Some good examples publicly available are from:

In the end most of your questions can be answered with “it depends” and “how you like it”. Even building views in the constructor vs. life circle is a big topic by its own. Probably the only easy answer I can give you: put your css in your theme and don’t (overuse) the getStyle()-API - this can quickly get really messy.

1 Like

Thanks, I will take a look.

Here is an example application that I used for an internal architecture training here at Vaadin:

I realize it may be difficult to decode “out of context” (without the accompanying presentation and underlying theory), but it demonstrates making backend calls, updating the UI and using the component lifecycle.

Another example application from the same training demonstrates how you can structure your views to emphasise code reuse (by iteratively expanding the same view 6 times).

We’re currently working on adding more documentation about how to build and structure real-world applications using Vaadin, but it will take some time unfortunately.

Feel free to ask any questions you may have about those demo projects and I’ll try to answer them as well as I can.

-Petter-

2 Likes