Documentation versions (currently viewingVaadin 8)

Vaadin 8 reached End of Life on February 21, 2022. Discover how to make your Vaadin 8 app futureproof →


As noted in the introduction, Vaadin supports two development models: server-side and client-side. Client-side Vaadin code is executed in the web browser as JavaScript code. The code is written in Java, like all Vaadin code, and then compiled to JavaScript with the Vaadin Client Compiler. You can develop client-side widgets and integrate them with server-side counterpart components to allow using them in server-side Vaadin applications. That is how the components in the server-side framework and in most add-ons are done. Alternatively, you can create pure client-side GWT applications, which you can simply load in the browser from an HTML page and use even without server-side connectivity.

The client-side framework is based on the Google Web Toolkit (GWT), with added features and bug fixes. Vaadin is compatible with GWT to the extent of the basic GWT feature set. Vaadin Ltd is a member of the GWT Steering Committee, working on the future direction of GWT together with Google and other supporters of GWT.

Widgets and Components

Google Web Toolkit uses the term widget for user interface components. In this book, we use the term widget to refer to client-side components, while using the term component in a general sense and also in the special sense for server-side components.

The main idea in server-side Vaadin development is to render the server-side components in the browser with the Client-Side Engine. The engine is essentially a set of widgets paired with connectors that serialize their state and events with the server-side counterpart components. The client-side engine is technically called a widget set, to describe the fact that it mostly consists of widgets and that widget sets can be combined, as described later.