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

Report

Post on 13-Apr-2017

164 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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

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

top related

lab - session beans - stateful
Documents
deploying stateful web components on multiple...
Documents
your state is not mine: a closer look at evading stateful...
Documents
restler: stateful rest api fuzzing
Documents
packet filtering and stateful firewalls
Documents
mesos go stateful - events.static.linuxfound.org ·...
Documents
stateful workflow paper
Documents
class 22: stateful evaluation rules
Technology
the stateful elephpant
Technology
mesoscon stateful services
Documents
stateful(beans( - unitrento
Documents
slingshot: deploying stateful services in wireless hotspots
Documents
stateful firewalls
Documents
d2w stateful controllers
Technology
stateful services & service orchestration
Documents
stateful connection tracking & stateful nat - open...
Documents
deploying stateful containers with kubernetes ·...
Documents
techwisetv deep dive on stateful nat64 technology: … ·...
Documents
ipv6 address autoconfiguration stateless & stateful
Documents
setting up pfsense as a stateful bridging firewall....
Documents