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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Keith Pitt
November 26, 2015
Programming
2.2k
13
Share
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
460
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
460
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
830
VendorKit - An Introduction
keithpitt
2
580
A basic introduction to Mustache
keithpitt
3
470
UI Testing with Frank
keithpitt
1
350
Other Decks in Programming
See All in Programming
「速くなった気がする」をデータで疑う
senleaf24
0
170
煩雑なSkills管理をSoC(関心の分離)により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
nrslib
4
860
アーキテクチャモダナイゼーションとは何か
nwiizo
17
4.9k
AI時代のPhpStorm最新事情 #phpcon_odawara
yusuke
0
160
AWS re:Invent 2025の少し振り返り + DevOps AgentとBacklogを連携させてみた
satoshi256kbyte
3
160
それはエンジニアリングの糧である:AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
nrslib
1
840
L’IA au service des devs : Anatomie d'un assistant de Code Review
toham
0
230
ハンズオンで学ぶクラウドネイティブ
tatsukiminami
0
120
Coding at the Speed of Thought: The New Era of Symfony Docker
dunglas
0
4.8k
Reactive ❤️ Loom: A Forbidden Love Story
franz1981
2
230
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
sakuraikotone
1
1.9k
Linux Kernelの1文字のミスで 権限昇格ができた話
rqda
0
2.3k
Featured
See All Featured
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
1
490
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
99
The Invisible Side of Design
smashingmag
302
51k
Site-Speed That Sticks
csswizardry
13
1.2k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.5k
Done Done
chrislema
186
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
The Limits of Empathy - UXLibs8
cassininazir
1
290
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.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