DEV Community

Said Olano
Said Olano

Posted on

Vaadin: Building Modern Web UIs with Pure Java (2026-08-31 00:00)

#vaadin #java #webdev #frontend

Vaadin: Modern Web UI Framework

Building modern web applications typically requires juggling multiple technologies: JavaScript frameworks for the frontend, REST APIs for communication, and a backend language for business logic. Vaadin offers an alternative approach that lets Java developers build sophisticated web UIs without leaving the JVM.

What Is Vaadin?

Vaadin is an open-source framework for building web applications in Java. Its flagship product, Vaadin Flow, allows developers to construct entire user interfaces server-side using Java, while the framework handles the client-server communication automatically.

The key value proposition is simple: write your UI in Java, and Vaadin generates the necessary HTML, CSS, and JavaScript for you. This makes it especially attractive for teams that want to build business applications quickly without deep frontend expertise.

Core Concepts

Components

Everything in Vaadin is a component. Buttons, text fields, grids, and layouts are all Java objects you instantiate and configure programmatically.

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        TextField nameField = new TextField("Your name");
        Button greetButton = new Button("Greet", event -> {
            Notification.show("Hello, " + nameField.getValue() + "!");
        });

        add(nameField, greetButton);
    }
}
Enter fullscreen mode Exit fullscreen mode

This example creates a view with a text field and a button. When clicked, the button shows a notification—all defined in server-side Java.

Routing

Vaadin uses annotation-based routing. The @Route annotation maps a view to a URL path.

@Route("dashboard")
public class DashboardView extends VerticalLayout {
    // ...
}
Enter fullscreen mode Exit fullscreen mode

Navigating to /dashboard renders this view. You can also define parent layouts for consistent navigation structures.

The Grid Component

One of Vaadin's most powerful components is the Grid, ideal for displaying tabular data.

Grid<Person> grid = new Grid<>(Person.class);
grid.setItems(personService.findAll());
grid.setColumns("firstName", "lastName", "email");

grid.addColumn(person -> person.getAge() + " years")
    .setHeader("Age");
Enter fullscreen mode Exit fullscreen mode

The Grid supports sorting, filtering, lazy loading, and inline editing out of the box, which dramatically reduces the boilerplate needed for data-heavy applications.

Data Binding

Vaadin's Binder class connects UI fields to a data model, handling validation and conversion.

Binder<Person> binder = new Binder<>(Person.class);

binder.forField(emailField)
      .withValidator(new EmailValidator("Invalid email"))
      .bind(Person::getEmail, Person::setEmail);

binder.setBean(currentPerson);
Enter fullscreen mode Exit fullscreen mode

This declarative approach centralizes validation logic and keeps your UI code clean.

How It Works Under the Hood

When a user interacts with a Vaadin application, events are sent to the server over a WebSocket or HTTP connection. The server updates the UI state and sends back only the changes needed to update the browser DOM. This server-driven model means:

  • Business logic stays on the server, improving security.
  • No separate REST API is required for the UI.
  • State is managed in Java, simplifying the mental model.

The tradeoff is increased server memory usage, since each active session maintains UI state on the server.

Hilla: The Full-Stack Alternative

For teams that prefer a reactive frontend, Vaadin offers Hilla, which combines a Spring Boot backend with a React frontend. Hilla generates type-safe TypeScript endpoints from your Java services, bridging the gap between server and client while giving you full control over the frontend.

@Endpoint
@AnonymousAllowed
public class GreetEndpoint {
    public String sayHello(String name) {
        return "Hello, " + name;
    }
}
Enter fullscreen mode Exit fullscreen mode

Hilla automatically generates the corresponding TypeScript client, enabling type-safe calls from React components.

When to Choose Vaadin

Vaadin excels in specific scenarios:

  • Internal business applications and admin dashboards where development speed matters.
  • Java-centric teams without dedicated frontend developers.
  • Data-intensive applications that benefit from ready-made components like Grid.

It may be less suitable for public-facing sites requiring maximum client-side performance or highly customized designs, where a dedicated frontend framework offers more flexibility.

Getting Started

The fastest way to begin is with the Vaadin starter:

curl https://start.vaadin.com/dl -o my-app.zip
unzip my-app.zip
cd my-app
./mvnw
Enter fullscreen mode Exit fullscreen mode

Alternatively, add the Vaadin dependency to an existing Spring Boot project via Maven or use the official project generator at start.vaadin.com.

Conclusion

Vaadin provides a compelling productivity boost for Java developers building web applications. By keeping UI logic in Java and abstracting away the client-server plumbing, it lets teams ship functional, professional interfaces quickly. Whether you choose the server-driven Flow model or the full-stack Hilla approach, Vaadin remains a strong option worth evaluating for your next enterprise web project.

Top comments (1)

Collapse
 
marcusykim profile image
Marcus Kim •

The Grid's built-in lazy loading and inline editing, paired with Binder's validation and conversion, explains why Vaadin can be unusually productive for internal tools. The important architectural cost is Flow keeping UI state per active session, so I'd test realistic concurrency, reconnect behavior, and horizontal scaling before the application becomes operationally important. Hilla is a sensible escape hatch when a React client or finer control over browser performance starts to matter, but that choice also brings back the frontend boundary Flow was meant to remove.