Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React + Relay + GraphQL is the Future
Search
Keith Pitt
November 26, 2015
Programming
12
2.2k
React + Relay + GraphQL is the Future
Keith Pitt
November 26, 2015
Tweet
Share
More Decks by Keith Pitt
See All by Keith Pitt
Buildkite loves Golang
keithpitt
3
420
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
410
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Desktoppr - Lessons Learned
keithpitt
6
760
VendorKit - An Introduction
keithpitt
2
560
A basic introduction to Mustache
keithpitt
3
440
UI Testing with Frank
keithpitt
1
310
Other Decks in Programming
See All in Programming
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
440
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
140
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
20
11k
OSS開発者という働き方
andpad
5
1.7k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
260
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
510
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
220
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
RailsConf 2023
tenderlove
30
1.2k
GitHub's CSS Performance
jonrohan
1032
460k
Six Lessons from altMBA
skipperchong
28
4k
Practical Orchestrator
shlominoach
190
11k
Designing for humans not robots
tammielis
253
25k
Code Reviewing Like a Champion
maltzj
525
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Building Adaptive Systems
keathley
43
2.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Transcript
None
@keithpitt
None
None
I’m excited! ⚡
But first…history
+ Probably the Future +
Glad I said “probably”
+ Probably the Future +
+ Probably the Future +
+ + Is the future.
React
None
None
Just the UI Lots of people use React as the
V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
None
+ Backbone
+ Flux
+
None
None
None
None
None
None
None
Too many random “Restful” JSON endpoints
The server and the client were coupled
Inefficient and slow
Too much code
Lots of boiler plate
Hard to get started
Telstra
None
None
GraphQL
Relay
GraphQL
None
None
CURL -X POST https://api.buildkite.com/v1/organizations/buildkite/ projects/buildkite/23
None
CURL -X POST https://api.buildkite.com/v1/organizations/buildkite/ projects/buildkite/23?expand=comments
CURL -X POST https://api.buildkite.com/v1/organizations/buildkite/ projects/buildkite/23/comments
None
None
None
A specification
It’s represents data how we think about it
It looks like JSON
Simple HTTP Post
You control what data is returned
Typed
Introspection
None
None
IDE integration
Before commit hook validation
None
None
None
Relay
The glue between GraphQL and React
None
None
None
Demo
Relay
Batched requests
Partial data fetching
Telstra
Things I skipped:
Things I skipped: Webpack + Rails Mutations Security + Authorisation
Routes Subscriptions ES6,7,8,9,10,xx Probably more…
Get excited ⚡
+ + Is the future.
None
None
Demo
None
None
None
None
None
None
None
CURL -X POST \ -H "Authorization: Bearer xxx" \ https://graphql.buildkite.com/v1
\ -d '{ "query": "query AwesomeQuery { viewer { user { name } } }" }'
Fin ❤ @keithpitt