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

5. 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

6. 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

7. What about apps?

8. Web application layers
Backend
server
Web
server
Communication
JavaScript

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

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

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

12. 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

13. 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

14. 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

15. 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

16. How does the serverside UI work, really?

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

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

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

23. HybridApps

24. 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

25. Vaadin += GWT

30. GWT
Compatible

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

33. HybridArchitecture

41. 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

42. AddressbookBackend
Address
Impl

43. 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;
...
}

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

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

46. 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

47. 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

48. Estimating
Complexity

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

50. Vaadin Communication
"
RPC + State

51. Demo
Widget
Connector
client
server
State
RPC
Component

52. 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

53. @Push

54. Offline

55. 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

56. Use Offline
only when
really needed

58. 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

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

60. Apache
License

61. community of
100.000+
developers

62. ?
Artur Signell
artur@vaadin.com