Overview

Vaadin Fusion is an application framework where you write client-side code with TypeScript. A Vaadin application can consist of views written in both Fusion and Vaadin Flow. Fusion views connect with server-side Java endpoints that can provide business data and logic, and can connect further with back-end services. Fusion views can be mixed with application views written in Java on the server-side with Vaadin Flow.

This chapter gives a more thorough and a more practical overview of Vaadin application basics. The various topics in this chapter are described in more detail throughout the further documentation.

Fusion Application Architecture

Fusion Application Architecture

The basic elements of an application built with Vaadin Fusion are:

Application Shell

The index.html file that is loaded first sets up application styles and loads the application scripts. The main entry point is an index.ts script, where you set up routes to display the various views of the application, and do any other initialization needed by the application.

Views

The user interface of an application consists of one or more views. Views are built from Vaadin web components by extending the LitElement component. Each view can display different data or other functionalities. Typically, you have at least a main view, and possibly a login view to enter that. A main view typically contain child views that fit inside the layout of the main view. Such child views could be "Products", "Personnel", or "Tasks".

A view in Fusion is a web component that extends LitElement. As such, it is an HTML element. The views are defined declaratively in a reactive manner, where changes in its state cause the view to be redrawn to reflect the new data.

A Vaadin application can have both Fusion and Flow views, but only Fusion views can work completely offline.

Binding views to data

Views typically display some data or allow entering some.

Application Topics

Routing and Navigation

Routing maps addresses to application content, such as views to display and manage application data.

Using an application involves navigation between the various views of the application. In Fusion applications, you need to handle navigation in a way that works together with routing.

Security

Most web application have to deal with at least with basic security tasks such as authentication and authorization. First, have a way to log in or be authenticated by an external service. Then, allow or deny access to views and other resources according to authorization. Fusion supports Spring Security for these tasks.