summaryrefslogtreecommitdiffstats
path: root/documentation/architecture/architecture-client-side.asciidoc
blob: 2d62f912e54a675030f43c62d7398fb2dd5504a1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
---
title: Client-Side Engine
order: 3
layout: page
---

[[architecture.client-side]]
= Client-Side Engine

((("Client-Side
Engine")))
The user interface of a server-side Vaadin application is rendered in the
browser by the Vaadin Client-Side Engine. It is loaded in the browser when the
page with the Vaadin UI is opened. The server-side UI components are rendered
using __widgets__ (as they are called in GWT) on the client-side.
The client-side engine is illustrated in <<figure.architecture.client-side>>.

[[figure.architecture.client-side]]
.Vaadin Client-Side Engine
image::img/clientside-arch.png[width=80%, scaledwidth=100%]

The client-side framework includes two kinds of built-in widgets: GWT widgets
and Vaadin-specific widgets. The two widget collections have significant
overlap, where the Vaadin widgets provide a bit different features than the GWT
widgets. In addition, many add-on widgets and their server-side counterparts
exist, and you can easily download and install them, as described in
<<../addons/addons-overview.asciidoc#addons.overview,"Using
Vaadin Add-ons">>. You can also develop your own widgets, as described in
<<../clientside/clientside-overview.asciidoc#clientside.overview,"Client-Side
Vaadin Development">>.

The rendering with widgets, as well as the communication to the server-side, is
handled in the [classname]#ApplicationConnection#. Connecting the widgets with
their server-side counterparts is done in __connectors__, and there is one for
each widget that has a server-side counterpart. The framework handles
serialization of component state transparently, and includes an RPC mechanism
between the two sides. Integration of widgets with their server-side counterpart
components is described in
<<../gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
with the Server-Side">>.