1.
Client-Server Hybrid
Applications with Vaadin
Artur Signell
Vaadin

2.
By combining a sophisticated turbocharged
and direct-injected three-cylinder engine
combined with multiple electric motors for
all-wheel drive and a total system output of
362 horsepower and 420 lb-ft. of torque.
Thanks to the car's low curb weight, 0 to 60
mph will come in right around 4.4 seconds
i8

3.
8.6L/100km
2.5L/100km
0L/100km
13€/100km
4€/100km
1€/100km
550km range"
500km range"
450km range"
gas stations
everywhere
gas stations
everywhere
growing charge
station network

4.
What about apps?

5.
Web application layers
Backend
server
Web
server
Communication
JavaScript

6.
Web application layers
Client-side UI
Backend
server
Web
server
Communication
JavaScript

7.
Web application layers
Backend
server
Web
server
Server-side UI
Communication
JavaScript
Automated

8.
Web application layers
JS
Backend
server
Web
server
Communication
required
required
required
Java to
JavaScript
JavaScript
required

9.
Web application layers
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
GWT
required
required
required
JS
Client-side UI
required
required
required
required
optional
required

10.
Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
required
required
optional
required
required
required
Server-side UI & Client-side UI
required

11.
Web application layers
JS
GWT Vaadin
Backend
server
Web
server
Communication
Java to
JavaScript
JavaScript
required
required
optional
optional
optional
required
required
1 layer
required
required
required
vs
required
3 layers
-50% dev. time
required
-50% maintenance
vs
optional
required
full control over DOM
and communications

12.
ity
tiv
or
df
ize
tim uc
Op
od
Pr
O
tim
p
fo
ed
iz
e rol
d ont
i C
s
r
e
v
r
e
S
r
tien
Cl

13.
How does the serverside UI work, really?

14.
•
•
•
•
Initial HTML
CSS (theme)
Images
JavaScript
"
1.2M total
compress
307k
reduced
widgetset
135k

15.
• name=”Joonas”
• button clicked
"
261 bytes

16.
• name=”Joonas”
• button clicked
"
261 bytes
• Add notification
"
267 bytes

17.
HybridApps

18.
Client-side
Use for
Server-side
Use for
•
Offline"
•
Most places ( - 50% cost )"
•
Low latency interaction"
•
High security"
•
Maximum scalability
•
Utilizing full Java platform
Hybrid
Benefits of the both sides, but adds complexity

19.
Vaadin += GWT

20.
GWT
Compatible

21.
http://demo.vaadin.com/parking/

22.
HybridArchitecture

23.
Web Page Title
Google
http://domain.com
Client-side GWT-RPC
Server-side
First name
Table cell
Table cell
Table cell
Table cell
Table cell
Client-side Vaadin-RPC
Last name
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Table cell
Delete
New
Last name
Phone number
rd mountains,
Far far away, behind the wo
ia and
far from the countries Vokal
the blind texts.
Consonantia, there live
okmarksgrove
Separated they live in Bo
mantics, a
right at the coast of the Se
large language ocean.
Table cell
Table cell
Edit
First name
Server-side
Email address
Phone number
Email address
Save
Offline
Cancel
n flows by their
A small river named Dude
the necessary
place and supplies it with
matic country, in
regelialia. It is a paradise
tences fly into
which roasted parts of sen
your mouth.
ng has no
Even the all-powerful Pointi
ts it is an
control about the blind tex
ic life One day
almost unorthograph
d text by the
however a small line of blin
cided to leave
name of Lorem Ipsum de
r. The Big
for the far World of Gramma
to do so,
Oxmox advised her not
nds of bad
because there were thousa
Commas.
https://github.com/jojule/hybrid

24.
AddressbookBackend
Address
Impl

25.
Address
public class Address {
String firstName, lastName;
String phoneNumber, emailAddress;
int id;
...
}
AddressbookBackend
public Collection<Address> getAddressess();
"
public Address getAddress(int id);
"
public void storeAddress(Address address);
"
public void deleteAddress(int id);
"
public Address newAddress();
Impl
public class AddressbookBackendImpl implements AddressbookBackend {
private final LinkedHashMap<Integer, Address> addresses;
...
}

26.
Server-side"
(with Vaadin)
Client-side"
(with GWT-RPC)
AddressbookEditor
Frontend
Backend
Address
AddressbookBackend
Impl

27.
Server-side"
(with Vaadin)
Client-side"
(with GWT-RPC)
AddressbookEditor
create
Connector
Client
Server
AddressbookEditor
place
View
Frontend
Backend
Address
AddressbookBackend
Impl

28.
Server-side"
(with Vaadin)
Client-side"
(with GWT-RPC)
AddressbookEditor
create
Connector
Client
Server
AddressbookEditor
place
View
RPCServlet
Frontend
Service
implements
Backend
Address
AddressbookBackend
Impl

29.
Server-side"
(with Vaadin)
Client-side"
(with GWT-RPC)
AddressbookEditor
create
implements
Proxy
Connector
(generated)
Client
ServiceAsync
Server
AddressbookEditor
equal
place
View
RPCServlet
Frontend
Service
implements
Backend
Address
AddressbookBackend
Impl

30.
Estimating
Complexity

31.
Client-side
4 classes
2 interfaces
~ 500 LOC
Server-side
3X
1 class
"
190 LOC

32.
Vaadin Communication
"
RPC + State

33.
Demo
Widget
Connector
client
server
State
RPC
Component

34.
Client-side"
Client-side"
(with GWT-RPC)
(with Vaadin Connector)
AddressbookEditor
create
create
Connector
implements
Proxy
Connector
(generated)
Client
ServiceAsync
Server
equal
place
View
AddressbookEditor
RPCServlet
Frontend
Service
Client
RPC
State
place
View
implements
Backend
Address
AddressbookBackend
Impl
Server
RPC

35.
@Push

36.
Offline

37.
Offline Mode
•
Client-side UI needed as a basis
•
Offline bootstrap
•
Local storage database
2X
client-side
Offline detection
•
at least
5X
>
server-side
•
2-way data synchronization (app specific)
•
Modification logs
•
Sharding logic

38.
Use Offline
only when
really needed

39.
Client-side
Hybrid
Server-side
3 layer UI
1-3 layer UI
1 layer UI
Full control"
You choose"
Automated"
offline ready
architecture
offline for chosen
functionality
connection to
server required

40.
Download for Free
vaadin.com/book
-93-
1970
-1
01
728 pages
PDF, ePub, HTML

41.
Apache
License

42.
community of
100.000+
developers

43.
?
Artur Signell
artur@vaadin.com