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.1k
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
2
370
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.5k
Buildbox - Lessons Learned
keithpitt
1
370
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Desktoppr - Lessons Learned
keithpitt
6
700
VendorKit - An Introduction
keithpitt
2
510
A basic introduction to Mustache
keithpitt
3
400
UI Testing with Frank
keithpitt
1
280
Other Decks in Programming
See All in Programming
テスト自動化失敗から再挑戦しチームにオーナーシップを委譲した話/STAC2024 macho
ma_cho29
1
1.3k
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
330
Security_for_introducing_eBPF
kentatada
0
110
Beyond ORM
77web
5
520
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
460
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
270
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
Jakarta EE meets AI
ivargrimstad
0
240
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
130
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Agile that works and the tools we love
rasmusluckow
328
21k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520
Bash Introduction
62gerente
608
210k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Embracing the Ebb and Flow
colly
84
4.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Six Lessons from altMBA
skipperchong
27
3.5k
Building Applications with DynamoDB
mza
91
6.1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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