Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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
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
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
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
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
3
SEQUENTIAL SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
3
SEQUENTIAL SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
3
SEQUENTIAL SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
3
SEQUENTIAL SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
3
SEQUENTIAL SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
3
SEQUENTIAL SCREENING
APPLE HAND-OFF
4
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
5
SIMULTANEOUS SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
5
SIMULTANEOUS SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
5
SIMULTANEOUS SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
5
SIMULTANEOUS SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
5
SIMULTANEOUS SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
5
SIMULTANEOUS SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
6
COLLABORATIVE SCENARIO
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
6
COLLABORATIVE SCENARIO
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
6
COLLABORATIVE SCENARIO
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
6
COLLABORATIVE SCENARIO
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
6
COLLABORATIVE SCENARIO
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
6
COLLABORATIVE SCENARIO
SYNC
7
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
8
MULTI-DEVICE SOFTWARE
Adapts to a set of heterogeneous devices
Dynamic Migration (sequential scenarios)
State Synchronisation (collaborative scenarios)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
10
LIQUID APPLICATIONS
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
10
LIQUID APPLICATIONS
Roaming from a device to another one
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
10
LIQUID APPLICATIONS
Roaming from a device to another one
following user attention
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
11
LIQUID.JS FOR POLYMER
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
12
COMPONENT-BASED
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
12
COMPONENT-BASED
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
12
COMPONENT-BASED
DATA
UI
LOGIC
DATA
UI
LOGIC
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
12
COMPONENT-BASED
WebComponents Standard
DATA
UI
LOGIC
DATA
UI
LOGIC
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
12
COMPONENT-BASED
WebComponents Standard
Polymer Framework
DATA
UI
LOGIC
DATA
UI
LOGIC
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
12
COMPONENT-BASED
WebComponents Standard
Polymer Framework
Fine-grained decomposition
DATA
UI
LOGIC
DATA
UI
LOGIC
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
13
COMPONENT APIDevice 1
Device 2
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
13
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
13
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
13
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
13
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
13
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
13
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
13
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
14
SEQUENTIAL SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
15
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
15
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Fork(component, device)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
15
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Fork(component, device)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
15
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Fork(component, device)
Pair(component_1, component_2)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
SYNC
15
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Fork(component, device)
Pair(component_1, component_2)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
SYNC
15
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Fork(component, device)
Pair(component_1, component_2)
Clone(component, device)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
SYNC
15
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Fork(component, device)
Pair(component_1, component_2)
Clone(component, device)
Unpair(component_1, component_2)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
15
COMPONENT APIDevice 1
Device 2
Create(component_Type, device)
Delete(component)
Move(component, device)
Fork(component, device)
Pair(component_1, component_2)
Clone(component, device)
Unpair(component_1, component_2)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
16
SIMULTANEOUS SCREENING
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
17
COLLABORATIVE SCENARIO
SYNC
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
18
STATEFUL COMPONENTS
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
18
STATEFUL COMPONENTS
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
18
STATEFUL COMPONENTS
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
18
STATEFUL COMPONENTS
Var 1 Var 2
Var 3 Var 4
Var 5
Component
Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
19
VARIABLE API
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
19
VARIABLE API
Var 1 Var 2
Component
Var 3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
19
VARIABLE API
Var 1 Var 2
Component
LiquidBehavior Var 3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
19
VARIABLE API
Var 1 Var 2LiquidBehavior Var 3
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
19
VARIABLE API
Register (variable)Var 1 Var 2Liquid
Behavior Var 3
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
19
VARIABLE API
Register (variable)Var 1 Var 2Liquid
Behavior Var 3
Liquid Component
Var 1
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
19
VARIABLE API
Register (variable)
Pair (var_1, var_2)
Var 1 Var 2LiquidBehavior Var 3
Liquid Component
Var 1
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
19
VARIABLE API
Register (variable)
Pair (var_1, var_2)
Var 1 Var 2LiquidBehavior Var 3
Liquid Component
Var 1
Liquid Component
LiquidBehavior Var 4 Var 5
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
19
VARIABLE API
Register (variable)
Pair (var_1, var_2)
Var 1 Var 2LiquidBehavior Var 3
Liquid Component
Var 1
Liquid Component
LiquidBehavior Var 4 Var 5
SYNC
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
20
VARIABLE POLICIES
20
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
20
VARIABLE POLICIES
Sharing
20
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
20
VARIABLE POLICIES
Sharing
Component Scope
20
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
20
VARIABLE POLICIES
Sharing
Component Scope
Device Deployment
20
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
20
VARIABLE POLICIES
Sharing
Component Scope
Device Deployment
Persistence
20
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
21
SHARING POLICY
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
21
SHARING POLICYLiquid Component
1 2
3
Liquid Component
1 2
3
Liquid Component
1 2
3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
21
SHARING POLICYLiquid Component
1 2
3
Liquid Component
1 2
3
Liquid Component
1 2
3
Cloned
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
21
SHARING POLICY
Shared
Liquid Component
1 2
3
Liquid Component
1 2
3
Liquid Component
1 2
3
1 2 3
Cloned
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
21
SHARING POLICY
Shared
Liquid Component
1 2
3
Liquid Component
1 2
3
Liquid Component
1 2
3
1 2 3
Cloned
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
21
SHARING POLICY
Shared
Local
Liquid Component
1 2
3
Liquid Component
1 2
3
Liquid Component
1 2
3
1 2 3
Cloned
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
21
SHARING POLICY
Shared
Local
Liquid Component
1 2
3
Liquid Component
1 2
3
Liquid Component
1 2
3
1
2
3
Cloned
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
21
SHARING POLICY
Shared
Local
Liquid Component
1 2
3
Liquid Component
1 2
3
Liquid Component
1 2
3
1
2
3
Cloned
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
22
COMPONENT SCOPE
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
22
COMPONENT SCOPELiquid Component 1
1 2
3
Liquid Component 1
1 2
3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
22
COMPONENT SCOPELiquid Component 1
1 2
3
Liquid Component 2
4 5
Liquid Component 1
1 2
3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
22
COMPONENT SCOPE
Intra-component
Liquid Component 1
1 2
3
Liquid Component 2
4 5
Liquid Component 1
1 2
3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
22
COMPONENT SCOPE
Intra-component
Liquid Component 1
1 2
3
Liquid Component 2
4 5
Liquid Component 1
1 2
3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
22
COMPONENT SCOPE
Intra-component
Liquid Component 1
1 2
3
Liquid Component 2
4 5
Liquid Component 1
1 2
3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
22
COMPONENT SCOPE
Intra-component
Inter-component
Liquid Component 1
1 2
3
Liquid Component 2
4 5
Liquid Component 1
1 2
3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
22
COMPONENT SCOPE
Intra-component
Inter-component
Liquid Component 1
1 2
3
Liquid Component 2
4 5
Liquid Component 1
1 2
3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
23
DEVICE DEPLOYMENT
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
23
DEVICE DEPLOYMENTLC1
1 2
LC2
3 54
LC3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
23
DEVICE DEPLOYMENT
One device
LC1
1 2
LC2
3 54
LC3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
23
DEVICE DEPLOYMENT
One device
LC1
1 2
LC2
3 54
LC3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
23
DEVICE DEPLOYMENT
One device
LC1
1 2
LC2
3 54
LC3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
23
DEVICE DEPLOYMENT
One device
Many devices
LC1
1 2
LC2
3 54
LC3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
23
DEVICE DEPLOYMENT
One device
Many devices
LC1
1 2
LC2
3 54
LC3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
VariableValue ‘Default’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
VariableValue ‘Default’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
VariableValue ‘Changed’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
VariableValue ‘Default’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
SessionVariableValue ‘Default’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
SessionVariableValue ‘Changed’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
Session
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
SessionVariableValue ‘Changed’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
Session
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
SessionVariableValue ‘Default’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
Session
Persistent
VariableValue ‘Default’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
Session
Persistent
Liquid Component
VariableValue ‘Changed’
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
Session
Persistent
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
24
PERSISTENCE POLICY
Volatile
Session
Persistent
VariableValue ‘Changed’
Liquid Component
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
25
DECISION
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
25
DECISION
Persistence Sharing
ScopeDeployment
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
25
DECISION
Persistence Sharing
Intra-Component Inter-Component1 Device 1 DeviceMany Many
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
25
DECISION
Persistence Sharing
Intra-Component Inter-Component1 Device 1 DeviceMany Many
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
Session Storage
Session Storage
Session Storage
Session Storage
Session Storage
ServerServer
ServerServer
ScopeDeployment
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
25
DECISION
Persistence Sharing
Intra-Component Inter-Component1 Device 1 DeviceMany Many
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
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATE
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Liquid Component
LiquidBehavior
Liquid Component
LiquidBehavior
1 2 3 1 2 3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2
WebRTC
Liquid Component
LiquidBehavior
Liquid Component
LiquidBehavior
1 2 3 1 2 3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Server
WebRTC
Liquid Component
LiquidBehavior
Liquid Component
LiquidBehavior
1 2 3 1 2 3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Server
WebRTC
WebSockets
Liquid Component
LiquidBehavior
Liquid Component
LiquidBehavior
1 2 3 1 2 3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Server
WebRTC
WebSockets
Liquid Component
LiquidBehavior
Liquid Component
LiquidBehavior
11 2 3 1 2 3
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Server
WebRTC
WebSockets
Liquid Component
LiquidBehavior
Liquid Component
LiquidBehavior
11 2 3 1 2 3
Database
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Server
WebRTC
WebSockets
Liquid Component
LiquidBehavior
Liquid Component
LiquidBehavior
1
22
1 2 3 1 2 3
Database
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Server
WebRTC
WebSockets
Liquid Component
LiquidBehavior
Liquid Component
LiquidBehavior
1
22
1 2 3 1 2 3
Database
BrowserMemory
BrowserMemory
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Server
WebRTC
WebSockets
Liquid Component
LiquidBehavior
Liquid Component
LiquidBehavior
1
3
2
43
2
4
1 2 3 1 2 3
Database
BrowserMemory
BrowserMemory
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Server
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
26
WHERE DO WE STORE THE STATEDevice 1 Device 2Server
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
27
CONCLUSION
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
27
CONCLUSIONSolution for the three use case scenarios:
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
27
CONCLUSIONSolution for the three use case scenarios:
sequential screening, simultaneous screening, collaborative
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
27
CONCLUSIONSolution for the three use case scenarios:
sequential screening, simultaneous screening, collaborative
Transparently synchronise component state
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
27
CONCLUSIONSolution for the three use case scenarios:
sequential screening, simultaneous screening, collaborative
Transparently synchronise component state
Decentralised environment
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
28
FUTURE WORK
DATA
UI
LOGIC
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
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
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
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