Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Introduction à GraphQL
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
fdecampredon
April 07, 2016
Technology
1.3k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Introduction à GraphQL
JS-Star meetup Paris
http://www.meetup.com/fr-FR/Js-Star/events/229601871/
fdecampredon
April 07, 2016
More Decks by fdecampredon
See All by fdecampredon
Reactive Programming et React
fdecampredon
3
210
Going Reactive with React
fdecampredon
1
590
Introduction à ReactJS
fdecampredon
0
83
Other Decks in Technology
See All in Technology
Flutter Webを「SDK」として配る — 50以上のゲームを支える埋め込みアーキテクチャ
masayukisuda
0
160
Agent 活用環境の構築・運用のための AWS サービスのご紹介/agentcore-for-building-and-operating-agents
ren8k
1
280
[General] 개발자로 해외 기업에서 일하기
skydoves
1
100
LLMの知識とAIエージェント
happysamurai294
0
130
AI時代、つくる力を自分たちの手に。 ──電通×KAG、アジャイルとAI駆動開発で挑む開発の変革
yuukiyo
3
430
正解のない研修に放り出されて / Being thrown into a training program with no right answers
ohnoeight
1
170
200人の配信コメント、 全部Jevが仕分けます 〜 マサカリガードを作ってみた 〜
katayamatg
1
460
Adversary Infrastructure Hunting101
disconinja
0
180
ドメインエキスパートは いかにして AI を使って プロダクト開発をするか
tatsuyashiraishi
1
240
AI AgentによるEmbedded SREの取り組み
tgidgd
1
250
Technical Project Manager の役割とやりがい、少しだけ AI
yoshiiryo1
0
280
Lint の層を組み直した話
bengo4com
2
240
Featured
See All Featured
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
340
Typedesign – Prime Four
hannesfritz
42
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
310
Building Adaptive Systems
keathley
44
3.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
1
290
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
660
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
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/