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
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
2
220
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.3k
最近コードレビューで指摘したこと
forrep
3
100
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
450
禅の心を手に入れよ
eltociear
2
450
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
390
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
230
株式会社ゼネテック
genetec
0
110
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
540
TypeScriptのパフォーマンス改善
yajihum
10
4.3k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
338
39k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Debugging Ruby Performance
tmm1
70
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Documentation Writing (for coders)
carmenintech
60
4k
Clear Off the Table
cherdarchuk
85
310k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
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