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
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
440
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
440
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
800
VendorKit - An Introduction
keithpitt
2
570
A basic introduction to Mustache
keithpitt
3
460
UI Testing with Frank
keithpitt
1
330
Other Decks in Programming
See All in Programming
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
390
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
280
並行開発のためのコードレビュー
miyukiw
0
120
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
2.5k
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
370
CSC307 Lecture 03
javiergs
PRO
1
490
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
700
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
170
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
450
Data-Centric Kaggle
isax1015
2
770
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.5k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Writing Fast Ruby
sferik
630
62k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
250
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
How to train your dragon (web standard)
notwaldorf
97
6.5k
エンジニアに許された特別な時間の終わり
watany
106
230k
Optimizing for Happiness
mojombo
379
71k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
1
99
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
57
50k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
430
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