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
2.3k
13
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
React + Relay + GraphQL is the Future
Keith Pitt
November 26, 2015
More Decks by Keith Pitt
See All by Keith Pitt
Buildkite loves Golang
keithpitt
3
480
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
480
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
850
VendorKit - An Introduction
keithpitt
2
610
A basic introduction to Mustache
keithpitt
3
490
UI Testing with Frank
keithpitt
1
370
Other Decks in Programming
See All in Programming
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
nrslib
4
1.6k
act1-costs.pdf
sumedhbala
0
180
分散システム、なんですぐ死んでしまうん?耐障害性を高めたいあなたのためのレジリエンスパターン入門
mshibuya
7
4.8k
【やさしく解説 設計編 #0】DDDのコード、読めるのに分からない人へ
panda728
PRO
2
240
そのテスト、説明できますか?~LWテスト戦略FW~のご紹介
nakahara
0
200
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
0
140
AIを活用したE2Eテスト実装効率化のあゆみ / ebisu-mobile-14-kotetu
kotetuco
0
160
継続モナドとリアクティブプログラミング
yukikurage
3
410
Vue × Nuxt × Oxc どこまで使える?実運用の現在地
andpad
0
360
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
d0riven
0
390
OS アップデート対応の取り組み方がもっと共有されてほしい
andpad
0
110
任せる範囲はこう広がった / How the Scope of AI Delegation Has Expanded
nrslib
1
240
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
6k
How to Think Like a Performance Engineer
csswizardry
28
2.7k
Designing Powerful Visuals for Engaging Learning
tmiket
1
440
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
62
44k
KATA
mclloyd
PRO
35
15k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
210
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.5k
Design in an AI World
tapps
1
260
Testing 201, or: Great Expectations
jmmastey
46
8.2k
A better future with KSS
kneath
240
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
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