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
400
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.5k
Buildbox - Lessons Learned
keithpitt
1
390
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Desktoppr - Lessons Learned
keithpitt
6
730
VendorKit - An Introduction
keithpitt
2
530
A basic introduction to Mustache
keithpitt
3
420
UI Testing with Frank
keithpitt
1
290
Other Decks in Programming
See All in Programming
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
900
OUPC2024 Day 1 解説
kowerkoint
0
380
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
170
ローコードサービスの進化のためのモノレポ移行
taro28
1
320
AWS CDKにおけるL2 Constructの仕組み / aws-cdk-l2-construct
gotok365
4
910
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
490
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
350
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
940
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
4
740
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
190
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
160
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
3
920
Featured
See All Featured
Music & Morning Musume
bryan
46
6.4k
Docker and Python
trallard
44
3.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
What's in a price? How to price your products and services
michaelherold
244
12k
Visualization
eitanlees
146
15k
How STYLIGHT went responsive
nonsquared
99
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
A Philosophy of Restraint
colly
203
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
101
18k
Optimizing for Happiness
mojombo
377
70k
Side Projects
sachag
452
42k
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