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
420
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Desktoppr - Lessons Learned
keithpitt
6
770
VendorKit - An Introduction
keithpitt
2
560
A basic introduction to Mustache
keithpitt
3
440
UI Testing with Frank
keithpitt
1
320
Other Decks in Programming
See All in Programming
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
130
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
560
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.8k
明日から始めるリファクタリング
ryounasso
0
140
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.2k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.1k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
530
CSC305 Lecture 06
javiergs
PRO
0
230
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Music & Morning Musume
bryan
46
6.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
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