SlideShare a Scribd company logo
1 of 51
Download to read offline
HybridApps
@artursignell
VP of R&D
@joonaslehtinen
Founder & CEO
Warning

Just 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
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
requiredrequired
JS
required required
Web application layers
JavaScript
Java to
JavaScript
Web
server
Backend
server
Commu-
nication
required optionalrequired
GWT
requiredrequired
JS
requiredrequired
required required
Client-side UI
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 &
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
Server-
Client-
side
Optim
izedfor
Productivity
Optim
izedfor
Control
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
http://demo.vaadin.com/parking/
HOW?
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
https://github.com/jojule/hybrid
AddressbookBackend
Address Impl
AddressbookBackendAddress Impl
Backend
Frontend
Server-side!
(with Vaadin)
Client-side!
(with GWT-RPC)
AddressbookEditor
AddressbookBackendAddress Impl
Backend
Frontend
Server-side!
(with Vaadin)
Client-side!
(with GWT-RPC)
AddressbookEditor
AddressbookEditor
View
Connector
Client
Server
create
place
AddressbookBackendAddress Impl
Backend
Frontend
Server-side!
(with Vaadin)
Client-side!
(with GWT-RPC)
AddressbookEditor
AddressbookEditor
RPCServlet ServiceView
Connector
Client
Server
create
place
implements
AddressbookBackendAddress 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
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 Impl
Backend
Frontend
Client-side!
(with Conntector)
Client-side!
(with GWT-RPC)
AddressbookEditor
RPCServlet Service
ServiceAsync
View
Client
Server
place
implements
equal
View
place & !
serve
AddressbookEditor
State
Server!
RPC
Client!
RPC
Connector Proxy

(generated)
create
implements
Connector
create
PUSH
Offline
<html manifest="hybrid.appcache">
!
!
<inherits name="com.vaadin.Vaadin" /> 

<entry-point class="example.client.OfflineEntry"/>
!
!
rootPanel.add(new AddressbookEditor());
Offline Bootstrap
CACHE 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 Impl
Backend
Frontend
Offline!
(with Conntector)
Client
Server
View
place & !
serve
AddressbookEditor
State
Server!
RPC
Client!
RPC
create OfflineDetector
DataStore
offline.html
Connector !
!
localStorage
cache manifest
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
Estimating Complexity
Use Offline
only when really
really needed
State today
Warning

Just 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
!
https://github.com/jojule/hybrid
Vaadin

TouchKit
? @vaadin
@artursignell
@joonaslehtinen

More Related Content

Viewers also liked

Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conferenceVaadin intro at GWT.create conference
Vaadin intro at GWT.create conferenceJoonas Lehtinen
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular UJoonas Lehtinen
 
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 editionVaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 editionJoonas Lehtinen
 
Web Components for Java Developers
Web Components for Java DevelopersWeb Components for Java Developers
Web Components for Java DevelopersJoonas Lehtinen
 

Viewers also liked (8)

Vaadin
VaadinVaadin
Vaadin
 
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conferenceVaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
 
Vaadin Components
Vaadin ComponentsVaadin Components
Vaadin Components
 
Vaadin & Web Components
Vaadin & Web ComponentsVaadin & Web Components
Vaadin & Web Components
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular U
 
Vaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 editionVaadin Introduction, 7.3 edition
Vaadin Introduction, 7.3 edition
 
JVM Reactive Programming
JVM Reactive ProgrammingJVM Reactive Programming
JVM Reactive Programming
 
Web Components for Java Developers
Web Components for Java DevelopersWeb Components for Java Developers
Web Components for Java Developers
 

Similar to Hybrid webinar

Server-Client Hybrid UI
Server-Client Hybrid UIServer-Client Hybrid UI
Server-Client Hybrid UIjojule
 
Web polyglot programming
Web polyglot programmingWeb polyglot programming
Web polyglot programmingDmitry Buzdin
 
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015hezamu
 
Marvel of Annotation Preprocessing in Java by Alexey Buzdin
Marvel of Annotation Preprocessing in Java by Alexey BuzdinMarvel of Annotation Preprocessing in Java by Alexey Buzdin
Marvel of Annotation Preprocessing in Java by Alexey BuzdinJava User Group Latvia
 
Modern Web App Architectures
Modern Web App ArchitecturesModern Web App Architectures
Modern Web App ArchitecturesRaphael Stary
 
REST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentREST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentHyunghun Cho
 
Wakanda - apps.berlin.js - 2012-11-29
Wakanda - apps.berlin.js - 2012-11-29Wakanda - apps.berlin.js - 2012-11-29
Wakanda - apps.berlin.js - 2012-11-29Alexandre Morgaut
 
Netapp Michael Galpin
Netapp Michael GalpinNetapp Michael Galpin
Netapp Michael Galpinrajivmordani
 
The Future of Headless
The Future of HeadlessThe Future of Headless
The Future of HeadlessWP Engine
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationAndrew Rota
 
Continuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWSContinuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWSDanilo Poccia
 
"Running Node.js in your browser with WebContainers", Oleksandr Zinevych
"Running Node.js in your browser with WebContainers", Oleksandr Zinevych "Running Node.js in your browser with WebContainers", Oleksandr Zinevych
"Running Node.js in your browser with WebContainers", Oleksandr Zinevych Fwdays
 
Vaadin and Spring at Devoxx UK 2015
Vaadin and Spring at Devoxx UK 2015Vaadin and Spring at Devoxx UK 2015
Vaadin and Spring at Devoxx UK 2015Sami Ekblad
 
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...Joonas Lehtinen
 
