DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE...
Transcript of DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE...
![Page 1: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/1.jpg)
Architecture, Design and Web Informations Systems Engineering Group
DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE DEVICES
WITH LIQUID.JS FOR POLYMER
Andrea GallidabinoCesare Pautasso
1
![Page 2: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/2.jpg)
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
![Page 3: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/3.jpg)
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
![Page 4: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/4.jpg)
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
![Page 5: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/5.jpg)
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
![Page 6: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/6.jpg)
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
![Page 7: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/7.jpg)
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
![Page 8: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/8.jpg)
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
![Page 9: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/9.jpg)
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
![Page 10: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/10.jpg)
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
![Page 11: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/11.jpg)
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
![Page 12: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/12.jpg)
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
![Page 13: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/13.jpg)
APPLE HAND-OFF
4
![Page 14: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/14.jpg)
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
![Page 15: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/15.jpg)
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
![Page 16: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/16.jpg)
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
![Page 17: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/17.jpg)
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
![Page 18: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/18.jpg)
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
![Page 19: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/19.jpg)
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
![Page 20: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/20.jpg)
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
![Page 21: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/21.jpg)
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
![Page 22: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/22.jpg)
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
![Page 23: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/23.jpg)
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
![Page 24: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/24.jpg)
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
![Page 25: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/25.jpg)
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
![Page 26: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/26.jpg)
7
![Page 27: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/27.jpg)
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)
![Page 28: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/28.jpg)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
![Page 29: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/29.jpg)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
![Page 30: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/30.jpg)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
![Page 31: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/31.jpg)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
![Page 32: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/32.jpg)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
![Page 33: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/33.jpg)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
![Page 34: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/34.jpg)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
9
METAPHOR
![Page 35: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/35.jpg)
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
![Page 36: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/36.jpg)
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
![Page 37: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/37.jpg)
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
![Page 38: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/38.jpg)
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
![Page 39: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/39.jpg)
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
![Page 40: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/40.jpg)
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
![Page 41: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/41.jpg)
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
![Page 42: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/42.jpg)
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
![Page 43: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/43.jpg)
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
![Page 44: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/44.jpg)
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
![Page 45: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/45.jpg)
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
![Page 46: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/46.jpg)
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)
![Page 47: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/47.jpg)
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)
![Page 48: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/48.jpg)
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)
![Page 49: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/49.jpg)
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)
![Page 50: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/50.jpg)
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)
![Page 51: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/51.jpg)
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)
![Page 52: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/52.jpg)
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)
![Page 53: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/53.jpg)
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
![Page 54: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/54.jpg)
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)
![Page 55: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/55.jpg)
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)
![Page 56: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/56.jpg)
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)
![Page 57: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/57.jpg)
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)
![Page 58: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/58.jpg)
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)
![Page 59: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/59.jpg)
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)
![Page 60: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/60.jpg)
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)
![Page 61: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/61.jpg)
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)
![Page 62: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/62.jpg)
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
![Page 63: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/63.jpg)
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
![Page 64: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/64.jpg)
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
![Page 65: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/65.jpg)
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
![Page 66: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/66.jpg)
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
![Page 67: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/67.jpg)
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
![Page 68: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/68.jpg)
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
![Page 69: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/69.jpg)
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
![Page 70: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/70.jpg)
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
![Page 71: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/71.jpg)
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
![Page 72: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/72.jpg)
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
![Page 73: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/73.jpg)
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
![Page 74: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/74.jpg)
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
![Page 75: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/75.jpg)
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
![Page 76: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/76.jpg)
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
![Page 77: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/77.jpg)
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
![Page 78: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/78.jpg)
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
![Page 79: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/79.jpg)
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
![Page 80: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/80.jpg)
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
![Page 81: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/81.jpg)
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
![Page 82: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/82.jpg)
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
![Page 83: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/83.jpg)
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
![Page 84: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/84.jpg)
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
![Page 85: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/85.jpg)
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
![Page 86: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/86.jpg)
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
![Page 87: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/87.jpg)
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
![Page 88: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/88.jpg)
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
![Page 89: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/89.jpg)
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
![Page 90: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/90.jpg)
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
![Page 91: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/91.jpg)
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
![Page 92: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/92.jpg)
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
![Page 93: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/93.jpg)
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
![Page 94: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/94.jpg)
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
![Page 95: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/95.jpg)
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
![Page 96: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/96.jpg)
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
![Page 97: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/97.jpg)
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
![Page 98: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/98.jpg)
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
![Page 99: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/99.jpg)
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
![Page 100: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/100.jpg)
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
![Page 101: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/101.jpg)
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
![Page 102: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/102.jpg)
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
![Page 103: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/103.jpg)
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
![Page 104: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/104.jpg)
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
![Page 105: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/105.jpg)
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
![Page 106: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/106.jpg)
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
![Page 107: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/107.jpg)
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
![Page 108: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/108.jpg)
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
![Page 109: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/109.jpg)
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
![Page 110: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/110.jpg)
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
![Page 111: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/111.jpg)
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
![Page 112: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/112.jpg)
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
![Page 113: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/113.jpg)
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
![Page 114: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/114.jpg)
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
![Page 115: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/115.jpg)
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
![Page 116: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/116.jpg)
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
![Page 117: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/117.jpg)
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
![Page 118: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/118.jpg)
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
![Page 119: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/119.jpg)
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
![Page 120: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/120.jpg)
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
![Page 121: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/121.jpg)
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’
![Page 122: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/122.jpg)
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
![Page 123: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/123.jpg)
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
![Page 124: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/124.jpg)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
25
DECISION
![Page 125: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/125.jpg)
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
![Page 126: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/126.jpg)
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
![Page 127: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/127.jpg)
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
![Page 128: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/128.jpg)
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
![Page 129: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/129.jpg)
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
![Page 130: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/130.jpg)
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
![Page 131: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/131.jpg)
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
![Page 132: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/132.jpg)
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
![Page 133: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/133.jpg)
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
![Page 134: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/134.jpg)
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
![Page 135: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/135.jpg)
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
![Page 136: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/136.jpg)
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
![Page 137: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/137.jpg)
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
![Page 138: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/138.jpg)
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
![Page 139: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/139.jpg)
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
![Page 140: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/140.jpg)
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
![Page 141: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/141.jpg)
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
![Page 142: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/142.jpg)
Context Liquid Software Liquid.js Framework Components Variables Storage Conclusions
Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer
27
CONCLUSION
![Page 143: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/143.jpg)
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:
![Page 144: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/144.jpg)
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
![Page 145: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/145.jpg)
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
![Page 146: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/146.jpg)
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
![Page 147: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/147.jpg)
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
![Page 148: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/148.jpg)
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
![Page 149: DEPLOYING STATEFUL WEB COMPONENTS ON MULTIPLE …design.inf.usi.ch/sites/default/files/talks/liquidjs... · 2016-04-27 · WebComponents Standard Polymer Framework Fine-grained decomposition](https://reader031.fdocuments.net/reader031/viewer/2022011823/5ed7926f67b53e06555d27f9/html5/thumbnails/149.jpg)
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