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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
450
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
450
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
810
VendorKit - An Introduction
keithpitt
2
580
A basic introduction to Mustache
keithpitt
3
460
UI Testing with Frank
keithpitt
1
340
Other Decks in Programming
See All in Programming
ふつうの Rubyist、ちいさなデバイス、大きな一年
bash0c7
0
110
DSPy入門 Pythonで実現する自動プロンプト最適化 〜人手によるプロンプト調整からの卒業〜
seaturt1e
1
480
Python’s True Superpower
hynek
0
200
コーディングルールの鮮度を保ちたい / keep-fresh-go-internal-conventions
handlename
0
150
AIプロダクト時代のQAエンジニアに求められること
imtnd
2
640
CSC307 Lecture 12
javiergs
PRO
0
450
PJのドキュメントを全部Git管理にしたら、一番喜んだのはAIだった
nanaism
0
230
CSC307 Lecture 10
javiergs
PRO
1
690
Head of Engineeringが現場で回した生産性向上施策 2025→2026
gessy0129
0
210
日本だけで解禁されているアプリ起動の方法
ryunakayama
0
370
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜
kuro_kurorrr
3
1.6k
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
koukimiura
2
180
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
110
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
The SEO Collaboration Effect
kristinabergwall1
0
380
Designing Powerful Visuals for Engaging Learning
tmiket
0
260
Un-Boring Meetings
codingconduct
0
220
Large-scale JavaScript Application Architecture
addyosmani
515
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
199
73k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Paper Plane (Part 1)
katiecoart
PRO
0
5k
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