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
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
720
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
130
テストケースの名前はどうつけるべきか?
orgachem
PRO
0
130
103 Early Hints
sugi_0000
1
230
useSyncExternalStoreを使いまくる
ssssota
6
1k
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
170
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
770
fs2-io を試してたらバグを見つけて直した話
chencmd
0
230
これでLambdaが不要に?!Step FunctionsのJSONata対応について
iwatatomoya
2
3.6k
命名をリントする
chiroruxx
1
390
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
1
170
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
What's in a price? How to price your products and services
michaelherold
243
12k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Faster Mobile Websites
deanohume
305
30k
The Language of Interfaces
destraynor
154
24k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
Bash Introduction
62gerente
608
210k
A better future with KSS
kneath
238
17k
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