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
3
390
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.5k
Buildbox - Lessons Learned
keithpitt
1
380
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Desktoppr - Lessons Learned
keithpitt
6
720
VendorKit - An Introduction
keithpitt
2
530
A basic introduction to Mustache
keithpitt
3
410
UI Testing with Frank
keithpitt
1
290
Other Decks in Programming
See All in Programming
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
Software Architecture
hschwentner
6
2.1k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Open source software: how to live long and go far
gaelvaroquaux
0
620
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Being A Developer After 40
akosma
89
590k
Statistics for Hackers
jakevdp
797
220k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Optimizing for Happiness
mojombo
376
70k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Designing for humans not robots
tammielis
250
25k
RailsConf 2023
tenderlove
29
1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
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