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.4k
Buildbox - Lessons Learned
keithpitt
1
370
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Desktoppr - Lessons Learned
keithpitt
6
700
VendorKit - An Introduction
keithpitt
2
500
A basic introduction to Mustache
keithpitt
3
400
UI Testing with Frank
keithpitt
1
270
Other Decks in Programming
See All in Programming
Macとオーディオ再生 2024/11/02
yusukeito
0
370
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
Jakarta EE meets AI
ivargrimstad
0
120
Jakarta EE meets AI
ivargrimstad
0
520
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.7k
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
610
最新TCAキャッチアップ
0si43
0
140
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Agile that works and the tools we love
rasmusluckow
327
21k
Speed Design
sergeychernyshev
24
610
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
How to Ace a Technical Interview
jacobian
276
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
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