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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Keith Pitt
November 26, 2015
Programming
2.2k
13
Share
React + Relay + GraphQL is the Future
Keith Pitt
November 26, 2015
More Decks by Keith Pitt
See All by Keith Pitt
Buildkite loves Golang
keithpitt
3
470
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
460
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
830
VendorKit - An Introduction
keithpitt
2
590
A basic introduction to Mustache
keithpitt
3
470
UI Testing with Frank
keithpitt
1
350
Other Decks in Programming
See All in Programming
[RubyKaigi 2026] Require Hooks
palkan
1
300
クラウドネイティブなエンジニアに向ける Raycastの魅力と実際の活用事例
nealle
2
250
Terraform言語の静的解析 / static analysis of Terraform language
wata727
1
140
エラー処理の温故知新 / history of error handling technic
ryotanakaya
7
1.8k
UaaL×Androidアプリのメモリ計測 — Memory Profilerの先へ
rio432
0
140
The Less-Told Story of Socket Timeouts
coe401_
3
1.1k
「OSSがあるなら自作するな」は AI時代も正しいか ── Build vs Adopt の新しい判断基準
kumorn5s
7
2.3k
Agent Skills を社内で育てる仕組み作り
jackchuka
1
1.7k
t *testing.T は どこからやってくるの?
otakakot
1
920
AIベース静的検査器の偽陽性率を抑える工夫3選
orgachem
PRO
4
450
PHPでローカル環境用のSSL/TLS証明書を発行することはできるのか? #phpconkagawa
akase244
0
350
AIを導入する前にやるべきこと
negima
2
340
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
160
Speed Design
sergeychernyshev
33
1.6k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
170
Design in an AI World
tapps
1
210
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
140
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
300
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
690
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
240
Side Projects
sachag
455
43k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.2k
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