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
仕様と実装で学ぶOpenTelemetry
drumato
2
170
SIMD Parallel Programming with the Vector API
josepaumard
0
250
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
0
100
Open standards for building event-driven applications in the cloud
meteatamel
0
190
Sheets API使ってみた
toshi0383
2
170
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
370
Domain-Driven Transformation
hschwentner
2
1.5k
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
3
1.1k
Tailwind CSSを本気でカスタマイズする方法
fsubal
15
5.6k
Folding Cheat Sheet #4
philipschwarz
PRO
0
110
Try creating your own orderedmap
kazamori
1
270
Let's learn code review
riofujimon
2
620
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
The Mythical Team-Month
searls
217
42k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
For a Future-Friendly Web
brad_frost
172
9k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Bash Introduction
62gerente
605
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
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