Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction à GraphQL
Search
fdecampredon
April 07, 2016
Technology
0
920
Introduction à GraphQL
JS-Star meetup Paris
http://www.meetup.com/fr-FR/Js-Star/events/229601871/
fdecampredon
April 07, 2016
Tweet
Share
More Decks by fdecampredon
See All by fdecampredon
Reactive Programming et React
fdecampredon
3
140
Going Reactive with React
fdecampredon
1
490
Introduction à ReactJS
fdecampredon
0
53
Other Decks in Technology
See All in Technology
実務につなげる数理最適化
recruitengineers
PRO
2
110
深層学習のリペア技術の最新動向と実際 / DNN Repair Techniques for AI Performance Alignment for Safety Requirements
ishikawafyu
0
500
多様なロール経験が導いたエンジニアキャリアのナビゲーション
coconala_engineer
1
160
リクルートのデータ基盤 Crois 年3倍成長!1日40,000コンテナの実行を支える AWS 活用とプラットフォームエンジニアリング
recruitengineers
PRO
1
230
セキュリティ系アップデート全体像と AWS Organizations 新ポリシー「宣言型ポリシー」を紹介 / reGrowth 2024 Security
masahirokawahara
0
190
Reliability Engineering at Studist
katsuhisa91
PRO
0
120
re:Invent2024のIaC周りのアップデート&セッションの共有/around-re-invent-2024-iac-updates
tomoki10
0
650
長年運用されているサービスの主要データ移行をサービス停止せず安全にリリースしました
phayacell
2
190
AWS re:Invent 2024登壇資料(GBL206-JA: Unleashing the power of generative AI on AWS for your business)
minorun365
PRO
7
250
プロセス改善とE2E自動テストによる、プロダクトの品質向上事例
tomasagi
1
3.8k
My Generation 年配者がこの先生きのこるには (Developers CAREER Boost 2024 Edition)/My Generation How elder engineers can survive
kwappa
3
380
宇宙最速のランチRecap LT会(開発者ツール&運用監視編)
nnydtmg
1
180
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
Faster Mobile Websites
deanohume
305
30k
Site-Speed That Sticks
csswizardry
1
150
Art, The Web, and Tiny UX
lynnandtonic
298
20k
How STYLIGHT went responsive
nonsquared
95
5.2k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Done Done
chrislema
181
16k
Embracing the Ebb and Flow
colly
84
4.5k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Speed Design
sergeychernyshev
25
650
Transcript
Introduction à GraphQL @fdecampredon JS Star Paris - 7/04/2016
Petite histoire de la communication client server
2005: AJAX est né
Au début c’était le chaos
Des milliers de possibilités • Web Services - SOAP •
Remote Object • JSON-RPC • Etc…
Et puis un winner : REST
Pourquoi REST ? • Stateless • Cacheable • « Standard
» • « Facile »
REST est parfait
Vraiment ?
Multiplication des devices = Multiplication des end points
Sur mobile, les vieux clients force à versioner les API
Et plus encore • Complexité à fetcher des objets complexes
sans effectuer de multiples requêtes • Pas de type et impossibilité d’introspection • Etc…
Et le cauchemar commence
Nouveaux problèmes = Nouvelle solution
GraphQL
GraphQL • Un language de Requête de données (et
pas de base données) • On « décrit » nos types de données sous forme d’un Graphe • On définit nos Requêtes sur le client
Comment Utiliser GraphQL
Définition des types sur le serveur
Un type system riche • Des Scalar : Boolean, String,
Int, Float, etc.. • Des « Object Types» • Des interfaces, enum, List, non-null type etc…
On crée ses requêtes sur le client
On récupère uniquement les données nécessaires
Quels sont les avantages ? • Hiérarchique • Centré sur
le Produit • Requêtes spécifiées sur le client • Plus de problèmes de backward compatibility • Type System • Introspection
GraphQL sur le client
Relay
Relay • Créer pour GraphQL • Permet à chaque composant
de définir les données dont il a besoin • Au coeur de la plupart des applications Facebook
Chaque composant définit les données dont il a besoin
On compose les requêtes comme on compose les composants
GraphQL sans Relay
On définit simplement ses requêtes dans ses « services »
Conclusion • REST pose de gros problèmes • GraphQL est
une nouvelle technologie permettant de remplacer REST • A utiliser avec ou sans Relay
François de Campredon @fdecampredon https://github.com/fdecampredon/ Questions ? Relay: https://facebook.github.io/relay/ Graphql:
http://graphql.org/