XebiCon'16 : GraphQL et Falcor, un nouveau regard sur les architectures REST ? Par Antoine Le Taxin et Abdelhakim Bachar, Développeurs Front-End chez Xebia

@xebiconfr #xebiconfr
GraphQL et Falcor, un
nouveau regard sur les
architectures REST
Abdelhakim
Bachar
Antoine
Le Taxin

Qui sommes-nous ?
Abdelhakim Bachar
@a_bachar
2
Antoine Le Taxin
@modulom

Super, un nouveau projet !
1
3

Besoin
GraphQL for iOS par Simone Civetta
GraphQL est une technologie dont vous avez entendu parler, peut-être, de vos collègues
Front. Il s’agit d’une API middleware, similaire à un ESB, qui…
Tags: Front, GraphQL, FalcorJS, React
Commentaires
Par Abdelhakim Bachar, Il y a 3 mois
An awesome article
Par Antoine Le Taxin, Il y a 3 mois
Wow.. Thanks much for sharing..
4
1a
5 articles, 30 commentaires

RESTful (representational state transfer)
✔ Possibilité de cache
✔ Indépendance entre le modèle et la vue
5
1b
{
"id": 1,
"title": "Lorem ipsum",
"authorId": 1000
}
{
"id": 1000,
"lastName": "Carver",
"firstName": "Kerry"
}
✘ Latence (grand nombre de requêtes ou réponse lourde)
✘ Over fetching
[GET]/post/1 [GET]/user/1000

L’approche GraphQL
2
6

Qu’est ce que GraphQL ?
● Est une Spécification
● Implémentée en plusieurs langages de programmation
● Définit un langage permettant de requêter et récupérer de
manière déclarative des données depuis un back-end
7
2a

Trois points d’histoire
● Créé par Facebook
● Remplacer tous les services REST nécessaires aux applications
mobile
● En production depuis 2012 pour les applications iOS et Android
de Facebook
8
2b

Objectif
Avoir un outil puissant, productif et rétrocompatible pour développer
des applications
9
2c

A quoi ressemble une requête ?
10
2d
// Résultat
{
"user": {
"id": 123456
"name": "Abdelhakim B."
}
}
// Requête GraphQL
{
user(id: 123456) {
id
name
}
}

Les Concepts de Base
● Hiérarchique
● Requêtes spécifiques au client
● Typage fort
● Rétrocompatibilité
● Introspectif
● Indépendant du transport
11
2e

Hiérarchique
12
2f
{
user(id: 1000) {
name
friends {
id
name
}
}
}

Requêtes spécifiques au client
13
2g
Serveur
Possibilités
Client
Besoins

const UserType = new GraphQLObjectType({
name: 'User',
description: 'Define a user resource',
fields: () => ({
firstName: {
type: GraphQLString, resolve: tag => tag.label
},
posts: {
type: new GraphQLList(PostType),
resolve: tag => tag.getPosts()
}
})
});
Typage fort
14
2h

const UserType = new GraphQLObjectType({
fields: () => ({
fullName: {
type: GraphQLString,
isDeprecated: true,
deprecationReason: "You don't need it",
resolve: user => `${user.firstName} ${user.lastName}`
}
})
});
Rétrocompatibilité
15
2i

Introspectif
16
2j
{
__type(name: "User") {
name
kind
}
}
{
"data": {
"__type": {
"name": "User",
"kind": "OBJECT"
}
}
}

Introspectif: Génération de la documentation
17
2k

Indépendant du transport
18
2l
WebSocket

Que des requêtes ?
Non, pas seulement les requêtes, mais aussi la création, la mis à jour
et la suppression grâce au Mutation
19
2m

Comment requêter un serveur GraphQL ?
POST
curl -XPOST -d 'query { user { name } }' http://localhost:3000
GET
http://localhost:3000/graphql?query={user{name}}
20
2n

app.use('/graphql', expressGraphql({
schema,
pretty: true,
graphiql: true
}));
GraphQL HTTP Server Middleware
21
2o

const schema = new GraphQLSchema({
query: queryType,
mutation: mutationType
});
GraphQL Schema
22
2p

const queryType = new GraphQLObjectType({
name: 'Query',
description: 'Root query entry point',
fields: () => ({
users: UserQuery,
posts: PostQuery,
// ...
})
});
GraphQL Query
23
2q

