GraphQL, l'avenir du REST ?

G R A P H Q L , 

L’ AV E N I R D U R E S T ?
F R A N Ç O I S Z A N I N O T T O - @ f r a n c o i s z
GraphQL, l'avenir du REST ?
G R A P H Q L
g r a f k ɥ ɛ l
G R A S K A F K A E C U E L L E
L E P R O B L È M E
PA R T I E 1 / 6
R E S T
GraphQL, l'avenir du REST ?
1. GET /user
2. GET /tweets
3. GET /users?ids=[123,456,789,…]
4. GET /tweet_stats?ids=[123,456,789,…]
5. GET /notifications
6. POST /views
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
B R E A K I N G C H A N G E
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
R E S T I N P E A C E
• Trop de requêtes par page
• Mauvaise performance sur mobile
• Pas de standard
• Pas de schema
• Evolution impossible
• Actions limitées au CRUD
L E S A U T R E S
C A N D I D AT S
PA R T I E 2 / 6
R E S T + +
GET /tweets?include=author&fields=[id,date,body]
GraphQL, l'avenir du REST ?
S Q L O V E R H T T P
GET /data?query=

SELECT t.id, t.date,t.body,a.name

FROM tweets t LEFT JOIN author a 

ON tweet.author_id = author.id

LIMIT 10
P R O T O C O L B U F F E R S
FA L C O R
L E S A I N T G R A A L
• Langage de requêtage déclaratif
• Reposant sur du Remote Procedure Call
• Typage fort, schema
• Support des agrégats
• Standardisé
• Non lié à HTTP
D É C O U V R E Z
G R A P H Q L
PA R T I E 3 / 6
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweet(id: 123) { id body date }
}
HTTP/1.1 200 OK
{
"data": {
"getTweet": {
"id": "123",
"body": "Lorem Ipsum",
"date": "2017-07-14"
}
}
}
GET /tweets/123 HTTP 1.1
Host: http://rest.acme.com/
HTTP/1.1 200 OK
{
"id": 123,
"body": "Lorem Ipsum",
"user_id": 456,
"views": 45,
"date": "2017-07-14",
// etc.
}
RequêteRéponse
REST GraphQL
GraphQL, l'avenir du REST ?
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date
}
getUser {
fullName
}
getNotificationsMeta {
count
}
}
Requête
HTTP/1.1 200 OK
Content-Type: application/json
{
"data": {
"getTweets": [
{
"id": "752",
"body": "The guy next to me is listening...",
"date": "2017-07-15T13:17:42.772Z",
},
{
"id": "123",
"body": "The Espionnage Act was designed to...",
"date": "2017-07-14T12:44:17.449Z"
},
// etc.
],
"getUser": {
"fullName": "John Doe"
},
"getNotificationsMeta": {
"count": 12
}
}
}
Réponse
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date
Author {
username
fullName
avatarUrl
}
Stat {
nbResponses
nbRetweets
nbLikes
}
}
getUser {
fullName
}
getNotificationsMeta {
count
}
}
Requête
GraphQL, l'avenir du REST ?
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date
Author {
username
fullName
avatarUrl
}
Stat {
nbResponses
nbRetweets
nbLikes
}
}
getUser {
fullName
}
getNotificationsMeta {
count
}
}
Requête
{
"data": {
"getTweets": [
{
"id": "752",
"body": "The guy next to me is listening...",
"date": "2017-07-15T13:17:42.772Z",
"Author": {
"username": "quantian1",
"fullName": "Quantian",
"avatarUrl": "https://amce.com/avatars/34345745634",
},
"Stat": {
"nbResponses": 3
"nbRetweets": 4,
"nbLikes": 40
}
},
// etc.
],
"getUser": {
"fullName": "John Doe"
},
"getNotificationsMeta": {
"count": 12
}
}
}
Réponse
GraphQL, l'avenir du REST ?
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date
Author {
username
fullName
avatarUrl
}
Stat {
nbResponses
nbRetweets
nbLikes
}
}
getUser {
fullName
}
getNotificationsMeta {
count
}
}
Requête
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
# entry points
type Query {
getTweet(id: ID!): Tweet
getTweets(limit: Int, sortField: String, sortOrder: String): [Tweet]
getUser: User
getNotificationsMeta: Meta
}
# custom types
type Tweet {
id: ID!
body: String
date: Date
Author: User
Stats: Stat
}
type User {
id: ID!
username: String
firstName: String
lastName: String
fullName: String
name: String @deprecated
# entry points
type Query {
getTweet(id: ID!): Tweet
getTweets(limit: Int, sortField: String, sortOrder: String): [Tweet]
getUser: User
getNotificationsMeta: Meta
}
# custom types
type Tweet {
id: ID!
body: String
date: Date
Author: User
Stats: Stat
}
type User {
id: ID!
username: String
firstName: String
lastName: String
fullName: String
name: String @deprecated
GraphQL, l'avenir du REST ?
POST / HTTP 1.1
Host: http://graphql.acme.com/
Content-Type: application/graphql
{
getTweets(limit: 10, sortField: "date", sortOrder: "DESC") {
id
body
date(timezone: "UTC +2")
Author {
username
fullName
avatarUrl
TopTweets(limit: 10) {
body
date(timezone: "UTC +2 »)
Stats {
nbResponses
nbRetweets
}
}
}
Stat {
nbResponses
nbRetweets
}
}
}
Requête
L E L A N G A G E
G R A P H Q L
• Types
• Champs
• Requêtes, Mutations, Abonnements
• Variables
• Fragments
• Directives
GraphQL, l'avenir du REST ?
C O M M E N T
G R A P H Q L
R É P O N D A V O S
D E M A N D E S
PA R T I E 4 / 6
type Query {
getTweet(id: ID!): Tweet
getTweets(limit: Int): [Tweet]
}
type Tweet {
id: ID!
body: String
Author: User
}
type User {
fullName: String
}
GraphQL, l'avenir du REST ?
const resolvers = {
Query: {
getTweet: (_, params) => tweets.find(t => t.id == params.id),
getTweets: (_, params) => tweets.slice(0, params.limit),
},
Tweet: {
id: tweet => tweet.id,
body: tweet => tweet.body,
Author: tweet => users.find(a => a == tweet.author_id),
},
User: {
fullName: user => `${user.first_name} ${user.last_name}`,
},
};
{
getTweet(id: "1") {
id
body
Author {
fullName
}
}
}
getTweet: (_, params) => tweets.find(t => t.id == params.id)
(null, { id: 1 }) {
id: 1,
body: 'Lorem Ipsum’,
author_id: 10
}
1
{
getTweet(id: "1") {
id
body
Author {
fullName
}
}
}
Tweet: {
id: tweet => tweet.id,
body: tweet => tweet.body,
Author: tweet => users.find(a => a == tweet.author_id),
}
{ id: 1, body: 'Lorem Ipsum’, author_id: 10 }1
2
{
getTweet(id: "1") {
id
body
Author {
fullName
}
}
}
1
2 { id: ‘1’, body: 'Lorem Ipsum’, Author: {
id: 10,
first_name: ‘John',
last_name: 'Doe'
}
}
{ id: 1, body: 'Lorem Ipsum’, author_id: 10 }
{
getTweet(id: "1") {
id
body
Author {
fullName
}
}
}
1
2
User: {
fullName: user => `${user.first_name} ${user.last_name}`,
}
3
{ id: 1, body: 'Lorem Ipsum’, author_id: 10 }
{ id: ‘1’, body: 'Lorem Ipsum’, Author: {
id: 10,
first_name: ‘John',
last_name: 'Doe'
}
}
1
2
{ id: ‘1’, body: 'Lorem Ipsum’, Author: {

fullName: ‘John Doe'

}
}
{ id: ‘1’, body: 'Lorem Ipsum’, Author: {
id: 10,
first_name: ‘John',
last_name: 'Doe'
}
}
{ id: 1, body: 'Lorem Ipsum’, author_id: 10 }
3
{
getTweet(id: "1") {
id
body
Author {
fullName
}
}
}
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
AVA I L A B L E I N Y O U R
S E R V E R L A N G U A G E
• JavaScript
• PHP
• Ruby
• Python
• Go
• Java
• Scala
• C#
• Elixir
• Fortran
• BrainFuck
• etc…
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
const query = `
{
getTweet(id: "1") {
id
body
Author {
name
}
}
}`;
const headers = new Headers();
myHeaders.append('Content-Type', 'application/graphql');
fetch(‘/graphql’, { method: 'POST', body: query, headers });
.then(response => response.json)
.then(response => response.data.getTweet)
.then(tweet => ...);
import React from 'react';
import { gql, graphql } from 'react-apollo';
import LinearProgress from 'material-ui';
const Tweet = ({ data: { loading, tweet } }) => (
<div>
{loading ? (
<LinearProgress />
) : (
<div>
<img src={tweet.author.avatar} className="avatar" />
<span className="author">{tweet.Author.name}</span>
<div className="body">{tweet.body}</div>
</div>
)}
</div>
);
const query = gql`{
getTweet(id: "1") {
id
body
Author {
name
}
}
}`;
export default graphql(query)(App);
AVA I L A B L E I N Y O U R
C L I E N T L A N G U A G E
• Vue.js
• React.js
• Angular.js
• Meteor.js
• Objective-C
• Swift
• Expo
• Java
• Kotlin
• Dart
• Fart
• etc…
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
T O U T E S T P R Ê T P O U R
V O U S A C C U E I L L I R
• Simple
• Stable
• Sécurisé
• Performant
• Documenté
• Supporté
G R A P H Q L , A N G E
O U D É M O N ?
PA R T I E 5 / 6
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
#diversité
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 500 Internal Server Error
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 500 Internal Server Error
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
POST /graphql 200 OK
GraphQL, l'avenir du REST ?
{
Tweets(limit: 100) {
Author {
Tweets(limit: 100) {
Author {
Tweets(limit: 100) {
Author {
Tweets(limit: 100) {
Author {
name
}
}
}
}
}
}
}
}
}
Client Server
query
Client Server
id
Dictionary Dictionary
query id id query
PersistedQueries
GraphQL, l'avenir du REST ?
G R A P H Q L , C ’ E S T
P O U R Q U I ?
PA R T I E 6 / 6
GraphQL, l'avenir du REST ?
Q U E L T Y P E D E D E V I C E U T I L I S E N T V O S C L I E N T S ?
Q U E S T I O N # 1
D E S K T O P
M O B I L E 

E T / O U D E S K T O P
L A P E R F O R M A N C E C Ô T É C L I E N T
E S T- E L L E I M P O R TA N T E ?
Q U E S T I O N # 2
N O N
O U I
C O M B I E N D E R O U T E S A V O T R E A P I R E S T ?
Q U E S T I O N # 3
5 A U P L U S
A U M O I S 6
Q U E L L E E S T L A D U R É E D E V I E D E V O T R E A P I ?
Q U E S T I O N # 4
A U M O I N S 

U N A N Q U E L Q U E S 

M O I S
Q U E L E S T L E N I V E A U D E C O M P L E X I T É 

D E V O T R E A P I ?
Q U E S T I O N # 5
S I M P L E
C O M P L E X E
S U R L A P L U S C O M P L E X E S D E S PA G E S D U C L I E N T,
C O M B I E N D E P E R S I S T E N C E S S O N T A P P E L E E S ?
Q U E S T I O N # 6
U N
P L U S D E U N
AV E Z - V O U S D E S R È G L E S D E C A C H E C O M P L E X E S ?
Q U E S T I O N # 7
N O N
O U I
C O M M E N T T R AVA I L L E N T V O S É Q U I P E S 

F R O N T E T B A C K ?
Q U E S T I O N # 8
B A C K L O G 

C O M M U N
S I L O
C O M B I E N D E D É V E L O P P E U R S ( F R O N T + B A C K )
T R AVA I L L E N T AV E C L’ A P I ?
Q U E S T I O N # 9
A U M O I N S 

C I N Q
U N À Q U AT R E
Q U E L E S T V O T R E T Y P E D E L A N G A G E P R É F É R É ?
Q U E S T I O N # 1 0
F O RT E M E N T 

T Y P É
FA I B L E M E N T 

T Y P É
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
GraphQL, l'avenir du REST ?
M E R C I ! D E S
Q U E S T I O N S ?
F R A N Ç O I S Z A N I N O T T O
@ f r a n c o i s z
1 of 101

Recommended

GraphQL, l'avenir du REST par François ZANINOTTO by
GraphQL, l'avenir du REST par François ZANINOTTOGraphQL, l'avenir du REST par François ZANINOTTO
GraphQL, l'avenir du REST par François ZANINOTTOLa Cuisine du Web
642 views134 slides
Geb for browser automation by
Geb for browser automationGeb for browser automation
Geb for browser automationJacob Aae Mikkelsen
2.2K views108 slides
Writing (Meteor) Code With Style by
Writing (Meteor) Code With StyleWriting (Meteor) Code With Style
Writing (Meteor) Code With StyleStephan Hochhaus
3.3K views29 slides
Challenging Your Assumptions by
Challenging Your AssumptionsChallenging Your Assumptions
Challenging Your AssumptionsKristina Fox
379 views56 slides
Meteor - not just for rockstars by
Meteor - not just for rockstarsMeteor - not just for rockstars
Meteor - not just for rockstarsStephan Hochhaus
3.3K views50 slides
Profiling Web Archives IIPC GA 2015 by
Profiling Web Archives IIPC GA 2015Profiling Web Archives IIPC GA 2015
Profiling Web Archives IIPC GA 2015Sawood Alam
2.1K views45 slides

More Related Content

What's hot

Niles West v Glenbrook South 1984 by
Niles West v Glenbrook South 1984Niles West v Glenbrook South 1984
Niles West v Glenbrook South 1984Dave Levine
541 views22 slides
An Overview on PROV-AQ: Provenance Access and Query by
An Overview on PROV-AQ: Provenance Access and QueryAn Overview on PROV-AQ: Provenance Access and Query
An Overview on PROV-AQ: Provenance Access and QueryOlaf Hartig
955 views34 slides
Reading Other Peoples Code (NDC Sydney 2018) by
Reading Other Peoples Code (NDC Sydney 2018)Reading Other Peoples Code (NDC Sydney 2018)
Reading Other Peoples Code (NDC Sydney 2018)Patricia Aas
2.6K views62 slides
Spring scala - Sneaking Scala into your corporation by
Spring scala  - Sneaking Scala into your corporationSpring scala  - Sneaking Scala into your corporation
Spring scala - Sneaking Scala into your corporationHenryk Konsek
1.5K views31 slides
5. php bangla tutorial php basic by
5. php bangla tutorial php basic5. php bangla tutorial php basic
5. php bangla tutorial php basicSamimKhan19
285 views67 slides
Le magazine Paranoia, Automne 2003. Vol 10, No 2, Issue 33 by
Le magazine Paranoia, Automne 2003. Vol 10, No 2, Issue 33Le magazine Paranoia, Automne 2003. Vol 10, No 2, Issue 33
Le magazine Paranoia, Automne 2003. Vol 10, No 2, Issue 33Guy Boulianne
806 views66 slides

What's hot(12)

Niles West v Glenbrook South 1984 by Dave Levine
Niles West v Glenbrook South 1984Niles West v Glenbrook South 1984
Niles West v Glenbrook South 1984
Dave Levine541 views
An Overview on PROV-AQ: Provenance Access and Query by Olaf Hartig
An Overview on PROV-AQ: Provenance Access and QueryAn Overview on PROV-AQ: Provenance Access and Query
An Overview on PROV-AQ: Provenance Access and Query
Olaf Hartig955 views
Reading Other Peoples Code (NDC Sydney 2018) by Patricia Aas
Reading Other Peoples Code (NDC Sydney 2018)Reading Other Peoples Code (NDC Sydney 2018)
Reading Other Peoples Code (NDC Sydney 2018)
Patricia Aas2.6K views
Spring scala - Sneaking Scala into your corporation by Henryk Konsek
Spring scala  - Sneaking Scala into your corporationSpring scala  - Sneaking Scala into your corporation
Spring scala - Sneaking Scala into your corporation
Henryk Konsek1.5K views
5. php bangla tutorial php basic by SamimKhan19
5. php bangla tutorial php basic5. php bangla tutorial php basic
5. php bangla tutorial php basic
SamimKhan19285 views
Le magazine Paranoia, Automne 2003. Vol 10, No 2, Issue 33 by Guy Boulianne
Le magazine Paranoia, Automne 2003. Vol 10, No 2, Issue 33Le magazine Paranoia, Automne 2003. Vol 10, No 2, Issue 33
Le magazine Paranoia, Automne 2003. Vol 10, No 2, Issue 33
Guy Boulianne806 views
Drupal 8.3.0: the features are ready, are you? by Gábor Hojtsy
Drupal 8.3.0: the features are ready, are you?Drupal 8.3.0: the features are ready, are you?
Drupal 8.3.0: the features are ready, are you?
Gábor Hojtsy439 views
Representing Material Culture Online: Historic Clothing in Omeka by Arden Kirkland
Representing Material Culture Online: Historic Clothing in OmekaRepresenting Material Culture Online: Historic Clothing in Omeka
Representing Material Culture Online: Historic Clothing in Omeka
Arden Kirkland1K views
Advanced Use of Properties and Scripts in TIBCO Spotfire by Herwig Van Marck
Advanced Use of Properties and Scripts in TIBCO SpotfireAdvanced Use of Properties and Scripts in TIBCO Spotfire
Advanced Use of Properties and Scripts in TIBCO Spotfire
Herwig Van Marck44.2K views

Similar to GraphQL, l'avenir du REST ?

eHarmony @ Phoenix Con 2016 by
eHarmony @ Phoenix Con 2016eHarmony @ Phoenix Con 2016
eHarmony @ Phoenix Con 2016Vijaykumar Vangapandu
649 views38 slides
Meteor WWNRW Intro by
Meteor WWNRW IntroMeteor WWNRW Intro
Meteor WWNRW IntroStephan Hochhaus
1.5K views27 slides
Spring Roo 2.0 Preview at Spring I/O 2016 by
Spring Roo 2.0 Preview at Spring I/O 2016 Spring Roo 2.0 Preview at Spring I/O 2016
Spring Roo 2.0 Preview at Spring I/O 2016 DISID
1.4K views35 slides
GraphQL Relay Introduction by
GraphQL Relay IntroductionGraphQL Relay Introduction
GraphQL Relay IntroductionChen-Tsu Lin
510 views40 slides
API Pain Points (PHPNE) by
API Pain Points (PHPNE)API Pain Points (PHPNE)
API Pain Points (PHPNE)Phil Sturgeon
2.6K views59 slides
Google Assistant & Alexa - Asystenci głosowi: możliwości, podobieństwa, różnice by
Google Assistant & Alexa - Asystenci głosowi: możliwości, podobieństwa, różniceGoogle Assistant & Alexa - Asystenci głosowi: możliwości, podobieństwa, różnice
Google Assistant & Alexa - Asystenci głosowi: możliwości, podobieństwa, różniceArtur Skowroński
102 views146 slides

Similar to GraphQL, l'avenir du REST ?(20)

Spring Roo 2.0 Preview at Spring I/O 2016 by DISID
Spring Roo 2.0 Preview at Spring I/O 2016 Spring Roo 2.0 Preview at Spring I/O 2016
Spring Roo 2.0 Preview at Spring I/O 2016
DISID1.4K views
GraphQL Relay Introduction by Chen-Tsu Lin
GraphQL Relay IntroductionGraphQL Relay Introduction
GraphQL Relay Introduction
Chen-Tsu Lin510 views
API Pain Points (PHPNE) by Phil Sturgeon
API Pain Points (PHPNE)API Pain Points (PHPNE)
API Pain Points (PHPNE)
Phil Sturgeon2.6K views
Google Assistant & Alexa - Asystenci głosowi: możliwości, podobieństwa, różnice by Artur Skowroński
Google Assistant & Alexa - Asystenci głosowi: możliwości, podobieństwa, różniceGoogle Assistant & Alexa - Asystenci głosowi: możliwości, podobieństwa, różnice
Google Assistant & Alexa - Asystenci głosowi: możliwości, podobieństwa, różnice
Artur Skowroński102 views
Strangler Pattern in practice @PHPers Day 2019 by Michał Kurzeja
Strangler Pattern in practice @PHPers Day 2019Strangler Pattern in practice @PHPers Day 2019
Strangler Pattern in practice @PHPers Day 2019
Michał Kurzeja208 views
php[world] 2016 - You Don’t Need Node.js - Async Programming in PHP by Adam Englander
php[world] 2016 - You Don’t Need Node.js - Async Programming in PHPphp[world] 2016 - You Don’t Need Node.js - Async Programming in PHP
php[world] 2016 - You Don’t Need Node.js - Async Programming in PHP
Adam Englander496 views
From Content Strategy to Drupal Site Building - Connecting the Dots by Ronald Ashri
From Content Strategy to Drupal Site Building - Connecting the DotsFrom Content Strategy to Drupal Site Building - Connecting the Dots
From Content Strategy to Drupal Site Building - Connecting the Dots
Ronald Ashri2.1K views
From Content Strategy to Drupal Site Building - Connecting the dots by Ronald Ashri
From Content Strategy to Drupal Site Building - Connecting the dotsFrom Content Strategy to Drupal Site Building - Connecting the dots
From Content Strategy to Drupal Site Building - Connecting the dots
Ronald Ashri2.4K views
Google Assistant po polsku - developerski punkt widzenia by Artur Skowroński
Google Assistant po polsku - developerski punkt widzeniaGoogle Assistant po polsku - developerski punkt widzenia
Google Assistant po polsku - developerski punkt widzenia
Artur Skowroński100 views
iOS 개발자의 Flutter 체험기 by Wanbok Choi
iOS 개발자의 Flutter 체험기iOS 개발자의 Flutter 체험기
iOS 개발자의 Flutter 체험기
Wanbok Choi1.4K views
Reducing Resistance: Deployment as Surface by Jeffrey Hulten
Reducing Resistance: Deployment as SurfaceReducing Resistance: Deployment as Surface
Reducing Resistance: Deployment as Surface
Jeffrey Hulten1.1K views
Apache Spark: the next big thing? - StampedeCon 2014 by StampedeCon
Apache Spark: the next big thing? - StampedeCon 2014Apache Spark: the next big thing? - StampedeCon 2014
Apache Spark: the next big thing? - StampedeCon 2014
StampedeCon1.3K views
Serverless WordPress & next Interface of WordPress by Hidetaka Okamoto
Serverless WordPress & next Interface of WordPressServerless WordPress & next Interface of WordPress
Serverless WordPress & next Interface of WordPress
Hidetaka Okamoto1K views
What's new in Vaadin 8, how do you upgrade, and what's next? by Marcus Hellberg
What's new in Vaadin 8, how do you upgrade, and what's next?What's new in Vaadin 8, how do you upgrade, and what's next?
What's new in Vaadin 8, how do you upgrade, and what's next?
Marcus Hellberg849 views
An Introduction to CSS Preprocessors by Miloš Sutanovac
An Introduction to CSS PreprocessorsAn Introduction to CSS Preprocessors
An Introduction to CSS Preprocessors
Miloš Sutanovac618 views

More from Francois Zaninotto

Vous aimez les legos ? React est fait pour vous ! by
Vous aimez les legos ? React est fait pour vous !Vous aimez les legos ? React est fait pour vous !
Vous aimez les legos ? React est fait pour vous !Francois Zaninotto
1.5K views40 slides
La blockchain, quand l'individu sert au collectif... malgré lui by
La blockchain, quand l'individu sert au collectif... malgré luiLa blockchain, quand l'individu sert au collectif... malgré lui
La blockchain, quand l'individu sert au collectif... malgré luiFrancois Zaninotto
5.3K views36 slides
Le jeu vidéo à la rescousse du web by
Le jeu vidéo à la rescousse du webLe jeu vidéo à la rescousse du web
Le jeu vidéo à la rescousse du webFrancois Zaninotto
1.7K views73 slides
Frameworks : A history of violence by
Frameworks : A history of violenceFrameworks : A history of violence
Frameworks : A history of violenceFrancois Zaninotto
5.1K views46 slides
Php 100k by
Php 100kPhp 100k
Php 100kFrancois Zaninotto
12.4K views90 slides
La migration continue vers Symfony by
La migration continue vers SymfonyLa migration continue vers Symfony
La migration continue vers SymfonyFrancois Zaninotto
9K views85 slides

More from Francois Zaninotto(12)

Vous aimez les legos ? React est fait pour vous ! by Francois Zaninotto
Vous aimez les legos ? React est fait pour vous !Vous aimez les legos ? React est fait pour vous !
Vous aimez les legos ? React est fait pour vous !
Francois Zaninotto1.5K views
La blockchain, quand l'individu sert au collectif... malgré lui by Francois Zaninotto
La blockchain, quand l'individu sert au collectif... malgré luiLa blockchain, quand l'individu sert au collectif... malgré lui
La blockchain, quand l'individu sert au collectif... malgré lui
Francois Zaninotto5.3K views
La programmation asynchrone... et les pates by Francois Zaninotto
La programmation asynchrone... et les patesLa programmation asynchrone... et les pates
La programmation asynchrone... et les pates
Francois Zaninotto2.7K views
Bonnes pratiques de développement avec Node js by Francois Zaninotto
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node js
Francois Zaninotto5.7K views
Simplify your professional web development with symfony by Francois Zaninotto
Simplify your professional web development with symfonySimplify your professional web development with symfony
Simplify your professional web development with symfony
Francois Zaninotto2.7K views

Recently uploaded

40th TWNIC Open Policy Meeting: APNIC PDP update by
40th TWNIC Open Policy Meeting: APNIC PDP update40th TWNIC Open Policy Meeting: APNIC PDP update
40th TWNIC Open Policy Meeting: APNIC PDP updateAPNIC
106 views20 slides
ARNAB12.pdf by
ARNAB12.pdfARNAB12.pdf
ARNAB12.pdfArnabChakraborty499766
5 views83 slides
Penetration Testing for Cybersecurity Professionals by
Penetration Testing for Cybersecurity ProfessionalsPenetration Testing for Cybersecurity Professionals
Penetration Testing for Cybersecurity Professionals211 Check
49 views17 slides
ATPMOUSE_융합2조.pptx by
ATPMOUSE_융합2조.pptxATPMOUSE_융합2조.pptx
ATPMOUSE_융합2조.pptxkts120898
35 views70 slides
40th TWNIC Open Policy Meeting: A quick look at QUIC by
40th TWNIC Open Policy Meeting: A quick look at QUIC40th TWNIC Open Policy Meeting: A quick look at QUIC
40th TWNIC Open Policy Meeting: A quick look at QUICAPNIC
109 views20 slides
40th TWNIC OPM: On LEOs (Low Earth Orbits) and Starlink Download by
40th TWNIC OPM: On LEOs (Low Earth Orbits) and Starlink Download40th TWNIC OPM: On LEOs (Low Earth Orbits) and Starlink Download
40th TWNIC OPM: On LEOs (Low Earth Orbits) and Starlink DownloadAPNIC
112 views30 slides

Recently uploaded(13)

40th TWNIC Open Policy Meeting: APNIC PDP update by APNIC
40th TWNIC Open Policy Meeting: APNIC PDP update40th TWNIC Open Policy Meeting: APNIC PDP update
40th TWNIC Open Policy Meeting: APNIC PDP update
APNIC106 views
Penetration Testing for Cybersecurity Professionals by 211 Check
Penetration Testing for Cybersecurity ProfessionalsPenetration Testing for Cybersecurity Professionals
Penetration Testing for Cybersecurity Professionals
211 Check49 views
ATPMOUSE_융합2조.pptx by kts120898
ATPMOUSE_융합2조.pptxATPMOUSE_융합2조.pptx
ATPMOUSE_융합2조.pptx
kts12089835 views
40th TWNIC Open Policy Meeting: A quick look at QUIC by APNIC
40th TWNIC Open Policy Meeting: A quick look at QUIC40th TWNIC Open Policy Meeting: A quick look at QUIC
40th TWNIC Open Policy Meeting: A quick look at QUIC
APNIC109 views
40th TWNIC OPM: On LEOs (Low Earth Orbits) and Starlink Download by APNIC
40th TWNIC OPM: On LEOs (Low Earth Orbits) and Starlink Download40th TWNIC OPM: On LEOs (Low Earth Orbits) and Starlink Download
40th TWNIC OPM: On LEOs (Low Earth Orbits) and Starlink Download
APNIC112 views
Cracking the Code Decoding Leased Line Quotes for Connectivity Excellence.pptx by LeasedLinesQuote
Cracking the Code Decoding Leased Line Quotes for Connectivity Excellence.pptxCracking the Code Decoding Leased Line Quotes for Connectivity Excellence.pptx
Cracking the Code Decoding Leased Line Quotes for Connectivity Excellence.pptx
WITS Deck by W.I.T.S.
WITS DeckWITS Deck
WITS Deck
W.I.T.S.36 views
cis5-Project-11a-Harry Lai by harrylai126
cis5-Project-11a-Harry Laicis5-Project-11a-Harry Lai
cis5-Project-11a-Harry Lai
harrylai1269 views
The Dark Web : Hidden Services by Anshu Singh
The Dark Web : Hidden ServicesThe Dark Web : Hidden Services
The Dark Web : Hidden Services
Anshu Singh22 views

GraphQL, l'avenir du REST ?

  • 1. G R A P H Q L , 
 L’ AV E N I R D U R E S T ? F R A N Ç O I S Z A N I N O T T O - @ f r a n c o i s z
  • 3. G R A P H Q L g r a f k ɥ ɛ l G R A S K A F K A E C U E L L E
  • 4. L E P R O B L È M E PA R T I E 1 / 6
  • 5. R E S T
  • 7. 1. GET /user 2. GET /tweets 3. GET /users?ids=[123,456,789,…] 4. GET /tweet_stats?ids=[123,456,789,…] 5. GET /notifications 6. POST /views
  • 13. B R E A K I N G C H A N G E
  • 19. R E S T I N P E A C E • Trop de requêtes par page • Mauvaise performance sur mobile • Pas de standard • Pas de schema • Evolution impossible • Actions limitées au CRUD
  • 20. L E S A U T R E S C A N D I D AT S PA R T I E 2 / 6
  • 21. R E S T + + GET /tweets?include=author&fields=[id,date,body]
  • 23. S Q L O V E R H T T P GET /data?query=
 SELECT t.id, t.date,t.body,a.name
 FROM tweets t LEFT JOIN author a 
 ON tweet.author_id = author.id
 LIMIT 10
  • 24. P R O T O C O L B U F F E R S
  • 25. FA L C O R
  • 26. L E S A I N T G R A A L • Langage de requêtage déclaratif • Reposant sur du Remote Procedure Call • Typage fort, schema • Support des agrégats • Standardisé • Non lié à HTTP
  • 27. D É C O U V R E Z G R A P H Q L PA R T I E 3 / 6
  • 28. POST / HTTP 1.1 Host: http://graphql.acme.com/ Content-Type: application/graphql { getTweet(id: 123) { id body date } } HTTP/1.1 200 OK { "data": { "getTweet": { "id": "123", "body": "Lorem Ipsum", "date": "2017-07-14" } } } GET /tweets/123 HTTP 1.1 Host: http://rest.acme.com/ HTTP/1.1 200 OK { "id": 123, "body": "Lorem Ipsum", "user_id": 456, "views": 45, "date": "2017-07-14", // etc. } RequêteRéponse REST GraphQL
  • 30. POST / HTTP 1.1 Host: http://graphql.acme.com/ Content-Type: application/graphql { getTweets(limit: 10, sortField: "date", sortOrder: "DESC") { id body date } getUser { fullName } getNotificationsMeta { count } } Requête
  • 31. HTTP/1.1 200 OK Content-Type: application/json { "data": { "getTweets": [ { "id": "752", "body": "The guy next to me is listening...", "date": "2017-07-15T13:17:42.772Z", }, { "id": "123", "body": "The Espionnage Act was designed to...", "date": "2017-07-14T12:44:17.449Z" }, // etc. ], "getUser": { "fullName": "John Doe" }, "getNotificationsMeta": { "count": 12 } } } Réponse
  • 32. POST / HTTP 1.1 Host: http://graphql.acme.com/ Content-Type: application/graphql { getTweets(limit: 10, sortField: "date", sortOrder: "DESC") { id body date Author { username fullName avatarUrl } Stat { nbResponses nbRetweets nbLikes } } getUser { fullName } getNotificationsMeta { count } } Requête
  • 34. POST / HTTP 1.1 Host: http://graphql.acme.com/ Content-Type: application/graphql { getTweets(limit: 10, sortField: "date", sortOrder: "DESC") { id body date Author { username fullName avatarUrl } Stat { nbResponses nbRetweets nbLikes } } getUser { fullName } getNotificationsMeta { count } } Requête
  • 35. { "data": { "getTweets": [ { "id": "752", "body": "The guy next to me is listening...", "date": "2017-07-15T13:17:42.772Z", "Author": { "username": "quantian1", "fullName": "Quantian", "avatarUrl": "https://amce.com/avatars/34345745634", }, "Stat": { "nbResponses": 3 "nbRetweets": 4, "nbLikes": 40 } }, // etc. ], "getUser": { "fullName": "John Doe" }, "getNotificationsMeta": { "count": 12 } } } Réponse
  • 37. POST / HTTP 1.1 Host: http://graphql.acme.com/ Content-Type: application/graphql { getTweets(limit: 10, sortField: "date", sortOrder: "DESC") { id body date Author { username fullName avatarUrl } Stat { nbResponses nbRetweets nbLikes } } getUser { fullName } getNotificationsMeta { count } } Requête
  • 40. # entry points type Query { getTweet(id: ID!): Tweet getTweets(limit: Int, sortField: String, sortOrder: String): [Tweet] getUser: User getNotificationsMeta: Meta } # custom types type Tweet { id: ID! body: String date: Date Author: User Stats: Stat } type User { id: ID! username: String firstName: String lastName: String fullName: String name: String @deprecated
  • 41. # entry points type Query { getTweet(id: ID!): Tweet getTweets(limit: Int, sortField: String, sortOrder: String): [Tweet] getUser: User getNotificationsMeta: Meta } # custom types type Tweet { id: ID! body: String date: Date Author: User Stats: Stat } type User { id: ID! username: String firstName: String lastName: String fullName: String name: String @deprecated
  • 43. POST / HTTP 1.1 Host: http://graphql.acme.com/ Content-Type: application/graphql { getTweets(limit: 10, sortField: "date", sortOrder: "DESC") { id body date(timezone: "UTC +2") Author { username fullName avatarUrl TopTweets(limit: 10) { body date(timezone: "UTC +2 ») Stats { nbResponses nbRetweets } } } Stat { nbResponses nbRetweets } } } Requête
  • 44. L E L A N G A G E G R A P H Q L • Types • Champs • Requêtes, Mutations, Abonnements • Variables • Fragments • Directives
  • 46. C O M M E N T G R A P H Q L R É P O N D A V O S D E M A N D E S PA R T I E 4 / 6
  • 47. type Query { getTweet(id: ID!): Tweet getTweets(limit: Int): [Tweet] } type Tweet { id: ID! body: String Author: User } type User { fullName: String }
  • 49. const resolvers = { Query: { getTweet: (_, params) => tweets.find(t => t.id == params.id), getTweets: (_, params) => tweets.slice(0, params.limit), }, Tweet: { id: tweet => tweet.id, body: tweet => tweet.body, Author: tweet => users.find(a => a == tweet.author_id), }, User: { fullName: user => `${user.first_name} ${user.last_name}`, }, };
  • 50. { getTweet(id: "1") { id body Author { fullName } } } getTweet: (_, params) => tweets.find(t => t.id == params.id) (null, { id: 1 }) { id: 1, body: 'Lorem Ipsum’, author_id: 10 } 1
  • 51. { getTweet(id: "1") { id body Author { fullName } } } Tweet: { id: tweet => tweet.id, body: tweet => tweet.body, Author: tweet => users.find(a => a == tweet.author_id), } { id: 1, body: 'Lorem Ipsum’, author_id: 10 }1 2
  • 52. { getTweet(id: "1") { id body Author { fullName } } } 1 2 { id: ‘1’, body: 'Lorem Ipsum’, Author: { id: 10, first_name: ‘John', last_name: 'Doe' } } { id: 1, body: 'Lorem Ipsum’, author_id: 10 }
  • 53. { getTweet(id: "1") { id body Author { fullName } } } 1 2 User: { fullName: user => `${user.first_name} ${user.last_name}`, } 3 { id: 1, body: 'Lorem Ipsum’, author_id: 10 } { id: ‘1’, body: 'Lorem Ipsum’, Author: { id: 10, first_name: ‘John', last_name: 'Doe' } }
  • 54. 1 2 { id: ‘1’, body: 'Lorem Ipsum’, Author: {
 fullName: ‘John Doe'
 } } { id: ‘1’, body: 'Lorem Ipsum’, Author: { id: 10, first_name: ‘John', last_name: 'Doe' } } { id: 1, body: 'Lorem Ipsum’, author_id: 10 } 3 { getTweet(id: "1") { id body Author { fullName } } }
  • 57. AVA I L A B L E I N Y O U R S E R V E R L A N G U A G E • JavaScript • PHP • Ruby • Python • Go • Java • Scala • C# • Elixir • Fortran • BrainFuck • etc…
  • 62. const query = ` { getTweet(id: "1") { id body Author { name } } }`; const headers = new Headers(); myHeaders.append('Content-Type', 'application/graphql'); fetch(‘/graphql’, { method: 'POST', body: query, headers }); .then(response => response.json) .then(response => response.data.getTweet) .then(tweet => ...);
  • 63. import React from 'react'; import { gql, graphql } from 'react-apollo'; import LinearProgress from 'material-ui'; const Tweet = ({ data: { loading, tweet } }) => ( <div> {loading ? ( <LinearProgress /> ) : ( <div> <img src={tweet.author.avatar} className="avatar" /> <span className="author">{tweet.Author.name}</span> <div className="body">{tweet.body}</div> </div> )} </div> ); const query = gql`{ getTweet(id: "1") { id body Author { name } } }`; export default graphql(query)(App);
  • 64. AVA I L A B L E I N Y O U R C L I E N T L A N G U A G E • Vue.js • React.js • Angular.js • Meteor.js • Objective-C • Swift • Expo • Java • Kotlin • Dart • Fart • etc…
  • 67. T O U T E S T P R Ê T P O U R V O U S A C C U E I L L I R • Simple • Stable • Sécurisé • Performant • Documenté • Supporté
  • 68. G R A P H Q L , A N G E O U D É M O N ? PA R T I E 5 / 6
  • 80. POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 500 Internal Server Error POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 500 Internal Server Error POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK POST /graphql 200 OK
  • 82. { Tweets(limit: 100) { Author { Tweets(limit: 100) { Author { Tweets(limit: 100) { Author { Tweets(limit: 100) { Author { name } } } } } } } } }
  • 83. Client Server query Client Server id Dictionary Dictionary query id id query PersistedQueries
  • 85. G R A P H Q L , C ’ E S T P O U R Q U I ? PA R T I E 6 / 6
  • 87. Q U E L T Y P E D E D E V I C E U T I L I S E N T V O S C L I E N T S ? Q U E S T I O N # 1 D E S K T O P M O B I L E 
 E T / O U D E S K T O P
  • 88. L A P E R F O R M A N C E C Ô T É C L I E N T E S T- E L L E I M P O R TA N T E ? Q U E S T I O N # 2 N O N O U I
  • 89. C O M B I E N D E R O U T E S A V O T R E A P I R E S T ? Q U E S T I O N # 3 5 A U P L U S A U M O I S 6
  • 90. Q U E L L E E S T L A D U R É E D E V I E D E V O T R E A P I ? Q U E S T I O N # 4 A U M O I N S 
 U N A N Q U E L Q U E S 
 M O I S
  • 91. Q U E L E S T L E N I V E A U D E C O M P L E X I T É 
 D E V O T R E A P I ? Q U E S T I O N # 5 S I M P L E C O M P L E X E
  • 92. S U R L A P L U S C O M P L E X E S D E S PA G E S D U C L I E N T, C O M B I E N D E P E R S I S T E N C E S S O N T A P P E L E E S ? Q U E S T I O N # 6 U N P L U S D E U N
  • 93. AV E Z - V O U S D E S R È G L E S D E C A C H E C O M P L E X E S ? Q U E S T I O N # 7 N O N O U I
  • 94. C O M M E N T T R AVA I L L E N T V O S É Q U I P E S 
 F R O N T E T B A C K ? Q U E S T I O N # 8 B A C K L O G 
 C O M M U N S I L O
  • 95. C O M B I E N D E D É V E L O P P E U R S ( F R O N T + B A C K ) T R AVA I L L E N T AV E C L’ A P I ? Q U E S T I O N # 9 A U M O I N S 
 C I N Q U N À Q U AT R E
  • 96. Q U E L E S T V O T R E T Y P E D E L A N G A G E P R É F É R É ? Q U E S T I O N # 1 0 F O RT E M E N T 
 T Y P É FA I B L E M E N T 
 T Y P É
  • 101. M E R C I ! D E S Q U E S T I O N S ? F R A N Ç O I S Z A N I N O T T O @ f r a n c o i s z