Fusion

Topics

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() {
    Notification.show('Hello!');
  }
}

Topics

Quick Start: This guide 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.

Docs

Docs

Fusion

Topics