const UserQuery = {
type: new GraphQLList(UserType),
args: {
id: { type: GraphQLInt },
firstName: { type: GraphQLString },
// ...
},
resolve: (root, args) => User.findAll({where: args})
};
UserQuery
24
2s

const UserType = GraphQLObjectType({
name: 'User',
description: 'Blog user',
fields: () => ({
id: {
type: GraphQLInt,
resolve: u => u.id
},
firstName: { type: GraphQLString },
posts: {
type: new GraphQLList(PostType),
resolve: u => u.getPosts()
}
})
});
Type User
25
2t

const mutationType = new GraphQLObjectType({
name: "Mutation",
description: "Root mutation entry point",
fields: () => ({
createUser: {
type: UserType,
args: { firstName: {type: new GraphQLNonNull(GraphQLString)} },
resolve: (source, args) => User.create(Object.assign({}, args))
}
})
});
GraphQL Mutation
26
2r

{
posts(name: 12549) {
id
title
content
author {
id
firstName
lastName
}
comments {
content
author {
id
firstName
lastName
count_comments
count_posts
}
}
}
}
La requête pour notre blog
27
2u
GraphQL est une technologie dont vous avez
entendu parler, peut-être, de vos collègues
Front. Il s’agit d’une API middleware, similaire
à un ESB, qui…
Commentaires
An awesome article

L’approche Falcor
3
28

● Est un librairie Javascript open source
● Propose une manière impérative de décrire et d’accéder aux
données
● Embarque un système de cache et d’optimisation de requêtes
Qu’est ce que Falcor ?
29
3a

● Créé par Netflix
● Répond aux besoins de performance, d’éclatement de leur
sources de données et diversité des supports
● En production pour leur applications TV, mobile et desktop et
open source depuis 2015
Trois points d’histoire
30
3b

Avoir un outil centré sur la performance et le cloud, spécialement
adapté aux architectures microservices.
Objectif
31
3c

A quoi ressemble une requête ?
32
3d
// Résultat
{
"user": {
"name": "Abdelhakim B."
}
}
// Requête falcor
model
.get('users[0].name')
.then(
//
)

Les Concepts de Base
33
3e
Paths
JSON Graph
Data SourcesRouter
Model

● Langage de query de Falcor
● Exprime un chemin au travers d’un objet JSON
● Il accepte deux syntaxes :
○ Syntaxe Path String
○ Array de clés
'posts[1].title'
['posts', 1, 'title']
'posts[1..2]['title','content']'
['posts', {from: 1, to: 2}, ['title','content']]
Paths
34
3f

● On accède aux données au travers d’un graph JSON unique
(quelque soit le nombre de sources)
// frontend
var model = new falcor.Model({
source: new falcor.HttpDataSource('api/model.json')
})
// backend
app.use('/api/model.json', falcorExpress.dataSourceRoute((req, res) =>
{
return new Router([ (...) ])
}
)
Model
35
3g

● Retourne les données de manière asynchrone
model
.get(
/.../
)
.then(/.../)
Model
36
3h

Le Modèle optimise les requêtes concurrentes
model
.get(
'posts[0].title',
'posts[1].title',
'posts[0].content',
'posts[1].content,
)
.then(/.../)
// Path envoyé au backend sous form de “query string”
paths:
[["posts",{"from":0,"to":1},["title", “content”]]]
Model
37
3i

Le Modèle optimise les requêtes sortantes grâce au cache
model
.get('posts[0..1].title').then(/.../)
// Path envoyé au backend sous form de “query string”
paths:
[["posts",{"from":0,"to":1},"title"]]
model
.get('posts[0..1][“title”,”content”]').then(/.../)
// Path envoyé au backend est optimisé pour ne chercher que la donnée manquante
paths:
[["posts",{"from":0,"to":1},"content"]]
Model
38
3j

Pour permettre au JSON de passer d’arbre à graph.
Types primitifs supplémentaires :
● Reference (ref) : lien symbolique
● Atom (atom) : valeur json (object / array)
● Error (error) : erreur (surtout utilisé côté routeur)
JSON Graph
39
3k

{
postsByIds: {
1000: {
title: "Aliquip voluptate ",
content: "Ex cupidatat ",
author_id: falcor.Model.ref('usersByIds[1000]')
},
1001: {...}
},
posts: [
{ $type: 'ref', value:['postsByIds', 1000] },
{ $type: 'ref', value:['postsByIds', 1001] }
]
}})
JSON Graph : ref
40
3l

