Taking your Progressive Web App to the Next Level with GraphQL and AWS AppSync

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Ed Lima – Solutions Architect
July 2018
Taking your Progressive Web App
to the Next Level with
GraphQL and AWS AppSync
@ednergizer

Digital Media
50%
34%
9%
7%
Mobile App Desktop Mobile Web Tablet App
Time spent
comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017

comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017
0
5
11
16
21
Unique Visitors
Mobile Web Mobile App
Average Monthly
Unique Visitors
2.2x
Mobile
App

Progress to Progressive

Progressive Web Apps (PWA)
Responsive web
application
Defined by
manifest.json
Discoverable and
installable
A Progressive Web App uses
modern web capabilities
to deliver
an app-like user experience

Why Progressive Web Apps
Secure ShareableNetwork Agnostic Always up-to-date

Core Components
Application shell Service worker Storage and cache

Toolchain & Production Scale
• Web framework (Ember.js, Angular.js, Ionic, React, etc.)
• CLI/build system (Workbox, Ionic, Grunt/Gulp, AWS CLI)
• Libraries/utilities (Local Forage, Handlebars)
• Deployment (CloudFront, S3, AWS Mobile CLI, Mobile Hub)

Traditional Data Fetching
Data
 Trivial to set up
 Standard HTTP Calls
❌ Relationships
❌ Lists with reduced information
❌ Query support
❌ Ordering and pagination
❌ Notifications
/posts
/postInfo
/postJustTitle
/postsByAuthor
/postNameStartsX
/postByTag
/commentsOnPost
REST Endpoints

Is there a better way

GraphQL

What is GraphQL?
Uniform API across data
stores and APIs
Network optimized
requests and responses
Powerful developer
tools
Integrated documentation
and introspection
Describe what’s possible
with a type system
Query language for your API
and a runtime for fulfilling
queries with existing data

What Is GraphQL?
/posts /comments /authors
REST API
posts comments authors
GraphQL API

query {
getEvent(id: 1){
id
name
}
}
mutation {
createEvent(name:”MeetUp”){
id
}
}
subscription {
onCreateComment {
id
}
}
GraphQL Operations
Queries
Read Data
Mutations
Write Data
Subscriptions
Receive Data in Real-Time

How to Use GraphQL
type Query {
listEvents: [Event]
}
type Event {
id: ID!
name: String!
when: String!
where: String!
}
query {
listEvents {
id
name
}
}
{
"id": "1",
"name": "React Meet Up"
},
{
"id": "2",
"name": "GraphQL Party"
},
{
“id”: “3”,
“name”: “Angular Sesh”
}
...
Define your data
(Schema)
Invoke Operation Get EXACTLY what
you asked for

How to Use GraphQL
type Query {
listEvents: [Event]
}
type Event {
id: ID!
name: String!
when: String!
where: String!
}
query {
listEvents {
id
name
when
}
}
{
"id": "1”,
"name": "React Meet Up”,
“when”: “Tomorrow”
},
{
"id": "2",
"name": "GraphQL Party",
“when”: “Saturday”
},
{
“id”: “3”,
“name”: “Angular Sesh”,
“when”: “Next Friday”
}...
Define your data
(Schema)
Invoke Operation Get EXACTLY what
you asked for

GraphQL sounds legit!
I want to run my own GraphQL server!!

Focus on Apps
Not Infrastructure

AWS AppSync
Managed Serverless GraphQL service Connect to data sources
in your account
Add data sync, real-time and
offline capabilities for any data
source or API
GraphQL façade for any AWS service Conflict detection and
resolution in the cloud
Enterprise security
features (IAM, Cognito,
OIDC, API keys)

AppSync is first and foremost an application data service with
real-time and offline features implemented over GraphQL
with additional capabilities such as built-in authorization and
conflict resolution.
But what is AWS AppSync really?

