Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
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
510
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.7k
Buildbox - Lessons Learned
keithpitt
1
500
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
880
VendorKit - An Introduction
keithpitt
2
630
A basic introduction to Mustache
keithpitt
3
510
UI Testing with Frank
keithpitt
1
380
Other Decks in Programming
See All in Programming
難しいけど、読めた。- OSSの入口に立った話。
sts11142
0
120
JRuby: Past, Present, and Future
headius
0
190
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
mtsmfm
0
160
Ghostty + Neovimで作る 透明でカッコ良い開発環境
j341nono
0
120
AI活用は、個人から組織へ|マルチプレイヤーエージェントハーネス「QM」の社内活用事例 / AI use is moving from individuals to orgs
rkaga
1
210
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
atsuki_seo
0
920
Building an Out-of-Order CPU
latte72
1
800
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
danybony
1
260
App Intentsのビルドプロセスを支える技術
kntkymt
0
430
UPDATE をやめる — EF Core でマスタをバージョン管理する
panda728
PRO
0
610
IBM Bob Dojo #1 仕様駆動開発入門
oniak3ibm
PRO
0
210
SONY CISC-NEWS NWS-1750 + NWB-225 フレームバッファの NetBSD/news68k ドライバ実装 / OSC2026Hiroshima
tsutsui
0
150
Featured
See All Featured
The Language of Interfaces
destraynor
162
27k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
510
Producing Creativity
orderedlist
PRO
348
41k
Chasing Engaging Ingredients in Design
codingconduct
0
340
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
250
Ethics towards AI in product and experience design
skipperchong
2
380
Google's AI Overviews - The New Search
badams
0
1.6k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
1k
The untapped power of vector embeddings
frankvandijk
2
1.9k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
550
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