Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Offline Enabled Real-time Mobile Apps with GraphQL

33 views

Published on

My presentation from SyntaxCon 2018

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Offline Enabled Real-time Mobile Apps with GraphQL

  1. 1. OFFLINE-ENABLED REAL-TIME MOBILE APPS WITH GRAPHQL ADRIAN HALL SR. DEVELOPER ADVOCATE AMAZON WEB SERVICES
  2. 2. A TYPICAL MOBILE APP
  3. 3. CLOUD CONNECTIVITY: CHATTINESS REST Calls: /inbox/messages /inbox/messages/1 /inbox/messages/2 /inbox/messages/3 /inbox/messages/4 /… A typical page will make 20-30 HTTP calls to render the page
  4. 4. CLOUD CONNECTIVITY: TOO MUCH INFORMATION /inbox/messages/1 { “subject”: “Inky Verification Robot”, “content”: ”Inky Email….”, “from”: “verify@inky.com”, “to”: “olivialong24@gmail.com”, “sent”: ”20180628T113223.00Z” “thread”: [ 14, 22 ], “priority”: 3 … } Up to 80% of the data returned by the server is not needed
  5. 5. CLOUD CONNECTIVITY: RESPONSIVENESS Cloud response 200-300ms
  6. 6. DATA DRIVEN APP REQUIREMENTS Flexible Client Schema Instant Access ScalabilityOffline Data Minimal Data Transfer Security Use a UI driven data protocol like GraphQL Use a mobile client SDK with an offline cache Use serverless technologies in the cloud
  7. 7. GRAPHQL
  8. 8. GRAPHQL: A DATA API FOR YOUR UI • Security boundary defined by service • Client asks for the data they need • Subscriptions keep the data fresh • Network and battery efficient http://graphql.org/learn
  9. 9. GRAPHQL IN ACTION: QUERIES • All queries start with ”query” • Operation defined by client: • Operation name • Return shape • Use variables to pass data • Supports compiled queries
  10. 10. GRAPHQL IN ACTION: SCHEMA • Schema defines the security perimeter • Requests and responses are strongly typed • Self-documenting • Easy to use code generation tools • Advanced typing http://graphql.org/learn
  11. 11. GRAPHQL IN ACTION: MASTER-DETAIL VIEW
  12. 12. GRAPHQL IN ACTION: POWERFUL DEVELOPER TOOLS • Introspection • Code Generation • IDE Integrations • Data Visualizations
  13. 13. GRAPHQL IN ACTION: API EVOLUTION • Every request specifies all the fields required • We know what is being used • Deprecate fields to let introspection tools know
  14. 14. IS REST DEAD THEN? Use REST: • When you leverage HTTP • HTTP-layer Caching • Content Types • Hypermedia (HATEOS) • For Resources Use GraphQL: • When data drives UI • Structured data • Query-driven • Client-driven UI development Pick the appropriate protocol for your use case
  15. 15. OFFLINE CAPABLE CLIENT
  16. 16. APOLLO CLIENT • Declarative data fetching • Zero-config caching • Real-time subscriptions (with provider) • Bring your own HTTP provider • Extensive client support https://www.apollographql.com/client
  17. 17. APOLLO CLIENT: CACHING https://www.apollographql.com/client • Query results automatically cached • Prepare to react to changes in the data set • Mutations queued until server available • Use platform-specific handlers to detect network changes • Mutations drive internal query updates • Optimistic responses & refetch query list
  18. 18. QUERY SEMANTICS (REACT SAMPLE) import gql from "graphql-tag"; import { Query } from "react-apollo"; const GET_DOGS = gql` { dogs { id breed } } `; const Dogs = ({ onDogSelected }) => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (loading) return "Loading..."; if (error) return `Error! ${error.message}`; return ( <select name="dog" onChange={onDogSelected}> {data.dogs.map(dog => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }} </Query> ); GraphQL Query Network loading… Data (almost) always available
  19. 19. APOLLO CLIENT: SUBSCRIPTIONS https://www.apollographql.com/client • Proactively update the cache when changes happen • Register a callback to receive updates • Callback can update internal state • Requires provider support
  20. 20. LONG TERM OFFLINE: USE A LOCAL COPY sync Sync Service Data Repository Views Mobile App • Use a regular SQLite database • Add an operations queue table for mutations • Ensure IDs are GUIDs • Add updated timestamp and deleted flag for incremental sync • Optimistically update the SQLite database
  21. 21. SERVERLESS BACKEND
  22. 22. SERVERLESS IN A NUTSHELL • No servers to manage • Scale as the service needs • Pay for what you use • Focus on your application Amazon Cognito Amazon Pinpoint Amazon DynamoDBAWS Lambda AWS AppSync
  23. 23. OPTIONS FOR DATA SERVICES • GraphQL Service in Docker Container • Standard container can be run anywhere • Must manage container as well as code • Deal with scaling and security separately – use AWS Fargate • GraphQL as a Service • Little to no code needed for most use cases • Scaling and security managed for you
  24. 24. INTRODUCING AWS APPSYNC AWS AppSync is a managed service for application data using GraphQL with real-time capabilities and an offline programming model. Real-time Collaboration Offline Programming Model with Sync Flexible Database Options Fine-grained Access Control
  25. 25. BUILD A GRAPHQL API WITH AWS APPSYNC
  26. 26. AWS APPSYNC: DATA SOURCES Amazon DynamoDB Amazon Elasticsearch Service AWS Lambda NoSQL Service with global table replication. Complex search capabilities including fuzzy matching and geospatial. Support any data source with custom resolvers. • Combine different data sources into one API easily. • Supports relationships between data sources.
  27. 27. AWS APPSYNC: AUTHN / AUTHZ API KEY Unauthenticated Amazon Cognito Group Permissions User Directory AWS IAM Role Permissions Federated Identities OpenID Connect Claim-based Permissions User Directory
  28. 28. AWS APPSYNC: REQUEST & RESPONSE MAPPING • Convert to/from backend requirements • Written in Velocity Template Language (VTL) • Standard Templates for common operations • Get item, Paged list, Save item, Delete item, Batch add, etc. • Implement fine-grained authorization controls • Personal data, friends-only, etc.
  29. 29. AWS APPSYNC: REAL-TIME DATA FOR ANY DATA SOURCE • Near real-time updates of data • Event-based model, triggered by mutations in GraphQL • Use with any data source in AWS AppSync • Implemented as MQTT over WebSockets mutation addPost(id:123 title:”New post!” author:”Adrian”) { id title author } data: [{ id:123, title:”New Post!” author:”Adrian” }]
  30. 30. Demo: Create a GraphQL Service in 2 Minutes
  31. 31. BEST PRACTICES FOR DATA DRIVEN APPLICATIONS Prepare for offline use cases Use the right data protocol Be kind to the mobile device Anticipate success
  32. 32. RESOURCES: • https://graphql.org/learn • https://www.apollographql.com/client • https://aws.amazon.com/appsync
  33. 33. THANK YOU Adrian Hall Sr. Developer Advocate AWS Mobile adrianha@amazon.com @FizzyInTheHall @FizzyInTheHall

×