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
440
UI Testing with Frank
keithpitt
1
310
Other Decks in Programming
See All in Programming
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
440
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
730
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
630
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
PipeCDのプラグイン化で目指すところ
warashi
1
250
Goで作る、開発・CI環境
sin392
0
190
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
190
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
840
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
590
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Writing Fast Ruby
sferik
628
62k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Six Lessons from altMBA
skipperchong
28
3.9k
It's Worth the Effort
3n
185
28k
How GitHub (no longer) Works
holman
314
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Code Review Best Practice
trishagee
69
18k
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