![16
Comparaison entre REST et GraphQL
Deux exemples d’api
REST
1
Basic
2
Complexe avec pagination et
populate (type sails.js)
• /films => retourne tous les films avec tous les
champs
• /film/ID => retourne un film avec tous les champs
• /films?limit=10&Skip= 10 retourne les films paginés
avec tous les champs
• /film/ID?populate=[people] retourne un film avec
tous les champs et les peoples associés avec tous
les champs](https://image.slidesharecdn.com/graphql-171211153437/75/graph-ql-par-andy-gigon-16-2048.jpg?cb=1669330436)
Graph QL par Andy Gigon
•0 j'aime•362 vues
Signaler
Partager
Télécharger pour lire hors ligne
Dites adieu à REST, et bonjour à GraphQL. La relève est arrivée.
Contenu connexe
Similaire à Graph QL par Andy Gigon
Similaire à Graph QL par Andy Gigon(20)
Plus de Idean France
Plus de Idean France(20)
Graph QL par Andy Gigon
- 1. Digital Service Design by Capgemini
- 2. Dites adieu à REST, et bonjour à GraphQL. La relève est arrivée.
- 3. Développeur Web chez Backelite Andy Gigon Conférencier Paris WEB 2017 sur graphQL Merci pour sa conférence Paris Web 2017 Aurélien David
- 5. 5 L’application de démonstration Studio Ghibli, application React Native Premier écran pour lister les films
- 6. 6 L’application de démonstration Deuxième écran pour le détail d’un film Studio Ghibli, application React Native
- 7. 7 L’application de démonstration L’api REST La première version utilisait une API REST disponible sur le service heroku.com. https://ghibliapi.herokuapp.com
- 8. 8 L’application de démonstration Information nécessaire pour le 1er écran Liste des 10 premiers films. Pour chaque film, le titre, le score, et la date de sortie
- 9. 9 L’application de démonstration Détails pour un seul film, l’URL de l’image, le titre, la description, la date de sortie, le producteur, le directeur, et la note La version 2 ajoute la liste des personnages avec leurs noms et leurs espèces Information nécessaire pour le 2éme écran
- 10. 10 Le transport de l’information
- 12. 12 Transport de l’information Requête pour récupérer un film • Taille totale de la requête 2055 octets • Taille du payload 1684 octets 18% de la taille totale utilisée pour le transport
- 13. 13 Transport de l’information TCP Tree-way handshake TCP Tree-way handshake 3 échanges pour la création de la communication
- 14. 14 Transport de l’information La perte de paquet et le débit réduit Génération Technologie Débit minimum et maximum* Débit moyen 2G GSM 9.6 kbit/s 9.6 kbit/s 2,5G GPRS Entre 20 et 175 kbit/s 48 kbit/s 2,75G EDGE Entre 40 et 350 kbit/s 171 kbit/s 3G UMTS Entre 144 kbit/s et 2 Mbit/s 384 kbit/s 3G+ HSDPA Entre 300 kbit/s et 14 Mbit/s 750 kbit/s H+ HSPA+ Entre 2 Méga et 42 Mbit/s 4 Mbit/s 4G LTE-Advanced Entre 7 Méga et 150 Mbit/s 9,4 Mbit/s
- 15. 15 Comparaison entre REST et GraphQL
- 16. 16 Comparaison entre REST et GraphQL Deux exemples d’api REST 1 Basic 2 Complexe avec pagination et populate (type sails.js) • /films => retourne tous les films avec tous les champs • /film/ID => retourne un film avec tous les champs • /films?limit=10&Skip= 10 retourne les films paginés avec tous les champs • /film/ID?populate=[people] retourne un film avec tous les champs et les peoples associés avec tous les champs
- 17. 17 Comparaison entre REST et GraphQL Premier écran liste des films Nécessite les 10 premiers films avec les propriétés ID, titre, image, année et score. Type API Nombre de requête Total transit Total payload REST basic 1 15,6 Ko 19,50 Ko REST complexe 1 7,65 Ko 9,6 Ko Payload utile 3,51 Ko
- 18. 18 Comparaison entre REST et GraphQL Deuxième écran, détails d’un film Nécessite les propriétés du film: images, titre, description, année, producteur, directeur, score et la liste des 3 premiers personnages avec leurs noms et espèce Type API Nombre de requête Total transit Total payload REST basic 7 5,89 Ko 3,35 Ko REST complexe 4 4,06 Ko 2,61 Ko Payload utile 899 o
- 19. 19 Comparaison entre REST et GraphQL Les API REST ne sont pas économes • L’API REST va nous transmettre énormément de données inutiles • Beaucoup de requêtes (latence et encapsulation)
- 20. 20 Et si on optimise tout ca. Une requête par écran avec juste la quantité d’information nécessaire.
- 21. 21 Comparaison entre REST et GraphQL C’est possible avec GraphQL Ecran liste Ecran détail Type API Nombre de requête Total transit Total payload REST basic 1 15,6 Ko 19,50 Ko REST complexe 1 7,65 Ko 9,6 Ko GraphQL 1 3,7 Ko 3,51 Ko Payload utile 3,51 Ko Payload utile 899 o Type API Nombre de requête Total transit Total payload REST basic 7 5,89 Ko 3,35 Ko REST complexe 4 4,06 Ko 2,61 Ko GraphQL 1 1,24 Ko 899 o
- 22. 22 GraphQL
- 23. 23 GraphQL Les principes Maintenabilité Pas de suppression, uniquement de l’ajout. Développement Système d’ auto complétion disponible pour la création de requête. C’est quoi? GraphQL est une syntaxe qui décrit comment demander des données au niveau de la couche transport Facile Un seul endpoint à connaitre. Intérêt GraphQL donne aux clients le pouvoir de demander exactement ce dont ils ont besoin et rien de plus.
- 26. 26 GraphQL Query (Lecture) Permets de récupérer les données correspondant au schéma demandé
- 27. 27 GraphQL Les arguments Les QUERY supportent les arguments pour par exemple gérer de la pagination, recherche, des filtres ou du tri.
- 28. 28 GraphQL Mutation (Ecriture) Permet la modification, la suppression ou la création des données Chaque input possède sont propre input pour décrire le schéma de données attendu La documentation est disponible sur graphiql
- 29. 29 GraphQL Subscription (Temps réel) Le client s'inscrit à des évènements spécifiques, puis reçoit les données demandées en temps réel, généralement implémentées en websockets.