Introduction

• Introduction
• Core Concepts
• Compatibility

Vaadin is a Java user interface framework coupled with JavaScript web components. You can create web apps in server-driven Java, or in JavaScript, by using the Vaadin web components with any backend.

For example, you can create a simple UI in Java as follows:

// Create an HTML element
Div layout = new Div();
// Use TextField for standard text input
TextField textField = new TextField("Your name");
// Button click listeners can be defined as lambda expressions
Button button = new Button("Say hello",
          e -> Notification.show("Hello!"));
// Add the web components to the HTML element
layout.add(textField, button);

When using the Java API, the components control their JavaScript counterparts in the browser, and you do not need know anything about the HTML or JavaScript that runs under the hood.

With the above code, Vaadin creates the HTML DOM as follows (attributes and shadow DOM omitted):

<div>
  <vaadin-text-field></vaadin-text-field>
  <vaadin-button>Say hello</vaadin-button>
</div>

You can actually write HTML templates like the snippet above to create UIs instead of using Java, and then add the UI logic with Java.

Vaadin comes with a large set of premade UI components, also called widgets or controls. You can use the JavaScript components both through the Java API and in JavaScript. You can combine them to create complex UIs, and extend them to add features. Vaadin also provides full access to the DOM, even from the server-side Java. The flexibility extends to the programming stack; you can choose to write the UI in Java, TypeScript, JavaScript, or any mix of them. The same features are mostly available regardless of the language you use.

See Components, for a full set of available Vaadin components.

Using Vaadin, you can quickly create a modern and robust web application. All components are pre-tested and work in all major browsers. This allows you to spend your development time on your application, not testing with a large combination of different devices, browsers, and operating systems. When you do want to create tests, Vaadin has got you covered with a purpose-built tool, Vaadin TestBench.

Vaadin applications are often data-intensive; indeed, data is what we designed the framework around. Whether it is automatic server-client communication, lazy-loading millions of database rows, or building big, complex forms quickly, Vaadin has the necessary tools. By using Vaadin, you never have to think about how to transfer data from the server to the client or vice-versa; the framework takes care of that, leaving you to concentrate on your business logic.

Application Architecture

Working with front-end web technologies, such as HTML, CSS and JavaScript, can be challenging and time-consuming for Java developers. In Vaadin, all UI elements are componentized into Web Components. This makes development easier than ever before, because each element is decoupled and sandboxed.

Vaadin includes:

• A type-safe Java UI Component API on the server side that facilitates the use of the Web Components.

• Automated bi-directional communication between the server and the browser, that:

  • Gives Java developers full access to all modern web enhancements.

  • Makes it easier to connect the UI to data via a robust Java backend, instead of using traditional REST-based communication.

  • Lets you choose either basic HTTP(S) or WebSocket communication protocol for building real-time applications.

• Two-way data binding: when the UI changes on either the client or the server, the changes automatically reflect on the other side.

Vaadin allows you to access browser APIs, Web Components, and even simple DOM elements, directly from the server-side Java. It is not necessary to understand how the client-to-server communication or Web Components work. This leaves you free to focus on creating components that work at a higher-abstraction level.

Updated 2021-03-08  Edit this article