Imagine a bacon-wrapped Ferrari. Still not better than our free technical reports.
See all our reports

The Curious Coder’s Guide to Java Web Frameworks: Vaadin

Get the full report

Psst! Want to see the 8 most popular Java Web Frameworks compared? Since this post here, we’ve made The Curious Coder’s Java Web Frameworks Comparison: Spring MVC, Grails, Vaadin, GWT, Wicket, Play, Struts and JSF. Grab the complete report in HTML and/or PDF. Win!

See how *Vaadin* ranks in the Full Report


This is the first post in our review of Java web frameworks. Traditionally, writing visual web applications has required large amounts of time, knowledge and boilerplate code. Many Java frameworks now exist to ease this pain and make a developer’s life better and easier. At ZeroTurnaround, we’re all about developer productivity and we have learnt about web frameworks while we add their support in JRebel. (Btw, if you download JRebel now you could win a trip to NASA, CERN or CES!)

The first framework we will look at in our series will be Vaadin. A web framework with an awesome name that people tend to remember.

Vaadin

Framework Goals

Here are snippets of the goals as taken from the Vaadin book:

Vaadin’s ambition is to be the best possible tool when it comes to creating web user interfaces for business applications. It is easy to adopt, as it is designed to support both entry-level and advanced programmers, as well as usability experts and graphic designers.

Because our goals are high, the focus must be clear. Vaadin is designed for creating web applications. It is not designed for creating websites or advertisement demos.

We have chosen to emphasize robustness, simplicity, and maintainability. This involves following the well-established best practices in user interface frameworks and ensuring that our implementation represents an ideal solution for its purpose without clutter or bloat.

The Web is inherently document-centered and very much bound to the declarative presentation of user interfaces. The Vaadin framework frees the programmer from these limitations. It is far more natural to create user interfaces by programming them than by defining them in declarative templates, which are not flexible enough for complex and dynamic user interaction.

There should not be any limits on what you can do with the framework: if for some reason the user interface components do not support what you need to achieve, it must be easy to add new ones to your application. When you need to create new components, the role of the framework is critical: it makes it easy to create re-usable components that are easy to maintain.

I want it! How can I get it?

Let’s start at the Vaadin site, which is a nice clean site and easy to access the downloads as well as see the documentation available, which we’ll look at later. The Vaadin download page provides three download options, for build integration via Maven, Ant + Ivy, IDE integration which looks to focus on the eclipse platform although others have provided plugins for both the IntelliJ and NetBeans IDEs, and finally the direct download which allows you to manage your libraries for yourself.

As I’m an Eclipse user, I went to the eclipse marketplace, searched for Vaadin, and by the magic of p2 (ZZZzzzzzzz) I had the Vaadin environment set up and ready to use. To get started, I created a new Vaadin Project, which the plugin provides. The plugin also creates a default class in the project which extends the UI Vaadin class. The UI class has a single abstract method, init, which our new class implements with some sample code that adds a button to the screen and when clicked will output some text to the screen. This is the main method driven by the Vaadin framework on the server which sets up the UI. Let’s take a look at the code:

   final VerticalLayout layout = new VerticalLayout();
   layout.setMargin(true);
   setContent(layout);
 
   Button button = new Button("Click Me");
   button.addClickListener(new Button.ClickListener() {
      public void buttonClick(ClickEvent event) {
         layout.addComponent(new Label("Thank you for clicking"));
      }
   });
 
   layout.addComponent(button);

Screenshot of results:

VaadinBasic

You’ll notice Vaadin uses an component structure whereby when you create a Vaadin component, such as a Button, you’ll need to add it to a parent object which dictates where it will appear in on the screen. Every component needs to be added to a parent to attach it to your layout. Note that the button uses an anonymous class as a listener to react to the uses as the button is clicked. So initially, it looks good – not much boiler plate code so far, let’s try with a bigger example:

   VerticalLayout leftPanel = new VerticalLayout();
   HorizontalSplitPanel root = new HorizontalSplitPanel();		
   leftPanel.addComponent(upButton);
   leftPanel.addComponent(fileList);
   root.addComponent(leftPanel);
   root.addComponent(fileView);
   setContent(root);
   fileList.setSelectable(true);
   fileList.setImmediate(true);
   upButton.addClickListener(new ClickListener() {...});

Screenshot of results:

FileManager

