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
480
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
480
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
850
VendorKit - An Introduction
keithpitt
2
610
A basic introduction to Mustache
keithpitt
3
490
UI Testing with Frank
keithpitt
1
370
Other Decks in Programming
See All in Programming
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
jsoizo
0
190
「正の参照」と 「負の導出」で組む ハーネスエンジニアリング
cottpan
1
140
技術記事、 専門家としてのプログラマ、 言語化
mizchi
14
7.4k
フィードバックで育てるAI開発
kotaminato
1
110
なぜ型を書くのか? TSKaigi2026で改めて考える #tskaigi_smarthr
kajitack
0
340
Claude Team Plan導入・ガイド
tk3fftk
0
160
トークンをケチるな、設計しろ:GitHub Copilotを賢く使うコンテキスト戦略
ochtum
0
310
1B+ /day規模のログを管理する技術
broadleaf
0
130
Honoでのサプライチェーン侵害対策 〜 3つのライブラリに学ぶ
yusukebe
7
1.8k
共通化で考えるべきは、実装より公開する型だった
codeegg
0
210
The Bowling Game- From Imperative to Functional Programming - Part 1
philipschwarz
PRO
0
310
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
akihisaikeda
2
4.2k
Featured
See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
150
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
170
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
890
Building the Perfect Custom Keyboard
takai
2
810
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
3
920
Exploring anti-patterns in Rails
aemeredith
3
440
The SEO identity crisis: Don't let AI make you average
varn
0
510
Art, The Web, and Tiny UX
lynnandtonic
304
22k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
63
55k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.4k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
310
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