Real Time and Offline Applications with GraphQL

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Kwun-Hok Chan, Solution Architect

[email protected]

Building Real-time and Offline Applications

AWS AppSync

mailto:[email protected]


GET /about/me

{

"name": "Kwun-Hok Chan",

"email": "[email protected]",

"company": "Amazon Web Services",

"title": "Solution Architect",

”location": ”Hong Kong",

"aod": [

"Serverless",

"Containers",

"DevOps”

]

}


Agenda

• Overview

• AWS AppSync

• GraphQL

• Demo


Overview

AWS AppSync


AWS AppSync

• Build real-time,

collaborative mobile and

web apps

• Handles offline scenarios

common to mobile apps

• Automatically resolves

data conflicts

• Quickly prototype and

build apps from multiple

data sources

• Fully-managed GraphQL

service with benefits

• Helps keep data secure


What problem does it solve?


Developer Challenges With App Data

Data requirements

vary across

devices and

become harder

when multiple

users share data

Users want instant

access to data

Building scalable

data-driven apps

without learning

distributed

systems concepts

is hard

Users want to

continue using

their apps even

with low or no

connectivity


Build Powerful Data Driven Apps With AppSync

Real-time

Collaboration

Offline

Programming

Model with

Sync

Get Only the

Data You Need

Own Your Data Fine-grained

Access

Control


Apps You Can Build With AppSync

Real-time Apps

- Dashboard

- Leaderboard

- Field service apps

Chat Apps Apps with Complex

Data Structures

and Types

Geo Apps


How does AWS AppSync work?


Let’s simplify by comparing with a

more well-understood approach


I have a web and mobile app, and a data source

Data

API Gateway Lambda

Using API Gateway and Lambda is one

approach for performing DB operations


What is GraphQL?

Open, declarative data-fetching specification

!= Graph database

Use NoSQL, Relational, HTTP, etc.

Traditional data-fetching GraphQL

/posts

/postInfo

/postJustTitle

/postsByAuthor

/postNameStartsWithX

/commentsOnPost

/graphql


How does GraphQL work?

{"id": "1","name": "Get Milk",“priority": "1"

},{

"id": “2","name": “Go to gym",“priority": “5"

},…

type Query {getTodos: [Todo]

}

type Todo {id: ID!name: Stringdescription: Stringpriority: Intduedate: String

}

query {getTodos {

idnamepriority

}}

Model data with

application schema

Client requests what it

needs

Only that data is

returned


GraphQL Subscriptions

Near Realtime updates of data

Event based mode, triggered by Mutations

- Scalable model, designed as a platform for common use-cases

Can be used with ANY data source in AppSync

- Lambda, DynamoDB, Elasticsearch

mutation addPost( id:123title:”New post!”author:”Nadia”){idtitleauthor

}

data: [{id:123,title:”New Post!”author:”Nadia”

}]


type Subscription {

addedPost: Post

@aws_subscribe(mutations: ["addPost"])

deletedPost: Post

@aws_subscribe(mutations: ["deletePost"])

}

type Mutation {

addPost(id: ID! author: String! title:

String content: String): Post!

deletePost(id: ID!): Post!

}

subscription NewPostSub {

addedPost {

__typename

version

title

content

author

url

}

}

Schema


GraphQL Subscription Handshake

Subscription NewPostSub {

addedPost{…}

}

WebSocket URL and Connection Payload

Secure Websocket Connection (wss://)


Real t ime UI updates

const AllPostsWithData = compose(

graphql(AllPostsQuery, { options: { fetchPolicy: 'cache-and-network‘ },

props: (props) => ({

posts: props.data.posts,

subscribeToNewPosts: params => {

props.data.subscribeToMore({

document: NewPostsSubscription,

updateQuery: (prev, { subscriptionData: { newPost } }) => ({

...prev,

posts: [newPost, ...prev.posts.filter(post => post.id !== newPost.id)]

})

});

});

…//more code


Offline mutations

Jane

Version : 2 Updated Document

Jane



Version : 1 New Document

Tim

e

John

John

Jane goes offline

Jane comes back online


John

Jane


Conf l ic t Resolut ion and Synchronizat ion

Conflict resolution in the cloud

1. Server wins

2. Silent reject

3. Custom logic (AWS Lambda)

- Optimistic version check

- Extend with your own checks

Optional

• Client callback for Conflict Resolution is still

available as a fallback

{"version" : "2017-02-28","operation" : "PutItem","key" : {

"id" : { "S" : "1" }},"condition" : {

"expression" : "attribute_not_exists(id)"}

}

Example: Check that an ID doesn’t already exist:

"condition" : {"expression" : "someExpression""conditionalCheckFailedHandler" : {

"strategy" : "Custom","lambdaArn" : "arn:..."

}}

Run Lambda if version wrong:


Images and r ich content

type S3Object {

bucket: String!key: String!region: String!

}

input S3ObjectInput {

bucket: String!key: String!region: String!localUri: String!

}

type Profile {name: String!profilePic: S3Object!

}

type Mutation {updatePhoto(name: String!,

profilePicInput: S3ObjectInput!): Profile}


Client experience and configuration

Offline is a write-through “Store”

- Persistent storage mediums back the client “normalized

cache”

- Local Storage for web

- SQLite on hybrid/native platforms

SQLite database can be preloaded

- Hydrate after installing from AppStore

Offline client can be configured

- Wifi only vs. wifi & carrier

Queries automatically persist offline

Mutations are an “optimistic write”

- Control offline UI updates with “optimistic response”

- Update views/lists when editing/adding data offline


Demo


Service Cost per month

• Free Tier lasts for first 12 months

• Don’t forget to add Data Transfer + Database

• Always review the AWS Pricing Page for latest pricing

Free Tier Standard Cost

Queries 250,000 $4 / million

Real-time Updates 250,000 $2 / million

Real-time Connection-minutes 600,000 $0.08 / million

* US Pricing, as of December 1, 2017


Pricing Example (all numbers per month)

• Chat application with 2,500 users

• Average user connects for 1,500 minutes

• Sends 1,000 and Receives 1,000 messages

• 2.5M queries and 2.5M real-time updates

AppSync Query 2.5M x $4/million = $10.00

AppSync Real-time 2.5M x $2/million = $5.00

AppSync Minutes 2,500 x 1,500 x $0.08/million = $0.30

Data Transfer 1KB x 2.5M = 2.4GB x $0.09 = $0.21

DynamoDB Database Free Tier (as long as store < 25Gb)

Total $15.51


Happy coding with AppSync!

AWS AppSync

Amazon

DynamoDB

AWS

Lambda

ElasticSearch

subscriptions

/graphql

Resolvers

DataSources


We need your feedback

https://bit.ly/2HlWoST

https://bit.ly/2HlWoST


Thank You!Kwun-Hok Chan ([email protected])

mailto:[email protected]

Real Time and Offline Applications with GraphQL

Documents

Transcript of Real Time and Offline Applications with GraphQL