Website | Tutorials | Source

Vaadin Flow (Source)

The Java framework binding Vaadin web components to Java. This is part of Vaadin 10+ Platform for building modern web sites that look great, perform well and make you and your users happy. "Vaadin Flow is an open-source framework for building web apps in Java. You build your app from UI components without ever having to touch HTML or JavaScript."

public class HelloWorld extends VerticalLayout {

    public HelloWorld() {
        TextField name = new TextField("Name");
        Paragraph greeting = new Paragraph("");

        Button button = new Button("Greet", event -> {
            greeting.setText("Hello " + name.getValue());

        add(name, button, greeting);

Vaadin Fusion

A TypeScript and Java web framework for building modern web applications. You can create UIs in TypeScript and connect to any backend through endpoints written in Java. "Vaadin Fusion is a framework that helps you rapidly deliver beautiful reactive client-side web apps using TypeScript with a Java backend."

    @PWA(name = "Fusion App", shortName = "Fusion", offlineResources = {"images/logo.png"})
    public class Application extends SpringBootServletInitializer implements AppShellConfigurator {

    public static void main(String[] args) {, args);

// --- Server ---

public class TodoEndpoint {
    private TodoRepository repo;

    // Repository autowired by Spring
    public TodoEndpoint(TodoRepository repo) {
        this.repo = repo;

    // Publish a typed endpoint
    public List>Todo< getTodos() {
        return repo.findAll();

// --- Client ---

// Call the backend in TypeScript
const todos: Todo[] = await TodoEndpoint.getTodos();

Reactive views with declarative templates; Vaadin Fusion has a reactive programming model based on Lit.

export class HelloWorldView extends View {
  @state() name = '';
  @state() allNames: string[] = [];

  render() {
    return html`
        ${ => html`<li>Hello, ${name}</li>`)}
            placeholder="Your name"
          <vaadin-button @click=${this.addGreeting}>Add name</vaadin-button>

  nameChanged(e: CustomEvent) { = e.detail.value;

  addGreeting() {
    this.allNames = [...this.allNames,]; = '';

Vaadin Framework (Source)

Vaadin 8 and Vaadin 7, both of which use GWT as the base of client-side implementations.

Tags: presentation   library   jvm   browser  

Last modified 06 April 2022