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
320
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.3k
Buildbox - Lessons Learned
keithpitt
1
310
Practical Backbone Patterns
keithpitt
16
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Desktoppr - Lessons Learned
keithpitt
6
630
VendorKit - An Introduction
keithpitt
2
430
A basic introduction to Mustache
keithpitt
3
350
UI Testing with Frank
keithpitt
1
220
Other Decks in Programming
See All in Programming
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
190
Site Reliability Engineering for GMO
pyama86
9
1.1k
禅の心を手に入れよ
eltociear
1
420
Fragment Composition of GraphQL
quramy
13
1.6k
Snowflakeで眠ったデータを起こそう!
estie
0
160
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
200
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
470
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
190
PostmanでAPIの動作確認が楽になった話
h455h1
0
190
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
790
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
130
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
500
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
KATA
mclloyd
16
12k
How GitHub (no longer) Works
holman
305
140k
Optimizing for Happiness
mojombo
370
69k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Infographics Made Easy
chrislema
238
18k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
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