documentation/architecture/architecture-client-side.asciidoc


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 Google Web Toolkit) 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-hi.png[width=60%, scaledwidth=90%]

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
<<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using
Vaadin Add-ons">>. You can also develop your own widgets, as described in
<<dummy/../../../framework/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
<<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
with the Server-Side">>.

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

SPDX-License-Identifier: MIT
SPDX-License-Identifier: ISC
SPDX-License-Identifier: GPL-3.0-or-later
SPDX-License-Identifier: BSD-3-Clause
SPDX-License-Identifier: AGPL-3.0-or-later
SPDX-License-Identifier: (MPL-2.0 OR Apache-2.0)
SPDX-FileCopyrightText: inherits developers
SPDX-FileCopyrightText: escape-html developers
SPDX-FileCopyrightText: debounce developers
SPDX-FileCopyrightText: Varun A P
SPDX-FileCopyrightText: Tobias Koppers @sokra
SPDX-FileCopyrightText: T. Jameson Little <t.jameson.little@gmail.com>
SPDX-FileCopyrightText: Roman Shtylman <shtylman@gmail.com>
SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
SPDX-FileCopyrightText: Matt Zabriskie
SPDX-FileCopyrightText: Joyent
SPDX-FileCopyrightText: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
SPDX-FileCopyrightText: Guillaume Chau <guillaume.b.chau@gmail.com>
SPDX-FileCopyrightText: GitHub Inc.
SPDX-FileCopyrightText: Feross Aboukhadijeh
SPDX-FileCopyrightText: Evan You
SPDX-FileCopyrightText: Dr.-Ing. Mario Heiderich, Cure53 <mario@cure53.de> (https://cure53.de/)
SPDX-FileCopyrightText: David Clark
SPDX-FileCopyrightText: Christoph Wurst
SPDX-FileCopyrightText: Anthony Fu <https://github.com/antfu>
SPDX-FileCopyrightText: @nextcloud/dialogs developers


This file is generated from multiple sources. Included packages:
- @nextcloud/auth
	- version: 2.4.0
	- license: GPL-3.0-or-later
- @nextcloud/axios
	- version: 2.5.1
	- license: GPL-3.0-or-later
- @nextcloud/browser-storage
	- version: 0.4.0
	- license: GPL-3.0-or-later
- @nextcloud/dialogs
	- version: 6.1.1
	- license: AGPL-3.0-or-later
- semver
	- version: 7.6.3
	- license: ISC
- @nextcloud/event-bus
	- version: 3.3.2
	- license: GPL-3.0-or-later
- @nextcloud/initial-state
	- version: 2.2.0
	- license: GPL-3.0-or-later
- @nextcloud/l10n
	- version: 3.2.0
	- license: GPL-3.0-or-later
- @nextcloud/logger
	- version: 3.0.2
	- license: GPL-3.0-or-later
- @nextcloud/router
	- version: 3.0.1
	- license: GPL-3.0-or-later
- @nextcloud/vue
	- version: 8.24.0
	- license: AGPL-3.0-or-later
- @vueuse/core
	- version: 11.1.0
	- license: MIT
- @vueuse/shared
	- version: 11.1.0
	- license: MIT
- axios
	- version: 1.8.4
	- license: MIT
- base64-js
	- version: 1.5.1
	- license: MIT
- css-loader
	- version: 7.1.2
	- license: MIT
- debounce
	- version: 2.2.0
	- license: MIT
- dompurify
	- version: 3.2.4
	- license: (MPL-2.0 OR Apache-2.0)
- escape-html
	- version: 1.0.3
	- license: MIT
- floating-vue
	- version: 1.0.0-beta.19
	- license: MIT
- focus-trap
	- version: 7.6.4
	- license: MIT
- ieee754
	- version: 1.2.1
	- license: BSD-3-Clause
- buffer
	- version: 6.0.3
	- license: MIT
- inherits
	- version: 2.0.3
	- license: ISC
- util
	- version: 0.10.4
	- license: MIT
- path
	- version: 0.12.7
	- license: MIT
- process
	- version: 0.11.10
	- license: MIT
- style-loader
	- version: 4.0.0
	- license: MIT
- tabbable
	- version: 6.2.0
	- license: MIT
- toastify-js
	- version: 1.12.0
	- license: MIT
- vue-loader
	- version: 15.11.1
	- license: MIT
- vue
	- version: 2.7.16
	- license: MIT
- webpack
	- version: 5.94.0
	- license: MIT
- nextcloud
	- version: 1.0.0
	- license: AGPL-3.0-or-later