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
230
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
350
GraphQL: Client-Driven Development
dschafer
0
340
GraphQL at Facebook
dschafer
0
200
Efficient Data Fetching with GraphQL and Relay
dschafer
3
360
Other Decks in Programming
See All in Programming
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.6k
A Gopher's Guide to Vibe Coding
danicat
0
180
旅行プランAIエージェント開発の裏側
ippo012
1
370
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
340
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
個人軟體時代
ethanhuang13
0
110
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
Namespace and Its Future
tagomoris
6
590
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.4k
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
220
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.2k
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Unsuck your backbone
ammeep
671
58k
Site-Speed That Sticks
csswizardry
10
790
Designing for humans not robots
tammielis
253
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Music & Morning Musume
bryan
46
6.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
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