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
13
2.2k
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
3
440
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
440
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
800
VendorKit - An Introduction
keithpitt
2
570
A basic introduction to Mustache
keithpitt
3
460
UI Testing with Frank
keithpitt
1
330
Other Decks in Programming
See All in Programming
Grafana:建立系統全知視角的捷徑
blueswen
0
310
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
670
Architectural Extensions
denyspoltorak
0
250
今から始めるClaude Code超入門
448jp
4
5.9k
Basic Architectures
denyspoltorak
0
630
CSC307 Lecture 06
javiergs
PRO
0
670
GISエンジニアから見たLINKSデータ
nokonoko1203
0
190
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
940
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
360
CSC307 Lecture 05
javiergs
PRO
0
490
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
180
Patterns of Patterns
denyspoltorak
0
1.3k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
698
190k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
Code Reviewing Like a Champion
maltzj
527
40k
Testing 201, or: Great Expectations
jmmastey
46
8k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
170
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
440
WENDY [Excerpt]
tessaabrams
9
36k
Side Projects
sachag
455
43k
Darren the Foodie - Storyboard
khoart
PRO
2
2.3k
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