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
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
2
320
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.3k
Buildbox - Lessons Learned
keithpitt
1
310
Practical Backbone Patterns
keithpitt
16
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Desktoppr - Lessons Learned
keithpitt
6
620
VendorKit - An Introduction
keithpitt
2
420
A basic introduction to Mustache
keithpitt
3
340
UI Testing with Frank
keithpitt
1
210
Other Decks in Programming
See All in Programming
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
180
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.3k
Ruby Function Composition
bkuhlmann
1
330
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
Let's learn code review
riofujimon
2
410
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
SIMD Parallel Programming with the Vector API
josepaumard
0
180
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
920
Elm 0.19.0 Changes
bkuhlmann
0
490
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.1k
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
Featured
See All Featured
Writing Fast Ruby
sferik
621
60k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Building an army of robots
kneath
300
41k
In The Pink: A Labor of Love
frogandcode
138
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Automating Front-end Workflow
addyosmani
1356
200k
A Modern Web Designer's Workflow
chriscoyier
689
190k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Navigating Team Friction
lara
178
13k
A Philosophy of Restraint
colly
197
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
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