Rich web applications can be written both on the client-side as well as on server-side. Both the these approaches have their advantages - on the client-side you have a full control over presentation and can support offline mode. On the server-side the development is sped up by reducing the number of layers developer has to build. In this presentation we explore the ways of combining the server- and client-side development models in the context of Vaadin Framework. The goal is to be able to use the best of the both models and provide a flexible basis for building high quality user interfaces for enterprise applications. The presentation walks through an example application to demonstrate the benefits of the both models and how they could be applied in the same application. Presentation given at jDays Nov 26, 2013

1. HybridApps
@joonaslehtinen
Founder & CEO

3. 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. 0L/100km
1€/100km
450km range"
growing charge
station network
2.5L/100km
4€/100km
500km range"
gas stations
everywhere
8.6L/100km
13€/100km
550km range"
gas stations
everywhere

7. What about apps?

8. Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript

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

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

11. Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
requiredrequired
JS
required required

12. Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required
Client-side UI

13. Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
nication
optional
Vaadin
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required
Client-side UIServer-side UI &

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

15. Server-
Client-
side
Optim
izedfor
Productivity
Optim
izedfor
Control

16. How does the server-
side UI work, really?

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

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

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

22. HybridApps

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

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

26. Vaadin += GWT

28. UI.java
Widgets
java.util
Java to JS"
compiler
IE6/7"
JS
IE8"
JS
IE9"
JS
IE10"
JS
IE11"
JS
Safari"
JS
Chrome"
JS
FF"
JS

29. Optimized
for Google
speed JSNI
[super]
DevMode
Static
typing
GWT
RPC

30. compile
time
complexity
widgets

34. GWT
Compatible

35. HybridArchitecture

37. Example
https://github.com/jojule/hybrid

38. Google
http://domain.com
Web Page Title
First name
Table cell
Table cell
Phone number
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
Table cell
Last name
Table cell
Table cell
Email address
Table cell
Table cell
Far far away, behind the word mountains,
far from the countries Vokalia and
Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove
right at the coast of the Semantics, a
large language ocean.
A small river named Duden flows by their
place and supplies it with the necessary
regelialia. It is a paradisematic country, in
which roasted parts of sentences fly into
your mouth.
Even the all-powerful Pointing has no
control about the blind texts it is an
almost unorthographic life One day
however a small line of blind text by the
name of Lorem Ipsum decided to leave
for the far World of Grammar. The Big
Oxmox advised her not to do so,
because there were thousands of bad
Commas.
Server-side
Offline
Client-side Vaadin-RPC
Client-side GWT-RPC
Server-side
Edit Delete New
Save Cancel
First name Last name
Phone number Email address

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

40. Estimating
Complexity

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

42. Vaadin
RPC
State

43. server
client
Component
Widget
Connector
RPC
State
Demo

44. public interface ButtonRpc extends ServerRpc {
public void click(MouseEventDetails details);
}
private ButtonRpc rpc =
RpcProxy.create(ButtonRpc.class, this);
"
public void onClick(ClickEvent event) {
rpc.click(
new MouseEventDetails(event));
}
serverclient
private ButtonRpc rpc = new ButtonRpc() {
public void click(
MouseEventDetails details) {
// do stuff
}
};
"
public Button() {
registerRpc(rpc);
}
Demo

45. Offline

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

47. Use Offline
only when really
really needed

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

49. getting
started
with
vaadin

51. Eclipse
Download plugin
from Martketplace

52. IntelliJ IDEA
Built-in support

53. Netbeans
Download plugin
Netbeans Plugin Portal

54. mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersion=
7.1.7
Maven

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

56. Apache
License

57. community of
100.000+
developers

58. ? joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
slideshare.com/
joonaslehtinen