This document discusses how to build engaging web applications using GraphQL and AWS AppSync. It describes how AWS AppSync can be used to model application data as a graph, with data sources like DynamoDB attached to points in the graph. When queries are made to the graph through AppSync, it fulfills them by querying the attached data sources. AppSync also enables real-time functionality like push notifications when data changes and offline usage by caching query results locally.

1. © 2019, Amazon Web Services, Inc. or its Affiliates.© 2019, Amazon Web Services, Inc. or its Affiliates.
Rich Alberth, AWS
Engaging apps with
GraphQL and
AWS AppSync
September 13, 2019

2. © 2019, Amazon Web Services, Inc. or its Affiliates.
What makes a
website engaging?

3. © 2019, Amazon Web Services, Inc. or its Affiliates.
Curated, accurate content
presented cleanly.

4. © 2019, Amazon Web Services, Inc. or its Affiliates.
Curated, accurate content
presented cleanly.
No! That’s clearly important, but not
what makes a website engaging.

5. © 2019, Amazon Web Services, Inc. or its Affiliates.
Chat
Responsive
Update automatically
Push notifications
Think of a favorite website that is
engaging, like your email web client.
Things happen automatically, data is
updated as it happens, and there are
“app-like” fetures built-in.

6. © 2019, Amazon Web Services, Inc. or its Affiliates.
website
Maybe we should stop thinking about
them as “websites”. This limits us to
thinking about pages that refresh when
you click buttons.

7. © 2019, Amazon Web Services, Inc. or its Affiliates.
webapp
How about thinking about them as web
apps: applications running in a browser.

8. © 2019, Amazon Web Services, Inc. or its Affiliates.
app
Better yet: just call them apps.

9. © 2019, Amazon Web Services, Inc. or its Affiliates.
Apache Spring (IoC)
Hibernate (ORM)  manage your data in objects
Connection pool (backoff-retry)
Cache (memcached)
API to call you / you call other APIs
If I asked you to build a back-end,
distributed, highly-available, network-
tolerant service, what practices would
you bring out?

10. © 2019, Amazon Web Services, Inc. or its Affiliates.
$("#report").load("/reports/26?id=89");
<a href="/reports">Reports</a>
await fetch("/reports/26")
We’re hamstrung if we only use
rudimentary technology like links, HTML
fragment fetching, and basicAjax tools.

11. © 2019, Amazon Web Services, Inc. or its Affiliates.
Need back-end thinking
for front-end coding

12. © 2019, Amazon Web Services, Inc. or its Affiliates.

13. © 2019, Amazon Web Services, Inc. or its Affiliates.
Game Board:
My laptop

14. © 2019, Amazon Web Services, Inc. or its Affiliates.
Emcee:
Kindle Fire

15. © 2019, Amazon Web Services, Inc. or its Affiliates.
Player:
cell phone

16. © 2019, Amazon Web Services, Inc. or its Affiliates.
What’d you think?
Did you think of this as a webapp or just
an application? Did you see things
update automatically? Was it engaging?

17. © 2019, Amazon Web Services, Inc. or its Affiliates.
How’d I do it?
I’ll tell you what I DIDN’T do: didn’t build
a server (there isn't any), didn’t write
boring plumbing (undifferentiated
heavy-lifting). This is an AWS serverless
application service.

18. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS Cloud
AWS AppSync Amazon
DynamoDB
Amazon Simple
Storage Service (S3)
Client devices

19. © 2019, Amazon Web Services, Inc. or its Affiliates.
/ invoices
products
customers
POST
GET
{custId}
GET
{custId}
GET
PUT
POST
GET
{prodId}
Remember
REST?
REST is a way to model your business
data in a common way lots of developers
can relate to. Let’s use this model for
learning about GraphQL andAppSync.

20. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS AppSync
With GraphQL, you model your business data and
relationships in a graph. AWS AppSync houses the
GraphQL model. You attach data sources to points in the
graph. Querying the graph means AppSync uses your
attached data sources to fulfill the query.

21. © 2019, Amazon Web Services, Inc. or its Affiliates.
type Game {
title: String!
categories: [Category!]
}
type Category {
categoryName: String!
questions: [Question!]
}
type Question {
points: Int!
question: String!
answer: String!
}
game
category
category
question
question
question
question
question
question
GraphQL
Actual GraphQL snippet from the Quiz
Show demo. This is how nodes and
edges in the graph are written in
GraphQL.

22. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS Amplify
Amazon DynamoDB
table
AWS AppSync
React
G
C
C
Q
Q
Q
Q
Q
Q
P
P
P
category ?
Client browser requests part of the graph
by callingAWS AppSync.

23. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS Amplify
Amazon DynamoDB
table
AWS AppSync
React
G
C
C
Q
Q
Q
Q
Q
Q
P
P
P
category ?
AppSync queries the data sources you
configured to fulfill the query.

24. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS Amplify
Amazon DynamoDB
table
AWS AppSync
React
G
C
C
Q
Q
Q
Q
Q
Q
P
P
P
category ?
C
Q
Q
Q
AppSync returns a portion of the graph
you wanted. It’s kept in the browser so
subsequent calls can reference it.

25. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS Amplify
Amazon DynamoDB
table
AWS AppSync
React
G
C
C
Q
Q
Q
Q
Q
Q
P
P
P
C
Q
Q
Q
question !
AppSync can also notify a browser when
something on the server changes, so the
browser can stay up-to-date.

26. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS Amplify
Amazon DynamoDB
table
AWS AppSync
React
G
C
C
Q
Q
Q
Q
Q
Q
P
P
P
C
Q
Q
Q
question !
Server updates are aware of locally-
cached objects from AppSync. The
server “push” updates the already-
cached version so everything stays in
sync.

27. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS Amplify
Amazon DynamoDB
table
AWS AppSync
React
G
C
C
Q
Q
Q
Q
Q
Q
P
P
P
C
Q
Q
Q
Future queries might be satisfied
completely with locally-stored objects.
No need to talk to AppSync.

28. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS Amplify
AWS AppSync
React
AWS Amplify
React
AWS Amplify
React
topic
topic
With AppSync ”PubSub” feature, many
browsers can coordinate work by
sending and receiving messages on a
commonTopic.

29. © 2019, Amazon Web Services, Inc. or its Affiliates.
AWS AppSync
AWS Amplify
React
AWS Amplify
React
AWS Amplify
React
?
?
?
G
C
C
Q
Q
Q
Q
Q
Q
P
P
P
When the server is unavailable (maybe
network problem?), AppSync continues
to try to send updates until it succeeds.

30. © 2019, Amazon Web Services, Inc. or its Affiliates.
Strange Network Behavior
Queries
• Read-thru cache
• Read from local cache
Mutations
• Offline mutation
• “Optimistic”
• Conflict resolution
“Delta Query”
• Initial query
• Subscribe to changes
• “Catch-up” re-query

31. © 2019, Amazon Web Services, Inc. or its Affiliates.
• Query for game questions
• Subscribe to question state
(“open”, “closed”, …)
• PubSub for “Buzz” presses

32. © 2019, Amazon Web Services, Inc. or its Affiliates.
• Query for game questions
• Mutates question state
• Mutates Contestant score
• Subscribe to “Buzz” presses

33. © 2019, Amazon Web Services, Inc. or its Affiliates.
• Creates Contestant records
• Query for game
• Subscribe to question updates
• Sends notification when press
“Buzz” button

34. © 2019, Amazon Web Services, Inc. or its Affiliates.© 2019, Amazon Web Services, Inc. or its Affiliates.
Thank you!
Rich Alberth