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
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
760
ニーリーにおけるプロダクトエンジニア
nealle
0
770
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
C++20 射影変換
faithandbrave
0
560
CursorはMCPを使った方が良いぞ
taigakono
1
230
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
600
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
710
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
640
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
280
Porting a visionOS App to Android XR
akkeylab
0
280
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Designing for humans not robots
tammielis
253
25k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
BBQ
matthewcrist
89
9.7k
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