$30 off During Our Annual Pro Sale. View Details »
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.1k
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
2
370
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.4k
Buildbox - Lessons Learned
keithpitt
1
370
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Desktoppr - Lessons Learned
keithpitt
6
700
VendorKit - An Introduction
keithpitt
2
510
A basic introduction to Mustache
keithpitt
3
400
UI Testing with Frank
keithpitt
1
280
Other Decks in Programming
See All in Programming
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
560
Remix on Hono on Cloudflare Workers
yusukebe
2
390
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
3.7k
React への依存を最小にするフロントエンド設計
takonda
21
8.6k
Symfony Mapper Component
soyuka
2
350
Cognitoが大型アップデート!Managed Loginとパスワードレスログインを実際に使ってみた@しむそくRadio Special Day1
tmhirai
3
200
[FlutterKaigi2024] Effective Form 〜Flutterによる複雑なフォーム開発の実践〜
chocoyama
1
3.9k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
3.3k
.NET Conf 2024の振り返り
tomokusaba
0
190
気をつけたい!Desktop対応で陥りやすい罠とその対策
goto_tsl
0
190
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
2.3k
flutterkaigi_2024.pdf
kyoheig3
0
450
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.1k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Fireside Chat
paigeccino
34
3.1k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
GitHub's CSS Performance
jonrohan
1030
460k
Done Done
chrislema
181
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Building an army of robots
kneath
302
43k
Navigating Team Friction
lara
183
15k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
480
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