hybrid webinar
TRANSCRIPT
HybridApps@artursignell VP of R&D
@joonaslehtinen Founder & CEO
WarningJust an idea - not a proven best practice
Hybrid?
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
JavaScriptJava to
JavaScriptWeb
serverBackend
serverCommu- nication
requiredrequiredJS required required
Web application layers
JavaScriptJava to
JavaScriptWeb
serverBackend
serverCommu- nication
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
Client-side UI
Web application layers
JavaScriptJava to
JavaScriptWeb
serverBackend
server
required optional optionalrequired
Commu- nication
optional
Vaadin
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
Client-side UIServer-side UI &
Web application layers
JavaScriptJava to
JavaScriptWeb
serverBackend
server
required optional optionalrequired
Commu- nication
optional
Vaadin
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
1 layer vs
3 layers
-50% dev. time -50% maintenance vs full control over DOM and communications
Server-
Client-
side
Optim
ized fo
r
Prod
uctivity
Optim
ized for
Con
trol
HybridArchitecture
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
HOW?
http://domain.com
Web Page Title
First nameTable cell
Table cell
Phone number
Table cell
Table cell
Table cellTable cellTable cell
Table cell
Table cellTable cell
Table cellTable cell
Table cell
Table cell Table cell
Table cell
Last name
Table cellTable cell
Email address
Table cellTable 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
OfflineClient-side Vaadin-RPC
Client-side GWT-RPCServer-side
Edit Delete New
Save Cancel
First name Last name
Phone number Email address
AddressbookBackend
Address Impl
AddressbookBackendAddress ImplBackendFrontend
Server-side!(with Vaadin)
Client-side!(with GWT-RPC)
AddressbookEditor
AddressbookBackendAddress ImplBackendFrontend
Server-side!(with Vaadin)
Client-side!(with GWT-RPC)
AddressbookEditor
AddressbookEditor
View
Connector
Client
Server
create
place
AddressbookBackendAddress ImplBackendFrontend
Server-side!(with Vaadin)
Client-side!(with GWT-RPC)
AddressbookEditor
AddressbookEditor
RPCServlet ServiceView
Connector
Client
Server
create
place
implements
AddressbookBackendAddress ImplBackendFrontend
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
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 = 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
AddressbookBackendAddress ImplBackendFrontend
Client-side!(with Conntector)
Client-side!(with GWT-RPC)
AddressbookEditor
RPCServlet Service
ServiceAsync
View
Client
Serverplace
implements
equal
View
place & !serve
AddressbookEditor
StateServer!RPC
Client!RPC
Connector Proxy(generated)
createimplementsConnector
create
PUSH
Offline
<html manifest="hybrid.appcache">
!
!
<inherits name="com.vaadin.Vaadin" /> <entry-point class="example.client.OfflineEntry"/> !
!
rootPanel.add(new AddressbookEditor());
Offline BootstrapCACHE MANIFEST!!CACHE:!offline.html!VAADIN/vaadinBootstrap.js!VAADIN/themes/hybrid/favicon.ico!VAADIN/themes/hybrid/styles.css!VAADIN/widgetsets/or…t.nocache.js!VAADIN/widgetsets/or…ear.cache.gif!!NETWORK:!*
widgetset
ApplicationConfiguration.onModuleLoad()
Offline Detection
Offline Mode !/offline.html
Online Mode !/
window.navigator.onLine
redirect
com.google.gwt.storage.client.Storage
!
queueOperation("{\"op\": \"delete\", \"id\": " + id + "}"); Storage.getSessionStorageIfSupported() .setItem(KEY, pendingCommandsJSON)
!
purgeQueue() serverRpc.deleteAddress(id);
Local Storage & Synchronization
When offline
Back online
AddressbookBackendAddress ImplBackendFrontend
Offline!(with Conntector)
Client
Server
View
place & !serve
AddressbookEditor
StateServer!RPC
Client!RPC
create OfflineDetector
DataStore
offline.html
Connector !!
localStorage
cache manifest
at least 2Xclient-side
> 5Xserver-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
Estimating Complexity
Use Offline only when really
really needed
State today
WarningJust an idea - not a proven best practice
GWT += Server-Side !
GWT += Push !
Server-Side += Offline !
Optimize Server-Side
?
Client-side Widget API !
Tutorials !
Unified Themeing !
Offline Detection !
Manifest generation
!
VaadinTouchKit
? @vaadin @artursignell
@joonaslehtinen