This section gives an overview of the client-side architecture of Vaadin. Knowledge of the client-side technologies is generally not needed unless you develop or use custom GWT components. The client-side engine is based on Google Web Toolkit (GWT), which allows the development of the engine and client-side components solely with Java.

Chapter 11, Developing New Components provides information about the integration of GWT-based user interface components with Vaadin.


Figure 3.2, “Architecture of Vaadin Client-Side Engine” illustrates the architecture of the client-side engine using a button component as an example. The user interface is managed by the ApplicationConnection class, which handles AJAX requests to the server and renders the user interface according to responses. Communications are done over HTTP(S) using the JSON data interchange format and the User Interface Definition Language (UIDL). In the server-side application, the button is used with the Button class of Vaadin. On the client-side, the user interface consists of various GWT components that inherit Widget class. In the figure above, the GWT class Button is used to render the button in the browser (the inheritance of Button is simplified in the figure). Vaadin provides an VButton class, which implements the Paintable interface needed for rendering the component with GWT.

The actual initial web page that is loaded in the browser is an empty page that loads the JavaScript code of the Vaadin Client-Side Engine. After it is loaded and started, it handles the AJAX requests to the server. All server communications are done through the ApplicationConnection class.

The communication with the server is done as UIDL (User Interface Definition Language) messages using the JSON message interchange format over a HTTP(S) connection. UIDL is described in Appendix A, User Interface Definition Language (UIDL) and JSON in Section 3.2.3, “JSON” and Section A.2, “JSON Rendering”.