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.5k
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
750
VendorKit - An Introduction
keithpitt
2
550
A basic introduction to Mustache
keithpitt
3
440
UI Testing with Frank
keithpitt
1
310
Other Decks in Programming
See All in Programming
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
440
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
130
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.2k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
900
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
510
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
120
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
860
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
540
XP, Testing and ninja testing
m_seki
3
250
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Become a Pro
speakerdeck
PRO
29
5.4k
Designing for humans not robots
tammielis
253
25k
Side Projects
sachag
455
42k
How GitHub (no longer) Works
holman
314
140k
KATA
mclloyd
30
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Typedesign – Prime Four
hannesfritz
42
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
YesSQL, Process and Tooling at Scale
rocio
173
14k
Producing Creativity
orderedlist
PRO
346
40k
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