How does AppSync work?
Create, Import or Upload
GraphQL Schema
Amazon
Elasticsearch
Amazon
DynamoDB
AWS Lambda
Connect Data Sources AppSync Updates Data
in Real Time and Manages
Data when Offline
__________
______________
___________
_________
___________
____________
__________
NEW

Building data-driven apps with AWS AppSync
Robust, scalable storage
capable of handling
millions of events a day
Geospatial search Real-time updatesMobile and Web
clients

AWS AppSync Benefits
Clients receive the data
they ask for. Nothing
more, nothing less
Get many resources from
many data sources with a
single request
Self-documenting APIs with
Introspection
React Native, Android, iOS,
and Web (JS) using the
Apollo GraphQL client
Data persistence across
application restarts
Write-through mutations
with optimistic UI

Elasticsearch
DynamoDB
Browser
Mobile
device WebSocket
servers
Web servers
PubSub
servers
Subscription
/search
/taps
/taps/:id
/m_search
AWS Lambda
Third-party service
…
Real-Time App before AppSync

/graphql
AWS AppSync
Subscription Elasticsearch
DynamoDB
AWS Lambda
Third-party service
Real-Time App after AppSync

Real-Time Updates
• GraphQL subscriptions
• Event stream of mutation results
• Data synchronization with MQTT + WebSockets
• Client managed WebSocket connection
• Automatic catch-up snapshots

Data Conflicts
Jane
Version : 2 Updated Document
Jane
Version : 1 New Document
Time
John
John
Jane goes offline
Jane comes back online
John
Jane

Handle Data Conflicts in the Cloud
• Conflict detection with optimistic version check.
• Conflict resolution strategies:
A. Client wins
B. Server wins
C. Silent reject
D. Custom logic in AWS Lambda
• Client callback for conflict resolution is available.
"condition" : {
"expression" : "someExpression"
"conditionalCheckFailedHandler" : {
"strategy" : "Custom",
"lambdaArn" : "arn:..."
}
}

Offline Capabilities - AppSync Client Storage
• Offline is a write-through "Store"
• Persistent storage mediums back the Apollo normalized
cache
• Local Storage for web
• AsyncStorage for React Native
• SQLite on native platforms
• Database can be preloaded
• Offline client can be configured
• WiFi only
• WiFi and cellular

Amazon API Gateway AWS AppSync

vs

&

Enough Talking
https://aws.amazon.com/appsync/resources/#Starter_applications (Angular Chat App)
https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular
https://aws.amazon.com/blogs/mobile/building-a-serverless-real-time-chat-application-with-aws-appsync/

Amazon
Cognito
User Pools
JWT Token
GraphQL
Schema
ChatQL
Conversations
Table
Messages
Table
User Conversations
Table
Users Table
Amazon
DynamoDB
Queries and Mutations
Subscriptions
AppSync
Resolvers
User
AWS AppSync
AppSync Data Sources

User
1..1
1..n
1..1
1..n
1..n
User
Conversation
Conversation Messages
GraphQL Relations between NoSQL DynamoDB Tables

Demo Time!

Takeaways
Don’t boil the Ocean.
Start small and iterate
on Offline (cache-and-
network), Real-time
and Conflict
Resolution
Use UI cues with
Optimistic UI when
Offline
Take advantage of
built-in GraphQL
powerful features such
as Connections
(Pagination) and
Relations (NoSQL)
It’s all about the
User Experience:
PWAs + AppSync = 

It’s all about the User Experience !
https://secure.i.telegraph.co.uk/multimedia/archive/02884/babies_2884567b.jpg

Taking your Progressive Web App to the Next Level with GraphQL and AWS AppSync

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Taking your Progressive Web App to the Next Level with GraphQL and AWS AppSync

Similar to Taking your Progressive Web App to the Next Level with GraphQL and AWS AppSync (20)

More from Amazon Web Services

More from Amazon Web Services (20)

Taking your Progressive Web App to the Next Level with GraphQL and AWS AppSync