LiveQueries via LiveServerOndrej LeheckaYOW Australia, 2017

Agenda

1. What are LiveQueries?

2. What is LiveServer?

3. Architecture of LiveServer

4. Use cases

5. Implementation challenges

What is GraphQL query?

Text here

Text here

Text here

What is LiveQuery?

Text here

Text here

Text here

Subscriptions (mutation)

Text here

Text here

Text here

Subscriptions

Text here

Text here

Text here

LiveQuery

Text here

Text here

Text here

What is a Live Query?

• Extended GraphQL API

• get-and-subscribe semantic

• Updated on state changes

How to implement LiveQueries?

Client-Side Polling

Text here

Text here

Text here

Client can translate an @live annotation to mean “poll with some frequency”

Client: Are we there yet? Are we there yet? Are we there yet?

Pros/Cons:• Simple• Inefficient

If you're using Relay, there exists built-in support:https://github.com/facebook/relay/commit/88d09dcc30f851d8d9abd696d686eb9683b56ba6

Server-Side Polling

Text here

Text here

Text here

Server can poll with some frequency, push updates to clients.

Server: Are we there yet? Are we there yet? Are we there yet?

Pros/Cons:• Don’t waste client resources• Server smarts (batching queries, etc.)• Inefficient• Requires long living connection to Client

Reactive back end

Text here

Text here

Text here

Pros/Cons:• Dependency tracking• Server smarts (batching queries, etc.)• Saves compute

Reactive backend (with micro services)

Text here

Text here

Text here

What is LiveServer?

1. Reactive backend with automatic dependency capture for queries

2. Delivers updates to client

3. Stateful

4. With consistent routing

5. Interacts with reactive data sources

LiveServer – architecture

Text here

Text here

Gateway

Mobileclient

*client

Webclient

Reactive Data Source

Query Execution Engine(PHP)

Reactive Data SourceReactive Data

SourceRouting

LiveServer – execution of a LiveQuery

Text here

Text here

Gateway

Mobileclient

*client

Webclient

Reactive Data Source

Query Execution Engine(PHP)

Reactive Data SourceReactive Data

SourceRouting

Session

Dependency tracking

Q1: Dep1

LiveServer – statefulness

Text here

Text here

Text here

Text here

Gateway

mobile

mobile

mobile

Reactive Data SourceReactive Data

SourceReactive Data Source

Routing

Session Manager

Dependency tracker

Query state Resume info

Query Execution Engine(PHP)

LiveServer – consistent routing

Text here

Text here

Text here

Text here

Text here

Text here

Gateway host 1

mobile

mobile

mobile

Routing

social hash

host mapping

store

Gateway hostGateway hostGateway host

LiveServer – reactive data sources

Text here

Text here

Text here

Text here

Text here

Text here

Gateway

Reactive Data Source

Query Execution Engine(PHP)

Reactive Data SourceReactive Data

Source

Data Source

Reactive Extensions

Update Log: <u1>, <u2>, …

RSocket: protocol, connectivity, resumability

Text here

Text here

Text here

Text here

Gateway

mobile

mobile

mobile

Reactive Data Source

Query Execution Engine(PHP)

Reactive Data SourceReactive Data

SourceRouting

RSocket: protocol layering

Text here

Text here

Text here

Text here

RSocket

HTTPTCP Quic

RSocket over extended HTTP/2

Text here

Text here

Text here

Text here

HTTP/2 (+pub/sub, resumability, credit-based flow control)

Use cases

• Interactive user interface• Updating client caches• Push updates to clients in background

Use case: Delayed execution

Text here

Text here

Implementation challenges

• Over-observing

• Masked dependencies thru caching layers

• Consistency and race conditions

• Partial reactivity

What are your

key takeaways from this workshop?

• Stateful service for efficient implementation of LiveQueries

• Connection oriented network protocols

• Reactive data sources

GraphQL Future (React-Europe 2016): https://youtu.be/ViXL0YQnioU?t=17m54s

Realtime React Apps with GraphQL (React Conf2017): https://www.youtube.com/watch?v=AYbVMNtO-ro

Best Practices for GraphQL Subscriptions (Nordic.js2017): https://www.youtube.com/watch?v=XfHOrfTyJJw

RSocket – the future of micro-services communication (Code Europe 2017): https://youtu.be/oyeALF_1ZPQ

ADDITIONAL RESOURCES

What are your

key takeawaysfrom this workshop?

Q&A