Fusion

Fusion is a TypeScript and Java web framework for building modern web apps and websites. You can create UIs in TypeScript and connect to any backend through endpoints written in Java.

The basic features in Fusion are:

  • Build UIs from web components

  • Use a reactive programming model for updating the UI to reflect data

  • Use routing to display views and resources

  • Manage security on the server-side

A Fusion application can be fully stateless, as TypeScript views can be loaded without creating a session on the server-side.

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

@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!');
  }
}

Topics

Quick Start Tutorial

This tutorial teaches you the core concepts of Vaadin Fusion by building a full-stack application for managing to-do items. After completing the tutorial, you’re ready to start experimenting on your own or continue to more advanced tutorials.

Creating an Application

Gives an introduction to basic architecture and elements of a Fusion application.

Routing and Navigation

Routing maps URL addresses to application views and other resources.

Creating Client-Side Forms

Gives an introduction to creating client-side forms and binding them to data.

Security

Gives instructions for configuring security and accessing authentication data, as well as working with Spring Security.

Advanced Topics

Various in-depth and technical articles about how fusion works and how you can use it in certain use cases.