Vaadin is a powerful Java framework that enables developers to build modern web applications entirely in Java, without needing to write HTML, CSS, or JavaScript. It's particularly valuable for desktop-style applications that need to run in a browser.

What is Vaadin?

Vaadin provides a component-based architecture where you build web UIs using pure Java. The framework handles:

• Client-Server Communication: Automatic AJAX updates
• Component Rendering: Converts Java components to HTML/JavaScript
• State Management: Maintains UI state on the server
• Theming: Consistent styling across components

Key Features

• 100% Java: No frontend coding required
• Type-Safe: Compile-time error checking
• Rich Component Library: 50+ pre-built UI components
• Progressive Web App (PWA) Support: Offline capabilities
• Security: Built-in protection against common vulnerabilities
• Integration: Easy integration with Spring, CDI, and other Java frameworks

Getting Started

Dependencies (Maven)

<properties>
<vaadin.version>24.3.0</vaadin.version>
</properties>
<dependencies>
<!-- Vaadin Core -->
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-core</artifactId>
<version>${vaadin.version}</version>
</dependency>
<!-- Spring Boot Integration (optional) -->
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-spring-boot-starter</artifactId>
<version>${vaadin.version}</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>prepare-frontend</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>

Basic Vaadin Application

Example 1: Simple Vaadin Application

package com.example.vaadindemo;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
@Route("") // Maps to root URL
@PWA(name = "My Vaadin App", shortName = "MyApp")
public class MainView extends VerticalLayout {
public MainView() {
// Create components
TextField nameField = new TextField("Your name");
Button sayHelloButton = new Button("Say Hello", 
event -> sayHello(nameField.getValue()));
// Add components to layout
add(nameField, sayHelloButton);
// Center the layout
setAlignItems(Alignment.CENTER);
setJustifyContentMode(JustifyContentMode.CENTER);
setSizeFull();
}
private void sayHello(String name) {
if (name == null || name.trim().isEmpty()) {
Notification.show("Please enter your name");
} else {
Notification.show("Hello, " + name + "!");
}
}
}

Example 2: Complete Desktop-Style Application

