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
GraphQL: A Horizontal Platform
Search
Dan Schafer
November 17, 2015
Programming
2
220
GraphQL: A Horizontal Platform
GraphQL: A Horizontal Platform
Dan Schafer
Taipei, 17-18 November 2015
Singapore, 21 November 2015
Dan Schafer
November 17, 2015
Tweet
Share
More Decks by Dan Schafer
See All by Dan Schafer
The Prehistory of GraphQL
dschafer
1
320
GraphQL: Client-Driven Development
dschafer
0
330
GraphQL at Facebook
dschafer
0
190
Efficient Data Fetching with GraphQL and Relay
dschafer
3
350
Other Decks in Programming
See All in Programming
Unity Android XR入門
sakutama_11
0
180
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
140
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
sappoRo.R #12 初心者セッション
kosugitti
0
270
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
GoとPHPのインターフェイスの違い
shimabox
2
210
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.1k
Jakarta EE meets AI
ivargrimstad
0
320
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
960
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
KATA
mclloyd
29
14k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
YesSQL, Process and Tooling at Scale
rocio
172
14k
BBQ
matthewcrist
87
9.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Music & Morning Musume
bryan
46
6.4k
GitHub's CSS Performance
jonrohan
1030
460k
Transcript
None
GraphQL: A Horizontal Platform Dan Schafer Software Engineer
Facebook Mobile Circa 2011
HTML 5 in a Native View
Mobile Afterthought to Mobile First
Truly Native!
HTML5 App Data Services Web Server HTML
Native App Data Services App Server Data
RESTful API
None
Join-tables http://url.api/reso
None
GraphQL
Over 260 Billion served per day
What is GraphQL?
{ me { name } }
{ "me": { "name": "Daniel Schafer" } } { me
{ name } }
{ "user": { "name": "Daniel Schafer" } } { user(id:
1031) { name } }
{ me { name, profilePicture { width, height, url }
} }
{ "me": { "name": "Daniel Schafer", "profilePicture": { "width": 50,
"height": 50, "url": "https://cdn/50.jpg" } } } { me { name, profilePicture { width, height, url } } }
{ me { name, friends { name } } }
{ "me": { "name": "Daniel Schafer", "friends": [ { "name": "Lee Byron" }, { "name": "Nick Schrock" }, { "name": "Alex Langenfeld" },
{ me { name, friends { name, events { name
} } } } { "me": { "name": "Daniel Schafer", "friends": [ { "name": "Lee Byron", "events": [ { "name": "GraphQL Team Dinner" }, { "name": "Bow Tie Conference" }, ] }
GraphQL Core Principles
Mental Model for Product Developers
Type System
{ me { name, friends(orderby: IMPORTANCE, first: 1) { name,
events(first: 1) { name } } } }
{ me { name, friends(orderby: IMPORTANCE, first: 1) { name,
events(first: 1) { name } } } } type Query { me: User user(id: Int): User } { me }
type User { name: String friends(first: Int, orderby: FriendOrderEnum): [User]
events(first: Int): [Event] } enum FriendOrderEnum { FIRST_NAME, IMPORTANCE } { me { name, friends(orderby: IMPORTANCE, first: 1) { name, events(first: 1) { name } } } } { name, friends(orderby: IMPORTANCE, first: 1) }
type User { name: String profilePicture(size: Int = 50): ProfilePicture
friends(first: Int, orderby: FriendOrderEnum): [User] events(first: Int): [Event] } { me { name, friends(orderby: IMPORTANCE, first: 1) { name, events(first: 1) { name } } } } { name, events(first: 1) }
type Event { name: String attendees(first: Int): [User] } {
me { name, friends(orderby: IMPORTANCE, first: 1) { name, events(first: 1) { name } } } } { name }
Models Views Here's your 123 model CLIENT Model: 123, plz
APP SERVER
Models Models v2 Views v2 Views Here's your 123 v2
model CLIENT Model: 123, v2, plz APP SERVER
Models Models v2 Models v3 Views v3 Views v2 Views
Here's your 123 v3 model CLIENT Model: 123, v3, plz APP SERVER
Models v2 Models v3 Models v4 Views v4 Views v3
Views v2 CLIENT Here's your 123 v4 model APP SERVER Model: 123, v4, plz
Capabilities Requirements CLIENT APP SERVER
Type System Views Models This data shape, plz Here's your
specific data CLIENT APP SERVER
Views v2 Views Models Models v2 This data shape, plz
Here's your specific data CLIENT APP SERVER Type System
Views v3 Views v2 Views Models Models v2 Models v3
This data shape, plz Here's your specific data CLIENT APP SERVER Type System
iOS Feed Android Feed Ads Manager iPad Pages iOS Messenger
Facebook Lite
Composition
{ me { name friends { } } } name
events { name }
fragment friendFragment on User { } { me { name
friends { ...friendFragment } } } name events { name }
Relay
TimelineView HeaderView AboutView
TimelineView HeaderView AboutView
fragment timelineFragment on User { ...headerFragment ...aboutFragment } fragment headerFragment
on User { name profilePicture coverPhoto } fragment aboutFragment on User { currentWork previousWork school }
Backed by arbitrary code
Feed Ranking & Storage
User DB Feed Ranking & Storage
Feed Ranking & Storage User DB Link & Image Cache
User DB Feed Ranking & Storage
Existing Application Code Link & Image Cache User DB Feed
Ranking & Storage
GraphQL Existing Application Code Link & Image Cache User DB
Feed Ranking & Storage
GraphQL is not a storage engine
GraphQL queries operate over arbitrary code
GraphQL queries can operate over your existing code
GraphQL Type Your Code
type User { profilePicture(size: Int = 50): ProfilePicture } friends:
[User]
type User { profilePicture(size: Int = 50): ProfilePicture } friends:
[User]
// type User { { // profilePicture(size: Int = 50):
ProfilePicture profilePicture(user, {size}) { return user.profilePicture; }, // friends: [User] friends(user) { return user.friendIDs.map(id => promiseUser(id)); } }
// type User { { // profilePicture(size: Int = 50):
ProfilePicture profilePicture(user, {size}) { return user.profilePicture; }, // friends: [User] friends(user) { return user.friendIDs.map(id => promiseUser(id)); } } profilePicture(user, {size}) { return user.profilePicture; }
// type User { { // profilePicture(size: Int = 50):
ProfilePicture profilePicture(user, {size}) { return getProfilePicForUser(user, size); }, // friends: [User] friends(user) { return user.friendIDs.map(id => promiseUser(id)); } } profilePicture(user, {size}) { return getProfilePicForUser(user, size); }
// type User { { // profilePicture(size: Int = 50):
ProfilePicture profilePicture(user, {size}) { return getProfilePicForUser(user, size); }, // friends: [User] friends(user) { return user.friendIDs.map(id => promiseUser(id)); } } friends(user) { return user.friendIDs.map(id => promiseUser(id)); }
Type system on the Client
{ __schema { queryType { name } types { name
fields { name, type { name, } } } } }
Introspection A platform for building tools
Documentation (screenshot of doc explorer)
{ me { name, profilePicture { width, height, url }
} } @interface GraphQLUser : NSObject { - (NSString *)name; - (GraphQLPic *)profilePicture; } @interface GraphQLProfilePicture - (NSNumber *)width; - (NSNumber *)height; - (NSString *)url; } Code Generation
Mutations
{ user(id: 1572451031) { name, profilePicture { width, height, url
} } }
{ user(id: 1572451031) { name, profilePicture { width, height, url
} } }
query { user(id: 1572451031) { name, profilePicture { width, height,
url } } }
mutation { }
mutation { likeStory { } }
mutation { likeStory(storyId: 37000641) { } }
mutation { likeStory(storyId: 37000641) { story { likers { count
} doesViewerLike } } }
mutation { createComment( storyId: 37000641 text: “Hello” ) { comment
{ createTime } } } mutation { updateComment( commentId: 37000641 newText: “Hello” ) { comment { text } } }
mutation { acceptFriendRequest( userId: 37000641 ) { user { friends
{ count } } } } mutation { eventRsvp( eventId: 37000641 status: ATTENDING ) { event { invitees { count } attendees { count } } } }
From REST to GraphQL
None
None
None
None
SWAPI in GraphQL
DEMO
Something Changed!
None
GraphQL queries operate over arbitrary code
None
None
REST Polyfill Structure GraphQL Core App Server Type Definitions GraphQL
Server REST Server
Direct Access Structure GraphQL Core App Server Type Definitions GraphQL
Server
GraphQL
None
None
RFC specification graphql-js graphiql
express-graphql libgraphqlparser swapi-graphql
External Projects!
graphql-ruby graphql-java sangria (scala) reindex.io Financial Times
graphql.org
Open Source Projects etc
Whole Greater Than Sum of The Parts
Mobile Revolution Giant Leap Forward for Consumers A Big Step
Backwards for Developers and Product Organizations
Open Standards Proprietary Platforms Instant Distribution Installed Binaries Fast Iteration
Compile Cycles Unified Teams Platform-aware Teams
The right tools and software can change the landscape
None
React is Opinionated • Functional Programming • Immutable Data Structures
• Declarative APIs • Rethinking Best Practices™
React Web React
iOS React Native Android … React Native Web React
A Horizontal, Opinionated Platform Unifying Software, Abstractions, and Tools Proprietary
Capabilities
Learn Once, Write Anywhere Write Once, Run Anywhere
GraphQL GraphQL JS Ruby Hack … SQL Mongo Rethink …
Relay
Ads Manager
None