introduction-overview.asciidoc

title	order	layout
Overview	1	page

Overview

This chapter provides an overview of the Vaadin architecture and introduces the key concepts in the framework.

What is Vaadin?

Vaadin is a Java user interface framework coupled with JavaScript web components. You can create web apps in server-driven Java, on the client-side with TypeScript, by using the Vaadin web components with any back end.

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.

The TypeScript API allows creating TypeScript applications or views in a similar way. Such an application can be fully stateless, as TypeScript views can be loaded without creating a session on the server-side.

@customElement('hello-world-view')
export class HelloWorldView extends LitElement {
  render() {
    return html`
      <div>
        <vaadin-text-field label="Your name"></vaadin-text-field>
        <vaadin-button @click="${this.sayHello}">Say hello</vaadin-button>
      </div>
    `;
  }

  sayHello() {
    showNotification('Hello!');
  }
}

With the above code, either in Java or TypeScript, 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 just add the UI logic with Java.

You are not bound to the TypeScript API on the client-side, but can use the same Vaadin components in plain JavaScript, with code equivalent to above:

// Create the div element
const layout = document.createElement('div');

// Create the vaadin-text-field element
const textField = document.createElement('vaadin-text-field');

// Create the vaadin-button element
const button = document.createElement('vaadin-button');
button.textContent = 'Say hello';
button.addEventListener('click', event => button.textContent = 'Hello!');

// Add the elements to the div element
layout.appendChild(textField);
layout.appendChild(button);

When using TypeScript or JavaScript, you need to integrate with a back end, while with Java, you are already working on the server-side, so integrating with business logic and data can be easier. The TypeScript API, however, helps with that greatly compared to plain JavaScript.

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 and TypeScript APIs, as well as in plain 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 (see Compatibility and Versioning or the release notes). 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.

Tip	Watch the Vaadin 14: Intro free training video to learn more about the Vaadin framework, basic Vaadin application architecture and how Vaadin components work.

Vaadin 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 Java Component API on the server side that facilitates the use of the Web Components.

• A TypeScript Component API that allows creation of views and applications that can run purely on the client-side.

  • Uses LitElement as a helper library.

• 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 back end, instead of using traditional REST-based communication.

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

  • Provides JavaScript developers full access to the back end from TypeScript by using the Vaadin endpoint.

• 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, or access the Java DTO class and generate the corresponding TypeScript module from the client side. 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.