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
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
820
VendorKit - An Introduction
keithpitt
2
580
A basic introduction to Mustache
keithpitt
3
470
UI Testing with Frank
keithpitt
1
340
Other Decks in Programming
See All in Programming
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
n4mlz
0
250
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記:那些困在 Alpha 加護病房太久的 Metrics
tico88612
0
240
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
nrslib
16
3.4k
脱 雰囲気実装!AgentCoreを良い感じにWEBアプリケーションに組み込むために
takuyay0ne
3
400
CSC307 Lecture 15
javiergs
PRO
0
270
Smarter Angular mit Transformers.js & Prompt API
christianliebel
PRO
1
100
Vuetify 3 → 4 何が変わった?差分と移行ポイント10分まとめ
koukimiura
0
200
Nuxt Server Components
wattanx
0
140
モダンOBSプラグイン開発
umireon
0
180
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
ya_ma23
0
1.1k
Understanding Apache Lucene - More than just full-text search
spinscale
0
140
Redox OS でのネームスペース管理と chroot の実現
isanethen
0
460
Featured
See All Featured
Designing for Performance
lara
611
70k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
440
Documentation Writing (for coders)
carmenintech
77
5.3k
A better future with KSS
kneath
240
18k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
600
Designing for humans not robots
tammielis
254
26k
How Software Deployment tools have changed in the past 20 years
geshan
0
33k
Done Done
chrislema
186
16k
The SEO Collaboration Effect
kristinabergwall1
0
410
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.8k
Building Adaptive Systems
keathley
44
3k
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