Data Sources
41
3m
Une interface qui permet d’exposer un JSON Graph
Opérations disponibles pour Route ou Model :
● get : lire
● set : modifier
● call : appeler une fonction du graph (non idempotent)

Router
● Pattern matching sur la structure du graph Json.
● Trois types spécifiques :
○ {integers} / {range} / {keys}
● pathSet comprend les arguments du path sous forme d’array
// front
model.get('posts[0].title')
// route
route: "posts[{integers:postId}]['title', 'content']",
get: (pathSet) => {
return someAsyncService.getData(pathSet)
//… pathSet[0] = posts / pathSet[1] = 0 / pathSet[2] = title //
}
42
3n

model.get(
'postsById[12549]["title", "content", "tags", "author"]'
)
model.get(`
authorsById[${data.author.id}]["firstName", "lastName"]
`)
model.get(`
commentsById[${data.comments.from}..${data.comments.to}]
["content", "author"]
`)
model.get(`
authorsById[${data.author.from}..${data.author.to}]
["firstName", "lastName", "count_comments", "count_post"]
`)
La requête pour notre blog
43
3o
GraphQL est une technologie dont vous avez
entendu parler, peut-être, de vos collègues
Front. Il s’agit d’une API middleware, similaire
à un ESB, qui…
Commentaires
An awesome article

Take Away
4
44

Avantages / inconvénients de GraphQL
✔ Déclaratif (requête, type)
✔ Documentation vivante
✔ Une seule requête suffit
✔ Exploration facile des données
✔ Contrôle total sur la granularité des informations
✘ Ne supporte ni les opérateurs, ni les fonctions d'agrégation
✘ Pas de gestion automatique du cache
45
4a

Avantages / inconvénients de Falcor
✔ Gestion automatique du cache
✔ Optimisation à la volée des requêtes
✔ Contrôle total sur la granularité des informations
✔ Optimisé pour la gestion de sources de données multiples
✔ Le code front et back utilisent la même librairie
✘ Impératif (pas de type)
✘ Ne supporte ni les opérateurs, ni les fonctions d'agrégation
? Implémentation du backend est laissé à la charge du développeur
46
4b

Cas d’utilisation
Prendre l’une des deux solutions si :
- Beaucoup de lecture, peu d’écriture
- Le réseau et la latence est la principale préoccupation (Mobile)
S’orienter vers GraphQL si :
- Vous voulez une validation du modèle et une documentation
- Vous voulez utiliser autre langage que Javascript
S’orienter vers Falcor si :
- Vos données sont réparties à différents endroits
- Vous voulez un cache géré automatiquement et optimisé
47
4c

Questions ?
Merci !
48

XebiCon'16 : GraphQL et Falcor, un nouveau regard sur les architectures REST ? Par Antoine Le Taxin et Abdelhakim Bachar, Développeurs Front-End chez Xebia

XebiCon'16 : GraphQL et Falcor, un nouveau regard sur les architectures REST ? Par Antoine Le Taxin et Abdelhakim Bachar, Développeurs Front-End chez Xebia

Recommandé

Contenu connexe

Tendances

Tendances(20)

En vedette

En vedette(10)

Similaire à XebiCon'16 : GraphQL et Falcor, un nouveau regard sur les architectures REST ? Par Antoine Le Taxin et Abdelhakim Bachar, Développeurs Front-End chez Xebia

Similaire à XebiCon'16 : GraphQL et Falcor, un nouveau regard sur les architectures REST ? Par Antoine Le Taxin et Abdelhakim Bachar, Développeurs Front-End chez Xebia(20)

Plus de Publicis Sapient Engineering

Plus de Publicis Sapient Engineering(20)

XebiCon'16 : GraphQL et Falcor, un nouveau regard sur les architectures REST ? Par Antoine Le Taxin et Abdelhakim Bachar, Développeurs Front-End chez Xebia