package com.example.vaadindemo;
import com.vaadin.flow.component.*;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.textfield.EmailField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.data.binder.ValidationException;
import com.vaadin.flow.router.Route;
import java.util.ArrayList;
import java.util.List;
@Route("desktop")
public class DesktopApplication extends VerticalLayout {
private final List<Customer> customers = new ArrayList<>();
private final Grid<Customer> customerGrid = new Grid<>(Customer.class);
private final Binder<Customer> binder = new Binder<>(Customer.class);
// Form fields
private final TextField firstName = new TextField("First Name");
private final TextField lastName = new TextField("Last Name");
private final EmailField email = new EmailField("Email");
private final TextField phone = new TextField("Phone");
public DesktopApplication() {
initializeUI();
setupGrid();
setupForm();
loadSampleData();
}
private void initializeUI() {
// Application header
H1 header = new H1("Customer Management System");
header.getStyle().set("color", "var(--lumo-primary-text-color)");
// Create tabs for different sections
Tab customerTab = new Tab("Customers", new Icon(VaadinIcon.USERS));
Tab reportsTab = new Tab("Reports", new Icon(VaadinIcon.CHART));
Tab settingsTab = new Tab("Settings", new Icon(VaadinIcon.COG));
Tabs tabs = new Tabs(customerTab, reportsTab, settingsTab);
tabs.setWidthFull();
// Main content area
VerticalLayout contentArea = new VerticalLayout();
contentArea.setSizeFull();
contentArea.setPadding(false);
// Add everything to main layout
add(header, tabs, contentArea);
setSizeFull();
setPadding(false);
// Tab selection handler
tabs.addSelectedChangeListener(event -> {
contentArea.removeAll();
if (event.getSelectedTab() == customerTab) {
contentArea.add(createCustomerManagementLayout());
} else if (event.getSelectedTab() == reportsTab) {
contentArea.add(createReportsLayout());
} else if (event.getSelectedTab() == settingsTab) {
contentArea.add(createSettingsLayout());
}
});
// Show customer tab by default
contentArea.add(createCustomerManagementLayout());
}
private Component createCustomerManagementLayout() {
HorizontalLayout layout = new HorizontalLayout();
layout.setSizeFull();
layout.setSpacing(true);
// Form panel
VerticalLayout formLayout = new VerticalLayout();
formLayout.setWidth("400px");
formLayout.setPadding(true);
formLayout.getStyle().set("border", "1px solid var(--lumo-contrast-20pct)");
H1 formTitle = new H1("Customer Form");
Button saveButton = new Button("Save Customer", 
new Icon(VaadinIcon.CHECK), event -> saveCustomer());
Button clearButton = new Button("Clear", 
new Icon(VaadinIcon.TRASH), event -> clearForm());
formLayout.add(formTitle, firstName, lastName, email, phone, 
new HorizontalLayout(saveButton, clearButton));
// Grid panel
VerticalLayout gridLayout = new VerticalLayout();
gridLayout.setSizeFull();
Button refreshButton = new Button("Refresh", 
new Icon(VaadinIcon.REFRESH), event -> refreshGrid());
gridLayout.add(new HorizontalLayout(refreshButton), customerGrid);
layout.add(formLayout, gridLayout);
return layout;
}
private Component createReportsLayout() {
VerticalLayout layout = new VerticalLayout();
layout.setPadding(true);
layout.add(new H1("Reports Dashboard"),
new com.vaadin.flow.component.html.Paragraph("Sales reports will be displayed here"),
new Button("Generate Report", 
new Icon(VaadinIcon.FILE_TEXT)));
return layout;
}
private Component createSettingsLayout() {
VerticalLayout layout = new VerticalLayout();
layout.setPadding(true);
layout.add(new H1("Application Settings"),
new com.vaadin.flow.component.html.Paragraph("Configure your application preferences"),
new Button("Save Settings", 
new Icon(VaadinIcon.COG)));
return layout;
}
private void setupGrid() {
customerGrid.setColumns("firstName", "lastName", "email", "phone");
customerGrid.getColumnByKey("firstName").setHeader("First Name");
customerGrid.getColumnByKey("lastName").setHeader("Last Name");
customerGrid.getColumnByKey("email").setHeader("Email");
customerGrid.getColumnByKey("phone").setHeader("Phone");
customerGrid.asSingleSelect().addValueChangeListener(event -> {
if (event.getValue() != null) {
populateForm(event.getValue());
} else {
clearForm();
}
});
}
private void setupForm() {
binder.forField(firstName)
.asRequired("First name is required")
.bind(Customer::getFirstName, Customer::setFirstName);
binder.forField(lastName)
.asRequired("Last name is required")
.bind(Customer::getLastName, Customer::setLastName);
binder.forField(email)
.asRequired("Email is required")
.withValidator(this::isValidEmail, "Invalid email format")
.bind(Customer::getEmail, Customer::setEmail);
binder.forField(phone)
.bind(Customer::getPhone, Customer::setPhone);
}
private boolean isValidEmail(String email) {
return email != null && email.contains("@") && email.contains(".");
}
private void saveCustomer() {
Customer customer = new Customer();
try {
binder.writeBean(customer);
customers.add(customer);
refreshGrid();
clearForm();
Notification.show("Customer saved successfully!");
} catch (ValidationException e) {
Notification.show("Please fix validation errors");
}
}
private void clearForm() {
binder.readBean(null);
customerGrid.asSingleSelect().clear();
}
private void populateForm(Customer customer) {
binder.readBean(customer);
}
private void refreshGrid() {
customerGrid.setItems(customers);
}
private void loadSampleData() {
customers.add(new Customer("John", "Doe", "[email protected]", "555-0101"));
customers.add(new Customer("Jane", "Smith", "[email protected]", "555-0102"));
customers.add(new Customer("Bob", "Johnson", "[email protected]", "555-0103"));
refreshGrid();
}
// Customer data model
public static class Customer {
private String firstName;
private String lastName;
private String email;
private String phone;
public Customer() {}
public Customer(String firstName, String lastName, String email, String phone) {
this.firstName = firstName;
this.lastName = lastName;
this.email = email;
this.phone = phone;
}
// Getters and setters
public String getFirstName() { return firstName; }
public void setFirstName(String firstName) { this.firstName = firstName; }
public String getLastName() { return lastName; }
public void setLastName(String lastName) { this.lastName = lastName; }
public String getEmail() { return email; }
public void setEmail(String email) { this.email = email; }
public String getPhone() { return phone; }
public void setPhone(String phone) { this.phone = phone; }
}
}

