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
2.3k
13
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
React + Relay + GraphQL is the Future
Keith Pitt
November 26, 2015
More Decks by Keith Pitt
See All by Keith Pitt
Buildkite loves Golang
keithpitt
3
480
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
480
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
850
VendorKit - An Introduction
keithpitt
2
610
A basic introduction to Mustache
keithpitt
3
490
UI Testing with Frank
keithpitt
1
370
Other Decks in Programming
See All in Programming
Language Server 使ってる? 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
handlename
0
830
Go1.27で導入されるジェネリクスメソッドでできること
mackee
0
250
1B+ /day規模のログを管理する技術
broadleaf
0
130
ローカルLLMでどこまでコードが書けるか -縮小版 / How much code can be written on a local LLM Shortened
kishida
2
180
その問い、本当に正しいですか?AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
minodriven
14
6.7k
SREの積み重ねがAI駆動開発のガードレールになった ― 7つの実践/SRE Guardrails The 7
tomoyakitaura
7
3k
フィードバックで育てるAI開発
kotaminato
1
110
Observability in Practice:Grafana 與 Edge Device SRE 的那些事
blueswen
0
190
トークンをケチるな、設計しろ:GitHub Copilotを賢く使うコンテキスト戦略
ochtum
0
300
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成(CC Night 2026)
wemra
1
200
Performance Engineering for Everyone
elenatanasoiu
0
260
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
mogamit
0
160
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
RailsConf 2023
tenderlove
30
1.5k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
180
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
Ruling the World: When Life Gets Gamed
codingconduct
0
280
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
310
BBQ
matthewcrist
89
10k
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