Now I have a FileManager application capable of displaying file contents. Nesting multiple layouts can become painful, so be wise and use proper tools like a GridLayout or something. Or just switch to the graphical tool and enjoy your life.

Lets create a new class called a Vaadin Composite, which the Vaadin plugin provides. We can view the class in two ways, the source view and the design view. The design view allows us to drag and drop components onto a canvas and provide the logic code behind each component. The code which creates and sets up the UI for each component is created for us, magically, which we can see back in the source view. There are advantages and disadvantages to this approach. Yes, you can rapidly create a graphical interface whereby you just need to code behind the components, but the problem is the generated code. It’s extremely hard to create generated code which is maintainable and easily readable in the source. This isn’t too much of a worry if you only deal with the graphical tool, but still, something to think about.

Vaadin’s data model specifies different components, which are event aware, so you can add your own listeners and react to events how you wish. This is how you can react to events that happened in UI. Conversely, the model has data source abstractions, so your UI components don’t need to store values of their model themselves. Which means that you can attach many components to the same data-source and when the UI needs data again it will automatically pick up and rerender new data. So your state exists on the server side, rather than the client side, which allows you to encapsulate the data in one place and your views will access that data in a consistent fashion.

Code Maintenance

So you want to change your Vaadin implemented UI but don’t want to change all the code in the world? Well, it’s not actually that bad, as many of the Vaadin components share many of the same characteristics, so if you wanted to switch from one component to another to capture input slightly differently, e.g. from a drop down list to a table of elements, it is surprisingly easy to do so. Very often it’s just a case of switching the class names around and maybe touch up one or two attributes and you’re good to go.

If Vaadin doesn’t provide the components you desire out the box, you have a couple of options. Firstly you should look at the Vaadin directory, which is a component repository. Do a quick search there to see if someone else has implemented what you require. If they have, you simply need to download the JAR and add it to your project and you’re good to use it straight away. At the time of writing this post, there are 365 components in the directory for you to use, one for every day of the year! Otherwise, write your own and contribute it to the directory for others to use.

Themes

Vaadin themes are collections of layouts for components, custom images and CSS, The whole idea to have different themes is to separate the logic of componenets from their look and feel and being able to switch themes without changing the logic.

A theme follows a specific directory layout, and with them you can specify the css for the default Vaadin components or create custom components.

One of the coolest things about themes is that you can inherit from existing themes, so when you need just to tweak a bit, you don’t need to create a monster or hack themes installed by default. This means you can inherit from a theme and just add the missing pieces.

Here is an example of the Runo Theme:

RunoTheme

What’s under the covers?

Vaadin uses GWT and hides a lot of the nasty boiler plate from you the developer, and there is a lot. The difference between what you need to produce if you were to code in GWT and Vaadin is very noticeable and Vaadin does take you away from a lot of the pain many GWT developers have experienced, particularly as your projects get larger. Vaadin has used GWT for many years now, but will now use GWT as a core component in version 7.

The GWT and GWT tools forks which are maintained and used by Vaadin give the opportunity to choose which GWT decisions they agree with and implement and can adapt vaadin to GWT and GWT to Vaadin faster than those who rely on the usual GWT builds and distribution.

Want to know more?

You’re in luck, because one of the really positive points to Vaadin is the supporting documentation and demos. There’s even a book which is the Vaadin reference guide. They really make it easy to learn Vaadin and get started from scratch. If the documentation and demos aren’t detailed enough, or you have a specific question, you can ask at the forums also on the Vaadin site. The forums are well monitored and the community looks strong from the response times and the content. StackOverflow also has many Vaadin questions, but it looks like for a quick response you’re better off heading straight for the Vaadin forums.

Browser Compatibility

Vaadin handles the browser compatibility for you, so you don’t have to clutter your code. The framework supports IE, Safari, Chrome, Firefox and Opera, as well as Android and iOS mobile browser support.

What does it cost?

Vaadin is free for use, which is great! You can pay extra for official support, professional services and outsourcing which are packaged up at $90 per month per developer, or the full package from $9900 per year.

How can I contribute?

You are able to submit patches to the core Vaadin framework, which is nice :) However, most of the contributions happen in the Vaadin directory which acts as a component repository and allows you to submit your own components for you and others to use. This means there are also others contributions you can bring into your environment. The components which have been contributed by others live in one of four buckets, Certified, Stable, Experimental and Beta. These buckets give you confidence in the stability of the code.