Advanced Vaadin Features

Example 3: Data Binding with Backend Service

package com.example.vaadindemo;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.provider.ListDataProvider;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
@Route("data-binding")
public class DataBindingView extends VerticalLayout {
private final ProductService productService;
private final Grid<Product> grid = new Grid<>(Product.class);
private final TextField filterField = new TextField();
private ListDataProvider<Product> dataProvider;
public DataBindingView(ProductService productService) {
this.productService = productService;
initializeUI();
setupGrid();
setupFilter();
}
private void initializeUI() {
setSizeFull();
setPadding(true);
filterField.setPlaceholder("Filter by product name...");
filterField.setClearButtonVisible(true);
filterField.setWidth("300px");
add(filterField, grid);
grid.setSizeFull();
}
private void setupGrid() {
// Configure columns
grid.removeAllColumns();
grid.addColumn(Product::getName).setHeader("Product Name").setSortable(true);
grid.addColumn(Product::getCategory).setHeader("Category").setSortable(true);
grid.addColumn(Product::getPrice).setHeader("Price")
.setSortable(true)
.setComparator((p1, p2) -> Double.compare(p1.getPrice(), p2.getPrice()));
grid.addColumn(Product::getStock).setHeader("In Stock")
.setSortable(true);
// Load data
List<Product> products = productService.getAllProducts();
dataProvider = new ListDataProvider<>(products);
grid.setDataProvider(dataProvider);
}
private void setupFilter() {
filterField.setValueChangeMode(ValueChangeMode.LAZY);
filterField.addValueChangeListener(e -> applyFilter(e.getValue()));
}
private void applyFilter(String filterText) {
dataProvider.setFilter(product -> 
product.getName().toLowerCase().contains(filterText.toLowerCase()) ||
product.getCategory().toLowerCase().contains(filterText.toLowerCase())
);
}
}
@Service
class ProductService {
private final List<Product> products = new ArrayList<>();
public ProductService() {
// Sample data
products.add(new Product("Laptop", "Electronics", 999.99, 15));
products.add(new Product("Smartphone", "Electronics", 699.99, 25));
products.add(new Product("Desk Chair", "Furniture", 199.99, 10));
products.add(new Product("Coffee Mug", "Kitchen", 12.99, 100));
products.add(new Product("Notebook", "Office Supplies", 4.99, 50));
}
public List<Product> getAllProducts() {
return new ArrayList<>(products);
}
public List<Product> searchProducts(String query) {
return products.stream()
.filter(p -> p.getName().toLowerCase().contains(query.toLowerCase()) ||
p.getCategory().toLowerCase().contains(query.toLowerCase()))
.collect(Collectors.toList());
}
}
class Product {
private String name;
private String category;
private double price;
private int stock;
public Product(String name, String category, double price, int stock) {
this.name = name;
this.category = category;
this.price = price;
this.stock = stock;
}
// Getters and setters
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public String getCategory() { return category; }
public void setCategory(String category) { this.category = category; }
public double getPrice() { return price; }
public void setPrice(double price) { this.price = price; }
public int getStock() { return stock; }
public void setStock(int stock) { this.stock = stock; }
}

