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
490
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.7k
Buildbox - Lessons Learned
keithpitt
1
490
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
870
VendorKit - An Introduction
keithpitt
2
620
A basic introduction to Mustache
keithpitt
3
500
UI Testing with Frank
keithpitt
1
380
Other Decks in Programming
See All in Programming
ソフトウェアラスタライザ
fadis
1
660
Claude Code全社展開のためにやったことn選~プラグイン302個・コミッター271人を支えるために~
kenchan
5
1.8k
Go を使い始めて 2 ヶ月の学び / My first two months with Go
contour_gara
0
380
freeeにおけるEvalsの実践例の紹介
freee
PRO
0
150
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
kanaru0928
0
240
ソフトウェアエンジニアにとっての生成AI - 特性を知って使い倒す / generative ai for software enginner
kishida
7
2.1k
まずはプロンプトガイドを読もう、話はそれからだ
kiakiraki
1
210
「つくるAI」だけではバグは見つからない ~テストに必要な「見つけるAI」を分離させる戦略~
mfunaki
0
180
Discordを用いたラボオートメーション関連情報収集の自動化
noguhiro2002
0
440
引き算の組織 ― アウトカムとAIに全振りするために辞めたこと ― / Organization by Subtraction
hirokiyamamoto14
PRO
0
300
AIと壁打ちしながら進めるコスト管理
fufuhu
2
1.7k
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
kosuket
0
580
Featured
See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1.1k
Build your cross-platform service in a week with App Engine
jlugia
234
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.2k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2.1k
Paper Plane (Part 1)
katiecoart
PRO
1
10k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
400
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
630
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
660
Ruling the World: When Life Gets Gamed
codingconduct
0
310
Art, The Web, and Tiny UX
lynnandtonic
304
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
35
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3k
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