"善用 GraphQL 與 AWS AppSync 讓您的 Progressive Web App (PWA) 加速進化 (Level 200) 講師： Jayson Hsieh, Solutions Architect, AWS"

1. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Jayson Hsieh
Solutions Architect, Amazon Web Services
Taking Your Progressive Web App
To The Next Level With
GraphQL And AWS Appsync

2. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

3. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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

4. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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

5. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Progress To Progressive

6. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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

7. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Why Progressive Web Apps
Secure ShareableNetwork Agnostic Always up-to-date

8. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

9. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Core Components
Application shell Service worker Storage and cache

10. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Toolchain And 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)

11. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What About The Backend?

12. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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

13. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Is There A Better Way

14. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GraphQL

15. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What Is GraphQL?
Describe what’s possible
with a type system
Uniform API across data stores
and APIs
Network optimised
requests and responses
Powerful developer tools Integrated
documentation and
introspection
Query language for your API
and a runtime for fulfilling
queries with existing data

16. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
What Is GraphQL?
/posts /comments /authors
REST API
/posts /comments /authors
GraphQL API

17. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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

18. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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

19. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
GraphQL sounds legit!
I want to run my own GraphQL server!!

20. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Introducing AWS AppSync

21. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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, API keys)

22. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
How Does AppSync Work?
Create, Import or Upload
GraphQL Schema
Amazon
Elasticsearch
Amazon
DynamoDB
AWS Lambda
Connect Data
Sources with
GraphQL Resolvers
AppSync Updates Data
in Real Time and Manages
Data when Offline
__________
______________
___________
_________
___________
____________
__________

23. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Mutations
Write Data
mutation {
createEvent(name:”MeetUp”){
id
}
}
GraphQL Operations
Queries
Read Data
query {
getEvent(id: 1){
id
name
}
}
Subscriptions
Receive Data in
Real-Time
subscription {
onCreateComment {
id
}
}
Queries
Read Data
Mutations
Write Data
Subscriptions
Receive Data in Real-Time

24. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Building Data-Driven Apps With AWS Appsync
Robust, scalable storage
capable of handling
millions of events a day
Geospatial
search
Real-time
updates for both
mobile and web
Mobile and Web
clients

25. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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
AWS AppSync Benefits

26. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Real-Time Updates
• GraphQL subscriptions
• Event stream of mutation results
• Data synchronisation with MQTT + WebSockets
• Client managed WebSocket connection
• Automatic catch-up snapshots

27. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon Elasticsearch
Amazon 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

28. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
/graphql
AWS AppSync
Subscription Amazon Elasticsearch
Amazon DynamoDB
AWS Lambda
Third-party service
Real-Time App After AppSync
Resolvers
DataSources

29. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Data Conflicts
Jane
Version : 2 Updated Document
Jane
Version : 2 Updated Document
Version : 3 Updated Document
Version : 1 New Document
Time
John
John
Jane goes offline
Jane comes back online
Version : 4 Updated Document
John
Jane

30. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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:..."
}
}

31. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Offline Capabilities - AppSync Client Storage
• Offline is a write-through "Store"
• Persistent storage mediums back the Apollo
normalised 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

32. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon API Gateway AWS AppSync

33. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon API Gateway AWS AppSync
vs

34. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon API Gateway AWS AppSync
vs

35. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon API Gateway AWS AppSync
&

36. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amazon API Gateway AWS AppSync
&

37. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Enough Talking…
https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular

38. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.

39. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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

40. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
User
1..1
1..n
1..1
1..n
1..n
User
Conversation
Conversation Messages
GraphQL Relations between NoSQL DynamoDB Tables

41. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Demo Time!

42. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
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 = J

43. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Thank You