Example 4: Dialog and Notification System

package com.example.vaadindemo;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
@Route("dialogs")
public class DialogView extends VerticalLayout {
public DialogView() {
setAlignItems(Alignment.CENTER);
setJustifyContentMode(JustifyContentMode.CENTER);
setSizeFull();
setSpacing(true);
Button confirmationDialogButton = new Button("Show Confirmation Dialog", 
event -> showConfirmationDialog());
Button formDialogButton = new Button("Show Form Dialog", 
event -> showFormDialog());
Button customDialogButton = new Button("Show Custom Dialog", 
event -> showCustomDialog());
add(new H2("Dialog Examples"), 
confirmationDialogButton, 
formDialogButton, 
customDialogButton);
}
private void showConfirmationDialog() {
Dialog dialog = new Dialog();
VerticalLayout layout = new VerticalLayout();
layout.setPadding(true);
layout.setAlignItems(Alignment.CENTER);
com.vaadin.flow.component.html.Paragraph message = 
new com.vaadin.flow.component.html.Paragraph(
"Are you sure you want to delete this item?");
Button confirmButton = new Button("Delete", event -> {
Notification.show("Item deleted!");
dialog.close();
});
confirmButton.getStyle().set("color", "red");
Button cancelButton = new Button("Cancel", event -> dialog.close());
layout.add(message, new HorizontalLayout(confirmButton, cancelButton));
dialog.add(layout);
dialog.open();
}
private void showFormDialog() {
Dialog dialog = new Dialog();
dialog.setWidth("400px");
FormLayout formLayout = new FormLayout();
TextField nameField = new TextField("Name");
TextField emailField = new TextField("Email");
TextArea messageArea = new TextArea("Message");
messageArea.setHeight("100px");
formLayout.add(nameField, emailField, messageArea);
formLayout.setResponsiveSteps(
new FormLayout.ResponsiveStep("0", 1)
);
Button submitButton = new Button("Submit", event -> {
if (!nameField.getValue().isEmpty() && !emailField.getValue().isEmpty()) {
Notification.show("Form submitted successfully!");
dialog.close();
} else {
Notification.show("Please fill all required fields");
}
});
Button cancelButton = new Button("Cancel", event -> dialog.close());
HorizontalLayout buttonLayout = new HorizontalLayout(submitButton, cancelButton);
buttonLayout.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
VerticalLayout mainLayout = new VerticalLayout(
new H2("Contact Form"), formLayout, buttonLayout
);
mainLayout.setPadding(true);
dialog.add(mainLayout);
dialog.open();
}
private void showCustomDialog() {
Dialog dialog = new Dialog();
dialog.setCloseOnEsc(false);
dialog.setCloseOnOutsideClick(false);
// Custom styling
dialog.getStyle()
.set("border-radius", "10px")
.set("box-shadow", "0 4px 20px rgba(0,0,0,0.2)");
VerticalLayout content = new VerticalLayout();
content.setPadding(true);
content.setAlignItems(Alignment.CENTER);
content.setSpacing(true);
com.vaadin.flow.component.icon.Icon icon = 
new com.vaadin.flow.component.icon.Icon("lumo", "checkmark");
icon.setColor("var(--lumo-success-color)");
icon.setSize("48px");
H2 title = new H2("Operation Successful");
com.vaadin.flow.component.html.Paragraph message = 
new com.vaadin.flow.component.html.Paragraph(
"Your changes have been saved successfully.");
Button okButton = new Button("OK", event -> dialog.close());
okButton.getStyle().set("margin-top", "20px");
content.add(icon, title, message, okButton);
dialog.add(content);
dialog.open();
}
}

Spring Boot Integration

Example 5: Spring Boot Vaadin Application

