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
13
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
440
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
440
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
810
VendorKit - An Introduction
keithpitt
2
570
A basic introduction to Mustache
keithpitt
3
460
UI Testing with Frank
keithpitt
1
330
Other Decks in Programming
See All in Programming
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
180
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
bengo4com
0
570
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.9k
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
CSC307 Lecture 03
javiergs
PRO
1
490
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
690
ぼくの開発環境2026
yuzneri
0
230
ノイジーネイバー問題を解決する 公平なキューイング
occhi
0
100
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
130
Oxlint JS plugins
kazupon
1
960
Fluid Templating in TYPO3 14
s2b
0
130
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
280
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
RailsConf 2023
tenderlove
30
1.3k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
120
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
69
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
Optimising Largest Contentful Paint
csswizardry
37
3.6k
Between Models and Reality
mayunak
1
190
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
130
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
440
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.9k
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