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
2.3k
13
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
React + Relay + GraphQL is the Future
Keith Pitt
November 26, 2015
More Decks by Keith Pitt
See All by Keith Pitt
Buildkite loves Golang
keithpitt
3
490
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.7k
Buildbox - Lessons Learned
keithpitt
1
490
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
870
VendorKit - An Introduction
keithpitt
2
620
A basic introduction to Mustache
keithpitt
3
500
UI Testing with Frank
keithpitt
1
380
Other Decks in Programming
See All in Programming
ここ半年くらいでAIに作らせたR用ツール
eitsupi
0
400
「つくるAI」だけではバグは見つからない ~テストに必要な「見つけるAI」を分離させる戦略~
mfunaki
0
150
生成AIで帳票OCRが「簡単に」作れる時代になった?
kon_shou
0
1.1k
Oxlintはいいぞ(続)
yug1224
1
390
源内ハンズオン概要編
hideg
0
210
仕様駆動開発の消費期限
watany
20
8.9k
レビュー履歴をAIに食わせて、 Compose移行を加速するs
shihochan
0
190
Loosening the Reins: Go Generics Get More Flexible
kuro_kurorrr
0
270
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
hond0413
0
250
楽しそうなつよつよエンジニアと目が死んでる僕/A brilliant engineer having a blast, and dead-eyed me.
3l4l5
2
230
KotlinConf Extended South Korea 2026 Keynote
l2hyunwoo
0
120
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
kanaru0928
0
240
Featured
See All Featured
Designing for Performance
lara
611
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
4.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
Speed Design
sergeychernyshev
33
2k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
380
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
620
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
201
75k
Exploring anti-patterns in Rails
aemeredith
3
470
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
810
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.7k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
220
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