deploying stateful web components on multiple devices with liquid.js for polymer

Architecture, Design and Web Informations Systems Engineering Group

DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE DEVICES

WITH LIQUID.JS FOR POLYMER

Andrea GallidabinoCesare Pautasso

1

Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions

Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer

2

# Devices

# Users



3

SEQUENTIAL SCREENING

APPLE HAND-OFF

4



5

SIMULTANEOUS SCREENING



6

COLLABORATIVE SCENARIO



6


SYNC



8

MULTI-DEVICE SOFTWARE

Adapts to a set of heterogeneous devices

Dynamic Migration (sequential scenarios)

State Synchronisation (collaborative scenarios)



9

METAPHOR



10

LIQUID APPLICATIONS



10

LIQUID APPLICATIONS

Roaming from a device to another one



10

LIQUID APPLICATIONS

Roaming from a device to another one

following user attention



11

LIQUID.JS FOR POLYMER



12

COMPONENT-BASED



12

COMPONENT-BASED

DATA

UI

LOGIC

DATA

UI

LOGIC



12

COMPONENT-BASED

WebComponents Standard

DATA

UI

LOGIC

DATA

UI

LOGIC



12

COMPONENT-BASED


Polymer Framework

DATA

UI

LOGIC

DATA

UI

LOGIC



12

COMPONENT-BASED


Polymer Framework

Fine-grained decomposition

DATA

UI

LOGIC

DATA

UI

LOGIC



13

COMPONENT APIDevice 1

Device 2



13


Device 2

Create(component_Type, device)



13


Device 2


Delete(component)



13


Device 2


Delete(component)

Move(component, device)



14

SEQUENTIAL SCREENING



15


Device 2


Delete(component)




15


Device 2


Delete(component)


Fork(component, device)



15


Device 2


Delete(component)



Pair(component_1, component_2)



SYNC

15


Device 2


Delete(component)






SYNC

15


Device 2


Delete(component)




Clone(component, device)



SYNC

15


Device 2


Delete(component)





Unpair(component_1, component_2)



15


Device 2


Delete(component)





Unpair(component_1, component_2)



16

SIMULTANEOUS SCREENING



17


SYNC



18

STATEFUL COMPONENTS



18

STATEFUL COMPONENTS

Var 1 Var 2

Var 3 Var 4

Var 5

Component

Component



19

VARIABLE API



19

VARIABLE API

Var 1 Var 2

Component

Var 3



19

VARIABLE API

Var 1 Var 2

Component

LiquidBehavior Var 3



19

VARIABLE API

Var 1 Var 2LiquidBehavior Var 3

Liquid Component



19

VARIABLE API

Register (variable)Var 1 Var 2Liquid

Behavior Var 3

Liquid Component



19

VARIABLE API

Register (variable)Var 1 Var 2Liquid

Behavior Var 3

Liquid Component

Var 1



19

VARIABLE API

Register (variable)

Pair (var_1, var_2)


Liquid Component

Var 1



19

VARIABLE API

Register (variable)

Pair (var_1, var_2)


Liquid Component

Var 1

Liquid Component

LiquidBehavior Var 4 Var 5



19

VARIABLE API

Register (variable)

Pair (var_1, var_2)


Liquid Component

Var 1

Liquid Component

LiquidBehavior Var 4 Var 5

SYNC



20

VARIABLE POLICIES

20



20

VARIABLE POLICIES

Sharing

20



20

VARIABLE POLICIES

Sharing

Component Scope

20



20

VARIABLE POLICIES

Sharing

Component Scope

Device Deployment

20



20

VARIABLE POLICIES

Sharing

Component Scope

Device Deployment

Persistence

20



21

SHARING POLICY



21

SHARING POLICYLiquid Component

1 2

3

Liquid Component

1 2

3

Liquid Component

1 2

3



21

SHARING POLICYLiquid Component

1 2

3

Liquid Component

1 2

3

Liquid Component

1 2

3

Cloned



21

SHARING POLICY

Shared

Liquid Component

1 2

3

Liquid Component

1 2

3

Liquid Component

1 2

3

1 2 3

Cloned



21

SHARING POLICY

Shared

Local

Liquid Component

1 2

3

Liquid Component

1 2

3

Liquid Component

1 2

3

1 2 3

Cloned



21

SHARING POLICY

Shared

Local

Liquid Component

1 2

3

Liquid Component

1 2

3

Liquid Component

1 2

3

1

2

3

Cloned



21

SHARING POLICY

Shared

Local

Global

Liquid Component

1 2

3

Liquid Component

1 2

3

Liquid Component

1 2

3

1

2

3

Cloned



22

COMPONENT SCOPE



22

COMPONENT SCOPELiquid Component 1

1 2

3

Liquid Component 1

1 2

3



22

COMPONENT SCOPELiquid Component 1

1 2

3

Liquid Component 2

4 5

Liquid Component 1

1 2

3



22

COMPONENT SCOPE

Intra-component

Liquid Component 1

1 2

3

Liquid Component 2

4 5

Liquid Component 1

1 2

3



22

COMPONENT SCOPE

Intra-component

Inter-component

Liquid Component 1

1 2

3

Liquid Component 2

4 5

Liquid Component 1

1 2

3



23

DEVICE DEPLOYMENT



23

DEVICE DEPLOYMENTLC1

1 2

LC2

3 54

LC3



23

DEVICE DEPLOYMENT

