BUILDING COMPELLING REALTIME WEB EXPERIENCES
@ROBDCROWLEY | ROBDCROWLEY
Slide 2
Slide 2 text
▪ GRAPHQL OVERVIEW
▪ THE CASE FOR REALTIME EXPERIENCES
▪ THE SERVER STORY
▪ A CLIENT PERSPECTIVE
▪ MAKING IT ALL PERFORMANT
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
♥
Slide 5
Slide 5 text
♥
AND I’M FINE WITH THAT!
Slide 6
Slide 6 text
MANY TYPES OF CLIENTS CAN CONSUME OUR APIS
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
HOW CAN EACH CLIENT RETRIEVE EXACTLY THE DATA IT REQUIRES IN
A SINGLE ROUND TRIP TO THE SERVER?
Slide 9
Slide 9 text
SHOW ME HOW GRAPHQL WORKS ALREADY!
Slide 10
Slide 10 text
type Actor implements Node {
id: ID!
name: String
appearedIn: [Film]
netWorth: MonetaryAmount
}
Slide 11
Slide 11 text
let queryFilm = (_, {id}, {models}) => {
// arbitrary code to retrieve film
return models.film.get(id);
}
let filmTitle = film => {
// just return property from root film
return film.title;
}
Slide 12
Slide 12 text
THE ABSOLUTE MINIMUM YOU NEED TO KNOW (PROBABLY)
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
query {
film(id: “2”) {
title
characters {
name
actors {
name
}
}
}
}
Slide 16
Slide 16 text
query {
film(id: “2”) {
title
characters {
name
actors {
name
}
}
}
}
Slide 17
Slide 17 text
query {
film(id: “2”) {
title
characters {
name
actors {
name
}
}
}
}
Slide 18
Slide 18 text
query {
film(id: “2”) {
title
characters {
name
actors {
name
}
}
}
}
Slide 19
Slide 19 text
query {
film(id: “2”) {
title
characters {
name
actors {
name
}
}
}
}
Slide 20
Slide 20 text
▪ IS A QUERY LANGUAGE FOR YOUR API
▪ ALLOWS CLIENTS TO CRAFT STRONGLY TYPED QUERIES
▪ FACILITATES RETRIEVING EXACTLY THE DATA YOU REQUIRE
▪ HAS POWERFUL FEATURES SUCH AS INTROSPECTION
▪ IS PRETTY COOL ☺
Slide 21
Slide 21 text
WHY IS IT IMPORTANT?
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
CUSTOMERS EXPECT THEIR DATA TO BE AVAILABLE IN REALTIME.
THIS HAS ALREADY HAPPENED AND WE NEED TO CATCH UP
.
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
GREAT WHEN THE DATA REFRESH RATE IS KNOWN
OTHERWISE WE NEED TO BALANCE FRESHNESS AND CHATTINESS
Slide 27
Slide 27 text
DATA REFRESH IS BASED ON OBSERVING STATE ON THE SERVER
THINK INFINITELY FAST POLLING
Slide 28
Slide 28 text
query @live {
film(filmId: 2) {
title
description
reviews {
aggregateRating {
average
}
}
}
}
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
DATA REFRESH IS BASED ON OBSERVING EVENTS
READ-ONLY / NOT A REPLACEMENT FOR QUERIES
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
subscription onReviewAdded {
reviewAdded {
review {
rating
}
film {
title
}
}
}
GRAPHQL PROVIDES A CONSISTENT INTERFACE FOR BOTH PUSH AND
PULL INTERACTIONS
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
▪ IS SUPPORTED VIA POLLING / SUBSCRIPTIONS / LIVE
QUERIES.
▪ AFFORDS A CONSISTENT INTERFACE FOR SYNC AND
ASYNC QUERIES VIA SUBSCRIPTIONS.
▪ IS VERY POWERFUL WHEN USED APPROPRIATELY.
Slide 41
Slide 41 text
GRAPHQL FROM A CONSUMER PERSPECTIVE
Slide 42
Slide 42 text
DX IS KEY TO DELIVERING A SUCCESS API
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
MINIMAL GRAPHQL CLIENT SUPPORTING NODE AND BROWSERS FOR
SCRIPTS OR SIMPLE APPS