Using Vaadin to Build Web User Interfaces in Java

by Alejandro Duarte

Typically, full-stack developers are fluent in JavaScript, HTML, CSS , and (when not using Node.js) a server-side programming language like Java, C#, Python, Go, or even C++. I worked as a full-stack developer for several years and enjoyed it! However, when I discovered that I could write web applications using only Java (plus some CSS), I was delighted by the experience. Vaadin is a web framework that enables exactly that—write server-side Java and get web user interfaces without having to use JavaScript or HTML. Let me show you how this powerful framework works.

If you ever used a framework or library like AWT or Swing to create Graphical User Interfaces (GUI) for desktop applications, you already know the idea behind Vaadin. If you need a button, you type new Button("Click me"), if you need a new text field, you type new TextField("Name"), and so on. You combine all these ready-to-use GUI components in layouts to build the GUI that you want.

In the case of web applications, you have to map a URL (or part of it) to a GUI component. When the URL is requested in a web browser, the mapped GUI component is rendered on the page. Here's a simple Vaadin GUI component (or view) mapped to a URL:

The code speaks by itself! This is a Java class that extends VerticalLayout, which means that all the GUI components that are added to it are going to be displayed in a vertical fashion (like a column). We have only one GUI component here, a button, with a click listener to react to click events in the browser. When the button is clicked, we show a notification that tells the current time in the server. Here's a screenshot of the application:

How does Vaadin work?

When the application is requested, Vaadin sends a client-side JavaScript file that acts as a client-side engine. All further communication goes through this engine using lightweight JSON messages that instructs the browser to add new GUI components, change the value in a GUI component, navigate to a different view, and any other interactions.

The same happens when an event is fired in the browser, for example, a click event. When a button is clicked, the client-side engine sends a request to the server with a JSON message that indicates the type of event (click) and which GUI component was clicked. The server delegates the request handling to a Servlet included in Vaadin (VaadinServlet) which in turn takes care of calling the code that you write as a click listener.

How to try it out?

If you want to try Vaadin out, create a new application at https://start.vaadin.com and import it into your favorite Java IDE. There are plenty of tutorials at https://vaadin.com/learn/tutorials and the official documentation at https://vaadin.com/docs. There's also my most recent Apress book, Practical Vaadin, which explains Java web development and Vaadin in great detail—from the fundamentals, to advanced features like Server Push, database connectivity, data binding, responsive design, client-side development, and integration with Spring Boot and Jakarta EE.

About the Author

Alejandro Duarte is a Software Engineer currently working for Vaadin Ltd as their Developer Relations Manager. This is his third book on Vaadin. Alejandro started to code at age 13 using the BASIC programming language on a black screen with a blinking cursor serving as the IDE. He quickly moved to the C and C++ languages—which he still loves and enjoys—and then to Java during his Computer Science studies at the National University of Colombia from where he graduated. Alejandro moved to the UK and later to Finland to foster his career in the open-source software industry. He became one of the well-known faces in the Vaadin and Java communities, having published articles and videos with hundreds of thousands of views in official Vaadin channels and other content portals, and presented technical topics at international Java conferences and Java User Groups. Alejandro splits his free time between his passion for the electric guitar and the photography world. 

This article was contributed by Alejandro Duarte, author of Practical Vaadin: Developing Web Applications in Java.