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

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

HOW?

Google

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

https://github.com/jojule/hybrid

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

!

https://github.com/jojule/hybrid

VaadinTouchKit

? @vaadin @artursignell

@joonaslehtinen