One device

LC1

1 2

LC2

3 54

LC3



23

DEVICE DEPLOYMENT

One device

Many devices

LC1

1 2

LC2

3 54

LC3



24

PERSISTENCE POLICY



24

PERSISTENCE POLICY

VariableValue ‘Default’

Liquid Component



24

PERSISTENCE POLICY

Volatile


Liquid Component



24

PERSISTENCE POLICY

Volatile

VariableValue ‘Changed’

Liquid Component



24

PERSISTENCE POLICY

Volatile



24

PERSISTENCE POLICY

Volatile


Liquid Component



24

PERSISTENCE POLICY

Volatile

SessionVariableValue ‘Default’

Liquid Component



24

PERSISTENCE POLICY

Volatile

SessionVariableValue ‘Changed’

Liquid Component



24

PERSISTENCE POLICY

Volatile

Session



24

PERSISTENCE POLICY

Volatile

SessionVariableValue ‘Changed’

Liquid Component



24

PERSISTENCE POLICY

Volatile

Session



24

PERSISTENCE POLICY

Volatile

SessionVariableValue ‘Default’

Liquid Component



24

PERSISTENCE POLICY

Volatile

Session

Persistent


Liquid Component



24

PERSISTENCE POLICY

Volatile

Session

Persistent

Liquid Component




24

PERSISTENCE POLICY

Volatile

Session

Persistent



24

PERSISTENCE POLICY

Volatile

Session

Persistent


Liquid Component



25

DECISION



25

DECISION

Persistence Sharing

ScopeDeployment



25

DECISION

Persistence Sharing

Intra-Component Inter-Component1 Device 1 DeviceMany Many

Global

Global

Global

Shared

Shared

Shared

Local

Local

Local

Persistent

Session

Volatile

ScopeDeployment



25

DECISION

Persistence Sharing


Global

Global

Global

Shared

Shared

Shared

Local

Local

Local

Persistent

Session

VolatileBrowser Memory

Browser Memory

Browser Memory Browser Memory Browser Memory Browser Memory

Browser Memory Browser Memory Browser Memory

ScopeDeployment



25

DECISION

Persistence Sharing


Global

Global

Global

Shared

Shared

Shared

Local

Local

Local

Persistent

Session


Browser Memory



Session Storage

Session Storage

Session Storage

Session Storage

Session Storage

ServerServer

ServerServer

ScopeDeployment



25

DECISION

Persistence Sharing


Global

Global

Global

Shared

Shared

Shared

Local

Local

Local

Persistent

Session


Browser Memory



Session Storage

Session Storage

Session Storage

Session Storage

Session Storage

Local Storage

Local Storage

Local Storage

Local Storage

Local Storage

ServerServer

ServerServer

ServerServer

ServerServer

ScopeDeployment



26

WHERE DO WE STORE THE STATE



26

WHERE DO WE STORE THE STATEDevice 1 Device 2Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

1 2 3 1 2 3



26

WHERE DO WE STORE THE STATEDevice 1 Device 2

WebRTC

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

1 2 3 1 2 3



26

WHERE DO WE STORE THE STATEDevice 1 Device 2Server

WebRTC

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

1 2 3 1 2 3



26


WebRTC

WebSockets

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

1 2 3 1 2 3



26


WebRTC

WebSockets

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

11 2 3 1 2 3



26


WebRTC

WebSockets

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

11 2 3 1 2 3

Database



26


WebRTC

WebSockets

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

1

22

1 2 3 1 2 3

Database



26


WebRTC

WebSockets

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

1

22

1 2 3 1 2 3

Database

BrowserMemory

BrowserMemory



26


WebRTC

WebSockets

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

1

3

2

43

2

4

1 2 3 1 2 3

Database

BrowserMemory

BrowserMemory



26


WebRTC

WebSockets

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

1

3

2

43

2

4

1 2 3 1 2 3

Database

BrowserMemory

BrowserMemory

LocalStorage

LocalStorage



26


WebRTC

WebSockets

Liquid Component

LiquidBehavior

Liquid Component

LiquidBehavior

1

3

2

43

2

4

1 2 3 1 2 3

Database

BrowserMemory

BrowserMemory

LocalStorage

LocalStorage

SessionStorage

SessionStorage



27

CONCLUSION



27

CONCLUSIONSolution for the three use case scenarios:



27


sequential screening, simultaneous screening, collaborative



27



Transparently synchronise component state



27



Transparently synchronise component state

Decentralised environment



28

FUTURE WORK

DATA

UI

LOGIC



29

WWW’16 (Demo paper)A. Gallidabino, and C. Pautasso. The Liquid.js framework for

migrating and cloning stateful Web components across multiple devices

WICSA‘16A.Gallidabino, C. Pautasso, T.

Mikkonen, V. Ilvonen, K. Systä, J.-P. Voutilainen, and A. Taivalsaari.

On the architecture of liquid software: Technology alternatives and design space

ICWE’15T. Mikkonen, K. Systä, and C.

PautassoTowards liquid web applications

COMPSAC‘14A. Taivalsaari, T. Mikkonen, and K.

SystäLiquid Software Manifesto: The Era

of Multiple Device Ownership and Its Implications for Software Architecture


Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer1st International Workshop on

Liquid Multi-Device Software for the Web

`http://icwe2016.inf.usi.ch/liquid

http://icwe2016.inf.usi.ch/liquid