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
410
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
430
UI Testing with Frank
keithpitt
1
310
Other Decks in Programming
See All in Programming
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
210
Using AI Tools Around Software Development
inouehi
0
1.2k
PT AI без купюр
v0lka
0
230
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
150
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
930
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
160
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
130
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
220
人には人それぞれのサービス層がある
shimabox
3
670
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
190
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
550
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
810
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Designing for Performance
lara
609
69k
Speed Design
sergeychernyshev
31
990
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Site-Speed That Sticks
csswizardry
10
640
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
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