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
3
380
Keith and Mario's Guide to Continuous Deployment
keithpitt
18
2.5k
Buildbox - Lessons Learned
keithpitt
1
380
Practical Backbone Patterns
keithpitt
16
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Desktoppr - Lessons Learned
keithpitt
6
710
VendorKit - An Introduction
keithpitt
2
520
A basic introduction to Mustache
keithpitt
3
410
UI Testing with Frank
keithpitt
1
280
Other Decks in Programming
See All in Programming
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
280
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
1.3k
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
220
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
150
Azure AI Foundryのご紹介
qt_luigi
1
210
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.3k
Androidアプリの One Experience リリース
nein37
0
1.2k
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
390
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
1.9k
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
140
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
190
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
590
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
A Modern Web Designer's Workflow
chriscoyier
693
190k
A designer walks into a library…
pauljervisheath
205
24k
How to train your dragon (web standard)
notwaldorf
89
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Designing Experiences People Love
moore
139
23k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Unsuck your backbone
ammeep
669
57k
Being A Developer After 40
akosma
89
590k
Done Done
chrislema
182
16k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
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