First Impressions On Vaadin

Lately I have been working a bit with Vaadin, a web UI framework for business applications. The framework offers an experience similar to Swing. ‘Similar’ is a very important word here. Vaadin uses a component based approach as well, but it is not at all a carbon copy of Swing.

Vaadin Logo

All Java

The main advantage about Vaadin is that its framework is written in Java, meaning that you could place your UI logic right next to your Java back-end logic. No need to hop from Java to Javascript or whatever other front-end programming language.

All of your UI code will run server-side. Vaadin will take care of server-client communication.

There is one small catch though. Custom styling is done in CSS (scss), so if you want to create a personalized theme, you will have to tweak around quite a bit in CSS files.

Strengths & Shortcomings

Vaadin’s biggest advantage is that you can use it to quickly create decent web application UI. You can even create your own theme fairly easily.

The framework is also struggling with some frustrating flaws. By default, Vaadin lacks the possibility to add Components to a Grid. If you want to do that anyway, you would have to install an addon. If the addon uses a widget set, it isn’t even a straight-forward installation.

Besides that I can provide a good example of an annoying flaw in Vaadin. As I was developing a Window that contained a Grid, I had the requirement to bind a boolean value to a column. The column wouldn’t just contain the boolean value as a String, but it was to be displayed as an OptionGroup with two values, ‘yes’ and ‘no’, with the correct value selected based on the boolean’s value.

The binding process went as follows: I defined a BeanItemContainer and from that I created a GeneratedPropertyContainer. On that container I performed calls of addGeneratedProperty() (for the OptionGroup I made use of a custom PropertyValueGenerator returning the OptionGroup to be displayed) . After all that I called setContainerDataSource() on the Grid. That was binding done, or at least I believed so. Once checking out the result in the UI, I noticed all cells were properly bound to their respective data, except for the OptionGroup one. Even more bizarre was the fact that at the time that a new record was added to the Grid, the data was correctly bound to all the OptionGroup cells. Somehow the Grid didn’t initialize correctly, I figured.

So it was time to find some workaround to this issue. Of course things went all smooth when using a CheckBox in stead of an OptionGroup, but that wasn’t really the requirement. Anyway, while playing around with Vaadin in some other personal project, I found out about vaadin-push. That is basically a dependency that enables you to update the UI from a different thread.

I ultimately fixed the issue by calling grid.getUI().push() right before calling grid.setColumns(). That did the trick, allthough it doesn’t look quite right.

Conclusion

I have been playing with the Vaadin framework for a few weeks now, and I’m sure I haven’t seen half of it yet. Overall I can say I’m satisfied with it, except for some frustrations that can arise on banal aspects. It is really easy to write UI fragments that are easy to read. It isn’t really hard to get into the basics. I also have to say it runs absolutely smoothly on any of my Tomcat configurations.

Overall, the framework is an excellent tool for web developers, but it is also an imperfect one. However, it is good to know that the company takes note of what developers are saying and they are always ready to help out.

If you’d like to see what Vaadin looks like, I strongly suggest you to play around with the Vaadin Sampler.