WorryFree Computers »
Address
:
[go:
up one dir
,
main page
]
Include Form
Remove Scripts
Accept Cookies
Show Images
Show Referer
Rotate13
Base64
Strip Meta
Strip Title
Session Cookies
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
2
320
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.3k
Buildbox - Lessons Learned
keithpitt
1
320
Practical Backbone Patterns
keithpitt
16
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Desktoppr - Lessons Learned
keithpitt
6
640
VendorKit - An Introduction
keithpitt
2
440
A basic introduction to Mustache
keithpitt
3
350
UI Testing with Frank
keithpitt
1
220
Other Decks in Programming
See All in Programming
Using Ruby in the browser is wonderful
ledsun
1
1.6k
Polarsの現状
daikikatsuragawa
0
1.4k
ERB, ancient and future
m_seki
3
210
Secure Serverless Architecture
seike460
PRO
2
410
Porting mruby/c for the SNES (Super Famicom) - RubyKaigi 2024
gedorinku
0
2.1k
BQで天気基盤をつくって、役立つ情報を可視化してみた!
wakamatsu_takumu
4
640
Are Your .NET 8 Applications Resilient for the Chaos-proof?
selcukusta
1
210
Navigating Generative AI: A Developer's Guide
alperhankendi
0
160
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
izumin5210
12
640
スタックトレース始めてみた
kuro_kurorrr
5
1.3k
Module Harmony について
yosuke_furukawa
PRO
3
720
Compose UI for... a light switch? (KotlinConf 2024)
jakewharton
PRO
3
320
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
The Language of Interfaces
destraynor
151
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
In The Pink: A Labor of Love
frogandcode
138
21k
Building an army of robots
kneath
300
42k
Optimising Largest Contentful Paint
csswizardry
13
2.5k
Atom: Resistance is Futile
akmur
260
25k
Typedesign – Prime Four
hannesfritz
36
2.1k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Adopting Sorbet at Scale
ufuk
69
8.7k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5.1k
Into the Great Unknown - MozCon
thekraken
15
1.2k
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