Real Time and Offline Applications with GraphQL

  • Published on
    17-Mar-2018

  • View
    113

  • Download
    0

Transcript

  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Kwun-Hok Chan, Solution Architect khchan@amazon.com Building Real-time and Offline Applications AWS AppSync mailto:khchan@amazon.com
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GET /about/me { "name": "Kwun-Hok Chan", "email": "khchan@amazon.com", "company": "Amazon Web Services", "title": "Solution Architect", âlocation": âHong Kong", "aod": [ "Serverless", "Containers", "DevOpsâ ] }
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Agenda ⢠Overview ⢠AWS AppSync ⢠GraphQL ⢠Demo
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Overview AWS AppSync
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. What problem does it solve?
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. How does AWS AppSync work?
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Letâs simplify by comparing with a more well-understood approach
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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: String description: String priority: Int duedate: String } query { getTodos { id name priority } } Model data with application schema Client requests what it needs Only that data is returned
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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:123 title:âNew post!â author:âNadiaâ){ id title author } data: [{ id:123, title:âNew Post!â author:âNadiaâ }]
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. GraphQL Subscription Handshake Subscription NewPostSub { addedPost{â¦} } WebSocket URL and Connection Payload Secure Websocket Connection (wss://)
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Offline mutations Jane Version : 2 Updated Document Jane Version : 2 Updated Document Version : 3 Updated Document Version : 1 New Document T im e John John Jane goes offline Jane comes back online Version : 4 Updated Document John Jane
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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:
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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 }
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Demo
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 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
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Happy coding with AppSync! AWS AppSync Amazon DynamoDB AWS Lambda ElasticSearch subscriptions /graphql Resolvers DataSources
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. We need your feedback https://bit.ly/2HlWoST https://bit.ly/2HlWoST
  • © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Thank You! Kwun-Hok Chan (khchan@amazon.com) mailto:khchan@amazon.com