Evolving Mobile Architectures
Evolving Mobile ArchitecturesEvolving Mobile Architectures
Evolving Mobile Architecturessgleadow
 

Similar to Hybrid webinar (20)

Hybrid applications
Hybrid applicationsHybrid applications
Hybrid applications
 
Server-Client Hybrid UI
Server-Client Hybrid UIServer-Client Hybrid UI
Server-Client Hybrid UI
 
Web polyglot programming
Web polyglot programmingWeb polyglot programming
Web polyglot programming
 
Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015Introduction to Vaadin, GWT.create 2015
Introduction to Vaadin, GWT.create 2015
 
Vaadin 7.2
Vaadin 7.2Vaadin 7.2
Vaadin 7.2
 
Mlocjs buzdin
Mlocjs buzdinMlocjs buzdin
Mlocjs buzdin
 
Marvel of Annotation Preprocessing in Java by Alexey Buzdin
Marvel of Annotation Preprocessing in Java by Alexey BuzdinMarvel of Annotation Preprocessing in Java by Alexey Buzdin
Marvel of Annotation Preprocessing in Java by Alexey Buzdin
 
Modern Web App Architectures
Modern Web App ArchitecturesModern Web App Architectures
Modern Web App Architectures
 
REST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side DevelopmentREST to JavaScript for Better Client-side Development
REST to JavaScript for Better Client-side Development
 
Wakanda - apps.berlin.js - 2012-11-29
Wakanda - apps.berlin.js - 2012-11-29Wakanda - apps.berlin.js - 2012-11-29
Wakanda - apps.berlin.js - 2012-11-29
 
Netapp Michael Galpin
Netapp Michael GalpinNetapp Michael Galpin
Netapp Michael Galpin
 
The Future of Headless
The Future of HeadlessThe Future of Headless
The Future of Headless
 
dotNetConf2019
dotNetConf2019dotNetConf2019
dotNetConf2019
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
 
Continuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWSContinuous Integration and Deployment Best Practices on AWS
Continuous Integration and Deployment Best Practices on AWS
 
"Running Node.js in your browser with WebContainers", Oleksandr Zinevych
"Running Node.js in your browser with WebContainers", Oleksandr Zinevych "Running Node.js in your browser with WebContainers", Oleksandr Zinevych
"Running Node.js in your browser with WebContainers", Oleksandr Zinevych
 
Gwt Presentation1
Gwt Presentation1Gwt Presentation1
Gwt Presentation1
 
Vaadin and Spring at Devoxx UK 2015
Vaadin and Spring at Devoxx UK 2015Vaadin and Spring at Devoxx UK 2015
Vaadin and Spring at Devoxx UK 2015
 
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...
 
Evolving Mobile Architectures
Evolving Mobile ArchitecturesEvolving Mobile Architectures
Evolving Mobile Architectures
 

More from Joonas Lehtinen

More from Joonas Lehtinen (20)

Vaadin intro
Vaadin introVaadin intro
Vaadin intro
 
Notes on architecture
Notes on architectureNotes on architecture
Notes on architecture
 
Vaadin roadmap-devoxx-2013
Vaadin roadmap-devoxx-2013Vaadin roadmap-devoxx-2013
Vaadin roadmap-devoxx-2013
 
Beoynd Vaadin 7
Beoynd Vaadin 7Beoynd Vaadin 7
Beoynd Vaadin 7
 
Vaadin 7
Vaadin 7Vaadin 7
Vaadin 7
 
Vaadin7
Vaadin7Vaadin7
Vaadin7
 
Hackathon - Building vaadin add on components
Hackathon - Building vaadin add on componentsHackathon - Building vaadin add on components
Hackathon - Building vaadin add on components
 
Vaadin7
Vaadin7Vaadin7
Vaadin7
 
Vaadin today and tomorrow
Vaadin today and tomorrowVaadin today and tomorrow
Vaadin today and tomorrow
 
Migration from vaadin 6 to vaadin 7 devoxx france 2013
Migration from vaadin 6 to vaadin 7   devoxx france 2013Migration from vaadin 6 to vaadin 7   devoxx france 2013
Migration from vaadin 6 to vaadin 7 devoxx france 2013
 
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-javaVaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
 
Vaadin 7 Today and Tomorrow
Vaadin 7 Today and TomorrowVaadin 7 Today and Tomorrow
Vaadin 7 Today and Tomorrow
 
Vaadin 7
Vaadin 7Vaadin 7
Vaadin 7
 
Desingning reusable web components
Desingning reusable web componentsDesingning reusable web components
Desingning reusable web components
 
Lecture: Vaadin Overview
Lecture: Vaadin OverviewLecture: Vaadin Overview
Lecture: Vaadin Overview
 
Vaadin 7
Vaadin 7Vaadin 7
Vaadin 7
 
Vaadin 7 what next
Vaadin 7   what nextVaadin 7   what next
Vaadin 7 what next
 
Client-Server Hybrid Apps with Vaadin
Client-Server Hybrid Apps with VaadinClient-Server Hybrid Apps with Vaadin
Client-Server Hybrid Apps with Vaadin
 
Building i pad apps in pure java with vaadin
Building i pad apps in pure java with vaadinBuilding i pad apps in pure java with vaadin
Building i pad apps in pure java with vaadin
 
Vaadin += GWT
Vaadin += GWTVaadin += GWT
Vaadin += GWT
 

Hybrid webinar