My presentation from SyntaxCon 2018

1. OFFLINE-ENABLED REAL-TIME
MOBILE APPS WITH GRAPHQL
ADRIAN HALL
SR. DEVELOPER ADVOCATE
AMAZON WEB SERVICES

2. A TYPICAL MOBILE APP

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. 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. CLOUD CONNECTIVITY: RESPONSIVENESS
Cloud response
200-300ms

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. GRAPHQL

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. 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. 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. GRAPHQL IN ACTION: MASTER-DETAIL VIEW

12. GRAPHQL IN ACTION: POWERFUL DEVELOPER TOOLS
• Introspection
• Code Generation
• IDE Integrations
• Data Visualizations

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. 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. OFFLINE CAPABLE CLIENT

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. 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. 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. 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. 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. SERVERLESS BACKEND

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. 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. 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. BUILD A GRAPHQL API WITH AWS APPSYNC

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. 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. 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. 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. Demo: Create a GraphQL Service in 2 Minutes

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. RESOURCES:
• https://graphql.org/learn
• https://www.apollographql.com/client
• https://aws.amazon.com/appsync

33. THANK YOU
Adrian Hall
Sr. Developer Advocate
AWS Mobile
adrianha@amazon.com
@FizzyInTheHall
@FizzyInTheHall