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.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
3
400
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.5k
Buildbox - Lessons Learned
keithpitt
1
390
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Desktoppr - Lessons Learned
keithpitt
6
730
VendorKit - An Introduction
keithpitt
2
530
A basic introduction to Mustache
keithpitt
3
420
UI Testing with Frank
keithpitt
1
290
Other Decks in Programming
See All in Programming
Develop Faster With FrankenPHP
dunglas
1
1.9k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
650
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
11
3.3k
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
920
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
170
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
540
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
320
OUPC2024 Day 1 解説
kowerkoint
0
390
なぜselectはselectではないのか
taiyow
2
280
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
技術好きなエンジニアが "リーダーへの進化" によって得たものと失ったもの
pospome
5
1.3k
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
190
Featured
See All Featured
RailsConf 2023
tenderlove
29
1k
Building Adaptive Systems
keathley
40
2.5k
Scaling GitHub
holman
459
140k
Practical Orchestrator
shlominoach
186
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
14
1.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Language of Interfaces
destraynor
156
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Adopting Sorbet at Scale
ufuk
75
9.3k
A Philosophy of Restraint
colly
203
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.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