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
Les sites web sont devenus de véritables applications, grâce notamment à l'adoption du model SPA (single page application). Dès lors, il semble logique qu'elles puissent lire et modifier les données de façon plus intuitive et de définir leur propre schéma de données indépendamment du back-end. Il serait élégant de résoudre cette problématique via une solution souple, pérenne et indépendante d'un framework. Heureusement, Facebook et Netflix ont open-sourcé leur réponse respective : GraphQL et FalcorJS. Nous aborderons en détail le fonctionnement de ces librairies et vous donnerons les clés pour faire un choix éclairé
Semelhante a 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
Semelhante a 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)
Tech4Exec - Pourquoi faut-il gérer votre projet (Big) data comme une start-up...
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
4. @xebiconfr #xebiconfr
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
5. @xebiconfr #xebiconfr
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
7. @xebiconfr #xebiconfr
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
8. @xebiconfr #xebiconfr
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
10. @xebiconfr #xebiconfr
A quoi ressemble une requête ?
10
2d
// Résultat
{
"user": {
"id": 123456
"name": "Abdelhakim B."
}
}
// Requête GraphQL
{
user(id: 123456) {
id
name
}
}
11. @xebiconfr #xebiconfr
Les Concepts de Base
● Hiérarchique
● Requêtes spécifiques au client
● Typage fort
● Rétrocompatibilité
● Introspectif
● Indépendant du transport
11
2e
19. @xebiconfr #xebiconfr
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
20. @xebiconfr #xebiconfr
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
27. @xebiconfr #xebiconfr
{
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 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..
5 articles, 30 commentaires
29. @xebiconfr #xebiconfr
● 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
30. @xebiconfr #xebiconfr
● 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
31. @xebiconfr #xebiconfr
Avoir un outil centré sur la performance et le cloud, spécialement
adapté aux architectures microservices.
Objectif
31
3c
32. @xebiconfr #xebiconfr
A quoi ressemble une requête ?
32
3d
// Résultat
{
"user": {
"name": "Abdelhakim B."
}
}
// Requête falcor
model
.get('users[0].name')
.then(
//
)
34. @xebiconfr #xebiconfr
● 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
35. @xebiconfr #xebiconfr
● 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
37. @xebiconfr #xebiconfr
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
38. @xebiconfr #xebiconfr
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
39. @xebiconfr #xebiconfr
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
41. @xebiconfr #xebiconfr
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)
42. @xebiconfr #xebiconfr
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
43. @xebiconfr #xebiconfr
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 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..
5 articles, 30 commentaires
45. @xebiconfr #xebiconfr
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
46. @xebiconfr #xebiconfr
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
47. @xebiconfr #xebiconfr
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