Learn How To Implement Web GUIs in Java

The world of JavaScript offers useful and fun-to-use web frameworks, there's no doubt about it. For Java developers, there's an interesting alternative—the open-source Vaadin framework. With it, you can easily implement a Graphical User Interface (GUI) for the web using only the Java programming language and nothing else. No need to write a line of HTML or JavaScript. A picture is worth a thousand words:

How Does Vaadin Work?

In the previous screenshot, you can see a Java class on the left. This code runs on the server, for example, Apache Tomcat, Eclipse Jetty, or any other servlet container.

You can use the API provided by the framework to create User Interfaces (UI) components such as text fields, combo boxes, data grids, date pickers, upload fields, and many others. You can combine these components to build a view (also known as page or UI) using layouts to place the UI components vertically, horizontally, or in any custom way using CSS.

In the previous example, we created a TextField and a Button both added into a VerticalLayout. Once the view is ready, you can expose it through a URL using the @Route annotation. In the example, we made it available at http://localhost:8080/hello by using @Route("hello").

A Vaadin application is a Java web application. The framework provides an Servlet implementation (VaadinServlet) that handles HTTP requests and responses for you. This servlet scans the Java classes marked with the @Route annotation to show the correct view in the browser. The first time a Vaadin application is requested, Vaadin responds with a lightweight JavaScript file that serves as a client-side engine. This engine takes care of handling the events in the browser and sending them to the server in the form of JSON messages. The VaadinServlet handles the requests and similarly returns JSON responses to the client-side engine. The engine then takes this message to update the elements in the page that need to be updated, if any. If the client-server communication was a conversation, it'd look something like this:

(The user clicks a button in the browser)

Client-side Engine: Hey VaadinServlet, the user clicked the button with ID 5.

VaadinServlet: Sure. Let me check if there are any click listeners on that button... Yeah, there's one, let's execute the listener... Done. Alright Client-side Engine, it seems the listener wants to add a notification with the text "Thanks for clicking".

Client-side Engine: Cool, I'll use the DOM here in the browser to add that notification to the page.

This, of course, is a simplification, but you get the idea.

Behind the scenes, Vaadin uses the HTTP session to store a component tree. This contains the state of the UI. Things such as which components form the view and what are their states (enabled/disabled, caption, value, etc). This offers a layer of security worth mentioning. Since the UI logic resides in the server, it's not exposed to attackers. Validations are performed on the server. For example, if a Button is disabled (using setEnabled(false)), this is not just a cosmetic feature in the browser—the server won't run any logic in click listeners added to a button that is not enabled, preventing attackers to use the developer tools in the browser to change the enabled state or to call the VaadinServlet to simulate a click event.

Is Vaadin Free To Use?

Yes. Vaadin is an open-source framework published under the Apache License 2.0. You don't have to buy anything to build full-blown web applications with it.

There are commercial components that boost productivity, but they are optional. For example, there's a visual designer and a CRUD component that help you to build views even faster. You can try these components for free before getting a subscription.

Is Vaadin a Replacement for JSP and JSF?

Yes. It could be used as a replacement for JSP, JSF, and even JavaScript frameworks like Angular. Many Vaadin customers have successfully migrated from these technologies to Vaadin.

Does Vaadin Support Spring and Jakarta EE?

Yes. Vaadin has official integrations with Spring and Jakarta EE (formerly Java EE). You can add Vaadin as a dependency when you create a new Spring Boot project using the Spring Initializr. For Jakarta EE, you can download a simple Hello, World example that uses Jakarta EE. At the time of writing this, only Jakarta EE version 8 is supported.

Who Uses Vaadin?

Many Fortune 500 companies use Vaadin as well as successful startups. This sums up to more than 200.000 developers worldwide and this number grows every week. The online community is active.

Follow the quick start tutorial and then try the in-depth course.