Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@xebiconfr #xebiconfr
GraphQL et Falcor, un
nouveau regard sur les
architectures REST
Abdelhakim
Bachar
Antoine
Le Taxin
@xebiconfr #xebiconfr
Qui sommes-nous ?
Abdelhakim Bachar
@a_bachar
2
Antoine Le Taxin
@modulom
@xebiconfr #xebiconfr
Super, un nouveau projet !
1
3
@xebiconfr #xebiconfr
Besoin
GraphQL for iOS par Simone Civetta
GraphQL est une technologie dont vous avez entendu parler,...
@xebiconfr #xebiconfr
RESTful (representational state transfer)
✔ Possibilité de cache
✔ Indépendance entre le modèle et l...
@xebiconfr #xebiconfr
L’approche GraphQL
2
6
@xebiconfr #xebiconfr
Qu’est ce que GraphQL ?
● Est une Spécification
● Implémentée en plusieurs langages de programmation...
@xebiconfr #xebiconfr
Trois points d’histoire
● Créé par Facebook
● Remplacer tous les services REST nécessaires aux appli...
@xebiconfr #xebiconfr
Objectif
Avoir un outil puissant, productif et rétrocompatible pour développer
des applications
9
2c
@xebiconfr #xebiconfr
A quoi ressemble une requête ?
10
2d
// Résultat
{
"user": {
"id": 123456
"name": "Abdelhakim B."
}
...
@xebiconfr #xebiconfr
Les Concepts de Base
● Hiérarchique
● Requêtes spécifiques au client
● Typage fort
● Rétrocompatibil...
@xebiconfr #xebiconfr
Hiérarchique
12
2f
{
user(id: 1000) {
name
friends {
id
name
}
}
}
@xebiconfr #xebiconfr
Requêtes spécifiques au client
13
2g
Serveur
Possibilités
Client
Besoins
@xebiconfr #xebiconfr
const UserType = new GraphQLObjectType({
name: 'User',
description: 'Define a user resource',
fields...
@xebiconfr #xebiconfr
const UserType = new GraphQLObjectType({
fields: () => ({
fullName: {
type: GraphQLString,
isDepreca...
@xebiconfr #xebiconfr
Introspectif
16
2j
{
__type(name: "User") {
name
kind
}
}
{
"data": {
"__type": {
"name": "User",
"k...
@xebiconfr #xebiconfr
Introspectif: Génération de la documentation
17
2k
@xebiconfr #xebiconfr
Indépendant du transport
18
2l
WebSocket
@xebiconfr #xebiconfr
Que des requêtes ?
Non, pas seulement les requêtes, mais aussi la création, la mis à jour
et la supp...
@xebiconfr #xebiconfr
Comment requêter un serveur GraphQL ?
POST
curl -XPOST -d 'query { user { name } }' http://localhost...
@xebiconfr #xebiconfr
app.use('/graphql', expressGraphql({
schema,
pretty: true,
graphiql: true
}));
GraphQL HTTP Server M...
@xebiconfr #xebiconfr
const schema = new GraphQLSchema({
query: queryType,
mutation: mutationType
});
GraphQL Schema
22
2p
@xebiconfr #xebiconfr
const queryType = new GraphQLObjectType({
name: 'Query',
description: 'Root query entry point',
fiel...
@xebiconfr #xebiconfr
const UserQuery = {
type: new GraphQLList(UserType),
args: {
id: { type: GraphQLInt },
firstName: { ...
@xebiconfr #xebiconfr
const UserType = GraphQLObjectType({
name: 'User',
description: 'Blog user',
fields: () => ({
id: {
...
@xebiconfr #xebiconfr
const mutationType = new GraphQLObjectType({
name: "Mutation",
description: "Root mutation entry poi...
@xebiconfr #xebiconfr
{
posts(name: 12549) {
id
title
content
author {
id
firstName
lastName
}
comments {
content
author {...
@xebiconfr #xebiconfr
L’approche Falcor
3
28
@xebiconfr #xebiconfr
● Est un librairie Javascript open source
● Propose une manière impérative de décrire et d’accéder a...
@xebiconfr #xebiconfr
● Créé par Netflix
● Répond aux besoins de performance, d’éclatement de leur
sources de données et d...
@xebiconfr #xebiconfr
Avoir un outil centré sur la performance et le cloud, spécialement
adapté aux architectures microser...
@xebiconfr #xebiconfr
A quoi ressemble une requête ?
32
3d
// Résultat
{
"user": {
"name": "Abdelhakim B."
}
}
// Requête ...
@xebiconfr #xebiconfr
Les Concepts de Base
33
3e
Paths
JSON Graph
Data SourcesRouter
Model
@xebiconfr #xebiconfr
● Langage de query de Falcor
● Exprime un chemin au travers d’un objet JSON
● Il accepte deux syntax...
@xebiconfr #xebiconfr
● On accède aux données au travers d’un graph JSON unique
(quelque soit le nombre de sources)
// fro...
@xebiconfr #xebiconfr
● Retourne les données de manière asynchrone
model
.get(
/.../
)
.then(/.../)
Model
36
3h
@xebiconfr #xebiconfr
Le Modèle optimise les requêtes concurrentes
model
.get(
'posts[0].title',
'posts[1].title',
'posts[...
@xebiconfr #xebiconfr
Le Modèle optimise les requêtes sortantes grâce au cache
model
.get('posts[0..1].title').then(/.../)...
@xebiconfr #xebiconfr
Pour permettre au JSON de passer d’arbre à graph.
Types primitifs supplémentaires :
● Reference (ref...
@xebiconfr #xebiconfr
{
postsByIds: {
1000: {
title: "Aliquip voluptate ",
content: "Ex cupidatat ",
author_id: falcor.Mod...
@xebiconfr #xebiconfr
Data Sources
41
3m
Une interface qui permet d’exposer un JSON Graph
Opérations disponibles pour Rout...
@xebiconfr #xebiconfr
Router
● Pattern matching sur la structure du graph Json.
● Trois types spécifiques :
○ {integers} /...
@xebiconfr #xebiconfr
model.get(
'postsById[12549]["title", "content", "tags", "author"]'
)
model.get(`
authorsById[${data...
@xebiconfr #xebiconfr
Take Away
4
44
@xebiconfr #xebiconfr
Avantages / inconvénients de GraphQL
✔ Déclaratif (requête, type)
✔ Documentation vivante
✔ Une seul...
@xebiconfr #xebiconfr
Avantages / inconvénients de Falcor
✔ Gestion automatique du cache
✔ Optimisation à la volée des req...
@xebiconfr #xebiconfr
Cas d’utilisation
Prendre l’une des deux solutions si :
- Beaucoup de lecture, peu d’écriture
- Le r...
@xebiconfr #xebiconfr
Questions ?
Merci !
48
Upcoming SlideShare
Loading in …5
×

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

607 views

Published on

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é

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. @xebiconfr #xebiconfr GraphQL et Falcor, un nouveau regard sur les architectures REST Abdelhakim Bachar Antoine Le Taxin
  2. 2. @xebiconfr #xebiconfr Qui sommes-nous ? Abdelhakim Bachar @a_bachar 2 Antoine Le Taxin @modulom
  3. 3. @xebiconfr #xebiconfr Super, un nouveau projet ! 1 3
  4. 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. 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
  6. 6. @xebiconfr #xebiconfr L’approche GraphQL 2 6
  7. 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. 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
  9. 9. @xebiconfr #xebiconfr Objectif Avoir un outil puissant, productif et rétrocompatible pour développer des applications 9 2c
  10. 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. 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
  12. 12. @xebiconfr #xebiconfr Hiérarchique 12 2f { user(id: 1000) { name friends { id name } } }
  13. 13. @xebiconfr #xebiconfr Requêtes spécifiques au client 13 2g Serveur Possibilités Client Besoins
  14. 14. @xebiconfr #xebiconfr 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
  15. 15. @xebiconfr #xebiconfr 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
  16. 16. @xebiconfr #xebiconfr Introspectif 16 2j { __type(name: "User") { name kind } } { "data": { "__type": { "name": "User", "kind": "OBJECT" } } }
  17. 17. @xebiconfr #xebiconfr Introspectif: Génération de la documentation 17 2k
  18. 18. @xebiconfr #xebiconfr Indépendant du transport 18 2l WebSocket
  19. 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. 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
  21. 21. @xebiconfr #xebiconfr app.use('/graphql', expressGraphql({ schema, pretty: true, graphiql: true })); GraphQL HTTP Server Middleware 21 2o
  22. 22. @xebiconfr #xebiconfr const schema = new GraphQLSchema({ query: queryType, mutation: mutationType }); GraphQL Schema 22 2p
  23. 23. @xebiconfr #xebiconfr const queryType = new GraphQLObjectType({ name: 'Query', description: 'Root query entry point', fields: () => ({ users: UserQuery, posts: PostQuery, // ... }) }); GraphQL Query 23 2q
  24. 24. @xebiconfr #xebiconfr const UserQuery = { type: new GraphQLList(UserType), args: { id: { type: GraphQLInt }, firstName: { type: GraphQLString }, // ... }, resolve: (root, args) => User.findAll({where: args}) }; UserQuery 24 2s
  25. 25. @xebiconfr #xebiconfr 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
  26. 26. @xebiconfr #xebiconfr 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
  27. 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
  28. 28. @xebiconfr #xebiconfr L’approche Falcor 3 28
  29. 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. 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. 31. @xebiconfr #xebiconfr Avoir un outil centré sur la performance et le cloud, spécialement adapté aux architectures microservices. Objectif 31 3c
  32. 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( // )
  33. 33. @xebiconfr #xebiconfr Les Concepts de Base 33 3e Paths JSON Graph Data SourcesRouter Model
  34. 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. 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
  36. 36. @xebiconfr #xebiconfr ● Retourne les données de manière asynchrone model .get( /.../ ) .then(/.../) Model 36 3h
  37. 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. 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. 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
  40. 40. @xebiconfr #xebiconfr { 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
  41. 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. 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. 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
  44. 44. @xebiconfr #xebiconfr Take Away 4 44
  45. 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. 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. 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
  48. 48. @xebiconfr #xebiconfr Questions ? Merci ! 48

×