Successfully reported this slideshow.
HybridApps
@joonaslehtinen
Founder & CEO
By combining a sophisticated turbocharged
and direct-injected three-cylinder engine
combined with multiple electric motors...
0L/100km
1€/100km
450km range"
growing charge

station network
2.5L/100km
4€/100km
500km range"
gas stations

everywhere
8...
What about apps?
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Client-side UI
Web application layers
Backend
server
Web
server
Commu-
nication
JavaScript
Server-side UI Automated
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
requiredrequired
JS
require...
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
required optionalrequired
G...
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
n...
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
required optional optionalrequired
Commu-
n...
Server-
Client-
side
Optim
izedfor
Productivity
Optim
izedfor
Control
How does the server-
side UI work, really?
• Initial HTML
• CSS (theme)
• Images
• JavaScript
"
1.2M total

307k
compress
135k
reduced
widgetset
• name=”Joonas”
• button clicked
"
261 bytes

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

HybridApps
Server-sideClient-side
Use for
• Offline"
• Low latency interaction"
• Maximum scalability
Use for
• Most places ( - 50% co...
http://demo.vaadin.com/parking/
Vaadin += GWT
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
Optimized
for Google
speed JSNI
[super]
DevMode
Static
typing
GWT
RPC
compile
time
complexity
widgets
GWT
Compatible
HybridArchitecture
Example

https://github.com/jojule/hybrid
Google
http://domain.com
Web Page Title
First name
Table cell
Table cell
Phone number
Table cell
Table cell
Table cell
Tab...
AddressbookServiceAddress Impl
Backend
Frontend
Server-side"
(with Vaadin)
Client-side"
(with GWT-RPC)
AddressbookEditor
A...
Estimating
Complexity
Server-sideClient-side
1 class
"
190 LOC
4 classes
2 interfaces
~ 500 LOC 3X
Vaadin
RPC
State
server
client
Component
Widget
Connector
RPC
State
Demo
public interface ButtonRpc extends ServerRpc {
public void click(MouseEventDetails details);
}
private ButtonRpc rpc =
Rpc...
Offline
at least 2Xclient-side
> 5X
server-side
• Client-side UI needed as a basis
• Offline detection
• Offline bootstrap
• Local s...
Use Offline
only when really
really needed
Server-side
1 layer UI
Automated"
connection to

server required
Hybrid
1-3 layer UI
You choose"
offline for chosen

functi...
getting
started
with
vaadin
Eclipse
Download plugin
from Martketplace
IntelliJ IDEA
Built-in support
Netbeans
Download plugin
Netbeans Plugin Portal
mvn archetype:generate
-DarchetypeGroupId=
com.vaadin
-DarchetypeArtifactId=
vaadin-archetype-application
-DarchetypeVersi...
Download for Free
vaadin.com/book
728 pages
01
-93-1970-1
PDF, ePub, HTML
Apache
License
community of
100.000+
developers
? joonas@vaadin.com
vaadin.com/joonas
@joonaslehtinen
slideshare.com/
joonaslehtinen
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Server-Client Hybrid UI
Upcoming SlideShare
Loading in …5
×

Server-Client Hybrid UI

1,503 views

Published on

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

Published in: Technology
  • Be the first to comment

Server-Client Hybrid UI

  1. 1. HybridApps @joonaslehtinen Founder & CEO
  2. 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. 3. 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
  4. 4. What about apps?
  5. 5. Web application layers Backend server Web server Commu- nication JavaScript
  6. 6. Web application layers Backend server Web server Commu- nication JavaScript Client-side UI
  7. 7. Web application layers Backend server Web server Commu- nication JavaScript Server-side UI Automated
  8. 8. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication requiredrequired JS required required
  9. 9. Web application layers JavaScript Java to JavaScript Web server Backend server Commu- nication required optionalrequired GWT requiredrequired JS requiredrequired required required Client-side UI
  10. 10. 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 &
  11. 11. 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
  12. 12. Server- Client- side Optim izedfor Productivity Optim izedfor Control
  13. 13. How does the server- side UI work, really?
  14. 14. • Initial HTML • CSS (theme) • Images • JavaScript " 1.2M total
 307k compress 135k reduced widgetset
  15. 15. • name=”Joonas” • button clicked " 261 bytes

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

  17. 17. HybridApps
  18. 18. 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
  19. 19. http://demo.vaadin.com/parking/
  20. 20. Vaadin += GWT
  21. 21. 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
  22. 22. Optimized for Google speed JSNI [super] DevMode Static typing GWT RPC
  23. 23. compile time complexity widgets
  24. 24. GWT Compatible
  25. 25. HybridArchitecture
  26. 26. Example
 https://github.com/jojule/hybrid
  27. 27. 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
  28. 28. 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
  29. 29. Estimating Complexity
  30. 30. Server-sideClient-side 1 class " 190 LOC 4 classes 2 interfaces ~ 500 LOC 3X
  31. 31. Vaadin RPC State
  32. 32. server client Component Widget Connector RPC State Demo
  33. 33. 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
  34. 34. Offline
  35. 35. 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
  36. 36. Use Offline only when really really needed
  37. 37. 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
  38. 38. getting started with vaadin
  39. 39. Eclipse Download plugin from Martketplace
  40. 40. IntelliJ IDEA Built-in support
  41. 41. Netbeans Download plugin Netbeans Plugin Portal
  42. 42. mvn archetype:generate -DarchetypeGroupId= com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion= 7.1.7 Maven
  43. 43. Download for Free vaadin.com/book 728 pages 01 -93-1970-1 PDF, ePub, HTML
  44. 44. Apache License
  45. 45. community of 100.000+ developers
  46. 46. ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen slideshare.com/ joonaslehtinen

×