package com.example.vaadindemo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
@SpringBootApplication
public class VaadinDemoApplication {
public static void main(String[] args) {
SpringApplication.run(VaadinDemoApplication.class, args);
}
}
// Service layer
@Service
class TaskService {
private final List<Task> tasks = new ArrayList<>();
private long nextId = 1;
public List<Task> getAllTasks() {
return new ArrayList<>(tasks);
}
public Task saveTask(Task task) {
if (task.getId() == null) {
task.setId(nextId++);
tasks.add(task);
} else {
tasks.removeIf(t -> t.getId().equals(task.getId()));
tasks.add(task);
}
return task;
}
public void deleteTask(Long id) {
tasks.removeIf(t -> t.getId().equals(id));
}
public void toggleTask(Long id) {
tasks.stream()
.filter(t -> t.getId().equals(id))
.findFirst()
.ifPresent(task -> task.setCompleted(!task.isCompleted()));
}
}
// Entity class
class Task {
private Long id;
private String title;
private String description;
private boolean completed;
public Task() {}
public Task(String title, String description) {
this.title = title;
this.description = description;
this.completed = false;
}
// Getters and setters
public Long getId() { return id; }
public void setId(Long id) { this.id = id; }
public String getTitle() { return title; }
public void setTitle(String title) { this.title = title; }
public String getDescription() { return description; }
public void setDescription(String description) { this.description = description; }
public boolean isCompleted() { return completed; }
public void setCompleted(boolean completed) { this.completed = completed; }
}

Best Practices

1. Use Service Classes

@Service
public class CustomerService {
@PersistenceContext
private EntityManager entityManager;
public List<Customer> findAll() {
return entityManager.createQuery("SELECT c FROM Customer c", Customer.class)
.getResultList();
}
}

2. Implement Responsive Design

public class ResponsiveView extends VerticalLayout {
public ResponsiveView() {
setPadding(true);
setSpacing(true);
// Responsive configuration
setResponsiveSteps(
new ResponsiveStep("0", 1),   // 1 column on mobile
new ResponsiveStep("500px", 2), // 2 columns on tablet
new ResponsiveStep("800px", 3)  // 3 columns on desktop
);
}
}

3. Use CSS for Custom Styling

public class StyledView extends VerticalLayout {
public StyledView() {
addClassName("styled-view");
Button primaryButton = new Button("Primary Action");
primaryButton.addClassName("primary-action");
add(primaryButton);
}
}

.styled-view {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.primary-action {
background-color: var(--lumo-primary-color);
color: white;
border-radius: 25px;
padding: 10px 20px;
}

Deployment Options

1. Traditional WAR Deployment

<!-- Maven WAR packaging -->
<packaging>war</packaging>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>

2. Docker Deployment

FROM openjdk:11-jre-slim
WORKDIR /app
COPY target/my-vaadin-app.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]

3. Cloud Deployment

• AWS Elastic Beanstalk
• Google App Engine
• Azure App Service
• Heroku

Conclusion

Vaadin provides a powerful solution for building desktop-like applications that run in the browser:

Key Advantages:

• Pure Java Development: No frontend expertise required
• Type Safety: Compile-time error checking
• Rich Component Set: Pre-built, customizable components
• Security: Built-in CSRF and XSS protection
• Integration: Seamless Spring Boot integration
• Progressive Web Apps: Offline capabilities

Ideal Use Cases:

• Enterprise Applications: CRM, ERP, internal tools
• Data-Intensive Applications: Dashboards, reporting tools
• Business Applications: Forms, workflows, data entry
• Admin Panels: Content management, system configuration

Performance Considerations:

• Use @Push for real-time updates
• Implement lazy loading for large datasets
• Optimize database queries
• Use CDN for static resources

Vaadin enables Java developers to create modern, responsive web applications while leveraging their existing Java skills and ecosystem.

Next Steps: Explore Vaadin Fusion for hybrid Java/TypeScript development or Vaadin Flow for pure Java solutions. Consider Vaadin's commercial components for advanced charts, spreadsheets, and reporting capabilities.