Liquid.js Tutorial

Andrea Gallidabino

Cesare Pautasso

https://github.com/liquidjs/icwe2017tutorial

Introduction

Demo

Chat

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

Primitives: Migrate / Clone / (Delete)

Component: chat component

Property: chat history log

Photobooth

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

Primitives: Migrate / Clone / (Delete)

Component: Image Container component

Property: Image

Map

Primitives: Clone

Component: Map

Properties: From, To, Longitude, Latitude, Zoom

Different Liquid-UI

Dynamic Editor

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

Dynamic creation of components at runtime

Primitives: Migrate / Clone

Example: elements catalog

WebComponents.org

Example: migration in Liquid.js

Back

Architecture

image/svg+xml Liquid Software Topology State Replication Application Source UI Adaptation Device Usage State Identification Client Deployment Discovery Primitives Synchronisation Layering Granularity Manual Responsive Complementary Parallel Sequential Implicit Explicit Forward Fork Migration Clone Batch Trickle OS VM / Container Application Component Master- slave Multiple master Centralized Decentralized Hybrid Single Repository Multiple Repositories Client Repositories Pre-installed On-demand Cached Ultra Thin Thin Thick Smartcard WiFi Bluetooth Shared URL QR code Or Alternative Mandatory Optional Contact List Geolocation

Abstraction

Produced by OmniGraffle 6.3.1 2017-06-02 09:00:27 +0000Canvas 1Layer 1DeviceComponentProperty
Demo

Explicit State Identification

Demo: liquid-component-text

Granularity

Solid vs Liquid

Demo: liquid-component-googlemap + change properties

Layering + Discovery

Demo: relay messages and P2P

Client Repositories

Demo: liquid-component-editor

Primitives / APIs

APIs

3 levels of abstraction

Device Component Property

=

3 levels of APIs

Unique Resource Identifiers

/ : device/ : component/ : property

  • Device

    /deviceID
    
    {
      device: 'deviceID'
    }
                        
  • Component

    /deviceID/compID
    
    {
      device: 'deviceID',
      component: 'compID',
      type: 'componentType'
    }
                        
  • Property

    /deviceID/compID/propName
    
    {
      device: 'deviceID',
      component: 'compID',
      type: 'componentType',
      property: 'propName'
    }
                        

Demo: console .getComponents()

Device API

connectDevice(deviceURI)

→ Promise(deviceInfo)

disconnectDevice(deviceURI)

→ Promise()

Component API - Liquid User Experience

migrateComponent(sourceCompURI,targetDevURI[,opt])

→ Promise(migrateComponentURI)

forkComponent(sourceCompURI,targetDevURI[,opt])

→ Promise(forkedComponentURI)

cloneComponent(sourceCompURI,targetDevURI[,opt])

→ Promise(clonedComponentURI)

Demo: console .migrateComponent

Component API - primitives

loadComponentType(componentTypeID)

→ Promise()

createComponent(componentType[,DOMElem,UIType])

→ Promise(createdComponent)

pairComponent(sourceCompURI1,targetCompURI2)

→ Promise()

deleteComponent(componentURI)

→ Promise()

Demo: console .createComponent

Property API

pairProperty(sourcePropURI,targetPropURI)

→ Promise()

unpairProperty(sourcePropURI,targetPropURI)

→ Promise()

Demo: console .pairVariable

Liquid UX primitives → API primitives

Fork → connect [+ load] + create

Migrate → Fork + delete

Clone → Fork + pair

Core API implementation

Produced by OmniGraffle 6.3.1 2017-06-02 05:51:38 +0000 image/svg+xml Canvas 1 Layer 1 Device 1 Device 2 fork / migrate / clone connectDevice + deviceInfo deviceInfo primitiveRequest + data hasAssets Server r equestAsset asset loadAsset asset cr eateComponent done deleteComponent + done pairComponent pairV ariable done done