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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Keith Pitt
November 26, 2015
Programming
13
2.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
3
450
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.6k
Buildbox - Lessons Learned
keithpitt
1
450
Practical Backbone Patterns
keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Desktoppr - Lessons Learned
keithpitt
6
820
VendorKit - An Introduction
keithpitt
2
580
A basic introduction to Mustache
keithpitt
3
460
UI Testing with Frank
keithpitt
1
340
Other Decks in Programming
See All in Programming
米国のサイバーセキュリティタイムラインと見る Goの暗号パッケージの進化
tomtwinkle
2
550
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
ya_ma23
0
300
PostgreSQL を使った快適な go test 環境を求めて
otakakot
0
530
コードレビューをしない選択 #でぃーぷらすトウキョウ
kajitack
3
880
株式会社 Sun terras カンパニーデック
sunterras
0
2.1k
Codex の「自走力」を高める
yorifuji
0
1.2k
猫の手も借りたい!ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
naramomi7
0
260
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
nnaka2992
1
330
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
harumiweb
9
2.7k
社内規程RAGの精度を73.3% → 100%に改善した話
oharu121
13
7.9k
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
ttskch
1
130
エージェント開発初心者の僕がエージェントを作った話と今後やりたいこと
thasu0123
0
240
Featured
See All Featured
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
240
Measuring & Analyzing Core Web Vitals
bluesmoon
9
780
Building AI with AI
inesmontani
PRO
1
780
Balancing Empowerment & Direction
lara
5
940
It's Worth the Effort
3n
188
29k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
210
A Modern Web Designer's Workflow
chriscoyier
698
190k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.5k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
320
Test your architecture with Archunit
thirion
1
2.2k
How GitHub (no longer) Works
holman
316
140k
Crafting Experiences
bethany
1
81
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