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
12
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
410
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.5k
Buildbox - Lessons Learned
keithpitt
1
400
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Desktoppr - Lessons Learned
keithpitt
6
750
VendorKit - An Introduction
keithpitt
2
540
A basic introduction to Mustache
keithpitt
3
430
UI Testing with Frank
keithpitt
1
310
Other Decks in Programming
See All in Programming
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
21
5.7k
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
16
3.5k
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.2k
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
710
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
540
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
190
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
940
Perlで痩せる
yuukis
1
680
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
360
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
450
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
190
SODA - FACT BOOK
sodainc
1
660
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
870
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Side Projects
sachag
454
42k
GitHub's CSS Performance
jonrohan
1031
460k
Six Lessons from altMBA
skipperchong
28
3.8k
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