---
title: Overview
order: 1
layout: page
---

[[clientsideapp.overview]]
= Overview

Vaadin allows developing client-side modules that run in the browser.
Client-side modules can use all the GWT widgets and some Vaadin-specific
widgets, as well as the same themes as server-side Vaadin applications.
Client-side applications run in the browser, even with no further server
communications. When paired with a server-side service to gain access to data
storage and server-side business logic, client-side applications can be
considered "fat clients", in comparison to the "thin client" approach of the
server-side Vaadin applications. The services can use the same back-end services
as server-side Vaadin applications. Fat clients are useful for a range of
purposes when you have a need for highly responsive UI logic, such as for games
or for serving a huge number of clients with possibly stateless server-side
code.

[[figure.clientsideapp.overview.architecture]]
.Client-Side Application Architecture
image::img/clientsideapp-architecture-hi.png[]

A client-side application is defined as a __module__, which has an
__entry-point__ class. Its [methodname]#onModuleLoad()# method is executed when
the JavaScript of the compiled module is loaded in the browser.

Consider the following client-side application:


----
public class HelloWorld implements EntryPoint {
    @Override
    public void onModuleLoad() {
        RootPanel.get().add(new Label("Hello, world!"));
    }
}
----

The user interface of a client-side application is built under a HTML __root
element__, which can be accessed by [methodname]#RootPanel.get()#. The purpose
and use of the entry-point is documented in more detail in
<<dummy/../../../framework/clientsideapp/clientsideapp-entrypoint#clientsideapp.entrypoint,"Client-Side
Module Entry-Point">>. The user interface is built from __widgets__
hierarchically, just like with server-side Vaadin UIs. The built-in widgets and
their relationships are catalogued in
<<dummy/../../../framework/clientsidewidgets/clientsidewidgets-overview.asciidoc#clientsidewidgets.overview,"Client-Side
Widgets">>. You can also use many of the widgets in Vaadin add-ons that have
them, or make your own.

A client-side module is defined in a __module descriptor__, as described in
<<dummy/../../../framework/clientside/clientside-module#clientside.module,"Client-Side
Module Descriptor">>. A module is compiled from Java to JavaScript using the
Vaadin Compiler, of which use was described in
<<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling
a Client-Side Module">>. The
<<dummy/../../../framework/clientsideapp/clientsideapp-compiling#clientsideapp.compiling,"Compiling
and Running a Client-Side Application">> in this chapter gives further
information about compiling client-side applications. The resulting JavaScript
can be loaded to any web page, as described in
<<dummy/../../../framework/clientsideapp/clientsideapp-loading#clientsideapp.loading,"Loading
a Client-Side Application">>.

// TODO What is this? What's an "UI Binder"?
The client-side user interface can be built declaratively using the included
__UI Binder__.
// , as described in <<clientsideapp.uibinder>>.

The servlet for processing RPC calls from the client-side can be generated
automatically using the included compiler.

Even with regular server-side Vaadin applications, it may be useful to provide
an off-line mode if the connection is closed. An off-line mode can persist data
in a local store in the browser, thereby avoiding the need for server-side
storage, and transmit the data to the server when the connection is again
available. Such a pattern is commonly used with Vaadin TouchKit.

////
TODO It may be necessary to have such a section at some point.
Use of a client-side application to provide an off-line mode is described in <<clientsideapp.offline>>.
////
 value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/jquery-ui.git/tree/?id=2fe43bbbe20ba59dbbbef1effd9f59ac64cb15a7'>root</a>/<a href='/jquery-ui.git/tree/tests?id=2fe43bbbe20ba59dbbbef1effd9f59ac64cb15a7'>tests</a>/<a href='/jquery-ui.git/tree/tests/unit?id=2fe43bbbe20ba59dbbbef1effd9f59ac64cb15a7'>unit</a>/<a href='/jquery-ui.git/tree/tests/unit/form-reset-mixin?id=2fe43bbbe20ba59dbbbef1effd9f59ac64cb15a7'>form-reset-mixin</a>/<a href='/jquery-ui.git/tree/tests/unit/form-reset-mixin/form-reset-mixin.html?id=2fe43bbbe20ba59dbbbef1effd9f59ac64cb15a7'>form-reset-mixin.html</a></div><div class='content'>blob: a20e25d4a1346c2319ec5387e65154a8e5afc411 (<a href='/jquery-ui.git/plain/tests/unit/form-reset-mixin/form-reset-mixin.html?id=2fe43bbbe20ba59dbbbef1effd9f59ac64cb15a7'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
<a id='n11' href='#n11'>11</a>
<a id='n12' href='#n12'>12</a>
<a id='n13' href='#n13'>13</a>
<a id='n14' href='#n14'>14</a>
<a id='n15' href='#n15'>15</a>
<a id='n16' href='#n16'>16</a>
<a id='n17' href='#n17'>17</a>
<a id='n18' href='#n18'>18</a>
<a id='n19' href='#n19'>19</a>
<a id='n20' href='#n20'>20</a>
<a id='n21' href='#n21'>21</a>
<a id='n22' href='#n22'>22</a>
<a id='n23' href='#n23'>23</a>
<a id='n24' href='#n24'>24</a>
<a id='n25' href='#n25'>25</a>
<a id='n26' href='#n26'>26</a>
</pre></td>
<td class='lines'><pre><code>