GraphQL: A Horizontal Platform

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

GraphQL: A Horizontal Platform Dan Schafer Software Engineer

Slide 3

Slide 3 text

Facebook Mobile Circa 2011

Slide 4

Slide 4 text

HTML 5 in a Native View

Slide 5

Slide 5 text

Mobile Afterthought to Mobile First

Slide 6

Slide 6 text

Truly Native!

Slide 7

Slide 7 text

HTML5 App Data Services Web Server HTML

Slide 8

Slide 8 text

Native App Data Services App Server Data

Slide 9

Slide 9 text

RESTful API

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Join-tables http://url.api/reso

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

GraphQL

Slide 14

Slide 14 text

Over 260 Billion served per day

Slide 15

Slide 15 text

What is GraphQL?

Slide 16

Slide 16 text

{ me { name } }

Slide 17

Slide 17 text

{ "me": { "name": "Daniel Schafer" } } { me { name } }

Slide 18

Slide 18 text

{ "user": { "name": "Daniel Schafer" } } { user(id: 1031) { name } }

Slide 19

Slide 19 text

{ me { name, profilePicture { width, height, url } } }

Slide 20

Slide 20 text

{ "me": { "name": "Daniel Schafer", "profilePicture": { "width": 50, "height": 50, "url": "https://cdn/50.jpg" } } } { me { name, profilePicture { width, height, url } } }

Slide 21

Slide 21 text

{ me { name, friends { name } } } { "me": { "name": "Daniel Schafer", "friends": [ { "name": "Lee Byron" }, { "name": "Nick Schrock" }, { "name": "Alex Langenfeld" },

Slide 22

Slide 22 text

{ me { name, friends { name, events { name } } } } { "me": { "name": "Daniel Schafer", "friends": [ { "name": "Lee Byron", "events": [ { "name": "GraphQL Team Dinner" }, { "name": "Bow Tie Conference" }, ] }

Slide 23

Slide 23 text

GraphQL Core Principles

Slide 24

Slide 24 text

Mental Model for  Product Developers

Slide 25

Slide 25 text

Type System

Slide 26

Slide 26 text

{ me { name, friends(orderby: IMPORTANCE, first: 1) { name, events(first: 1) { name } } } }

Slide 27

Slide 27 text

{ me { name, friends(orderby: IMPORTANCE, first: 1) { name, events(first: 1) { name } } } } type Query { me: User user(id: Int): User } { me }

Slide 28

Slide 28 text

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) }

Slide 29

Slide 29 text

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) }

Slide 30

Slide 30 text

type Event { name: String attendees(first: Int): [User] } { me { name, friends(orderby: IMPORTANCE, first: 1) { name, events(first: 1) { name } } } } { name }

Slide 31

Slide 31 text

Models Views Here's your 123 model CLIENT Model: 123, plz APP SERVER

Slide 32

Slide 32 text

Models Models v2 Views v2 Views Here's your 123 v2 model CLIENT Model: 123, v2, plz APP SERVER

Slide 33

Slide 33 text

Models Models v2 Models v3 Views v3 Views v2 Views Here's your 123 v3 model CLIENT Model: 123, v3, plz APP SERVER

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Capabilities Requirements CLIENT APP SERVER

Slide 36

Slide 36 text

Type System Views Models This data shape, plz Here's your speciﬁc data CLIENT APP SERVER

Slide 37

Slide 37 text

Views v2 Views Models Models v2 This data shape, plz Here's your speciﬁc data CLIENT APP SERVER Type System

Slide 38

Slide 38 text

Views v3 Views v2 Views Models Models v2 Models v3 This data shape, plz Here's your speciﬁc data CLIENT APP SERVER Type System

Slide 39

Slide 39 text

iOS Feed Android Feed Ads Manager iPad Pages iOS Messenger Facebook Lite

Slide 40

Slide 40 text

Composition

Slide 41

Slide 41 text

{ me { name friends { } } } name events { name }

Slide 42

Slide 42 text

fragment friendFragment on User { } { me { name friends { ...friendFragment } } } name events { name }

Slide 43

Slide 43 text

Relay

Slide 44

Slide 44 text

TimelineView HeaderView AboutView

Slide 45

Slide 45 text

TimelineView HeaderView AboutView

Slide 46

Slide 46 text

fragment timelineFragment on User { ...headerFragment ...aboutFragment } fragment headerFragment on User { name profilePicture coverPhoto } fragment aboutFragment on User { currentWork previousWork school }

Slide 47

Slide 47 text

Backed by arbitrary code

Slide 48

Slide 48 text

Feed Ranking & Storage

Slide 49

Slide 49 text

User DB Feed Ranking & Storage

Slide 50

Slide 50 text

Feed Ranking & Storage User DB Link & Image Cache User DB Feed Ranking & Storage

Slide 51

Slide 51 text

Existing Application Code Link & Image Cache User DB Feed Ranking & Storage

Slide 52

Slide 52 text

GraphQL Existing Application Code Link & Image Cache User DB Feed Ranking & Storage

Slide 53

Slide 53 text

GraphQL is not a storage engine

Slide 54

Slide 54 text

GraphQL queries operate over arbitrary code

Slide 55

Slide 55 text

GraphQL queries can operate over your existing code

Slide 56

Slide 56 text

GraphQL Type Your Code

Slide 57

Slide 57 text

type User { profilePicture(size: Int = 50): ProfilePicture } friends: [User]

Slide 58

Slide 58 text

type User { profilePicture(size: Int = 50): ProfilePicture } friends: [User]

Slide 59

Slide 59 text

// type User { { // profilePicture(size: Int = 50): ProfilePicture profilePicture(user, {size}) { return user.profilePicture; }, // friends: [User] friends(user) { return user.friendIDs.map(id => promiseUser(id)); } }

Slide 60

Slide 60 text

Slide 61

Slide 61 text

// 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); }

Slide 62

Slide 62 text

// 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)); }

Slide 63

Slide 63 text

Type system on the Client

Slide 64

Slide 64 text

{ __schema { queryType { name } types { name fields { name, type { name, } } } } }

Slide 65

Slide 65 text

Introspection A platform for building tools

Slide 66

Slide 66 text

Documentation (screenshot of doc explorer)

Slide 67

Slide 67 text

{ me { name, profilePicture { width, height, url } } } @interface GraphQLUser : NSObject { - (NSString *)name; - (GraphQLPic *)profilePicture; } @interface GraphQLProfilePicture - (NSNumber *)width; - (NSNumber *)height; - (NSString *)url; } Code Generation

Slide 68

Slide 68 text

Mutations

Slide 69

Slide 69 text

{ user(id: 1572451031) { name, profilePicture { width, height, url } } }

Slide 70

Slide 70 text

{ user(id: 1572451031) { name, profilePicture { width, height, url } } }

Slide 71

Slide 71 text

query { user(id: 1572451031) { name, profilePicture { width, height, url } } }

Slide 72

Slide 72 text

mutation { }

Slide 73

Slide 73 text

mutation { likeStory { } }

Slide 74

Slide 74 text

mutation { likeStory(storyId: 37000641) { } }

Slide 75

Slide 75 text

mutation { likeStory(storyId: 37000641) { story { likers { count } doesViewerLike } } }

Slide 76

Slide 76 text

mutation { createComment( storyId: 37000641 text: “Hello” ) { comment { createTime } } } mutation { updateComment( commentId: 37000641 newText: “Hello” ) { comment { text } } }

Slide 77

Slide 77 text

mutation { acceptFriendRequest( userId: 37000641 ) { user { friends { count } } } } mutation { eventRsvp( eventId: 37000641 status: ATTENDING ) { event { invitees { count } attendees { count } } } }

Slide 78

Slide 78 text

From REST to GraphQL

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

SWAPI in GraphQL

Slide 84

Slide 84 text

DEMO

Slide 85

Slide 85 text

Something Changed!

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

GraphQL queries operate over arbitrary code

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

REST Polyﬁll Structure GraphQL Core App Server Type Deﬁnitions GraphQL Server REST Server

Slide 91

Slide 91 text

Direct Access Structure GraphQL Core App Server Type Deﬁnitions GraphQL Server

Slide 92

Slide 92 text

GraphQL

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

RFC speciﬁcation graphql-js graphiql

Slide 96

Slide 96 text

express-graphql libgraphqlparser swapi-graphql

Slide 97

Slide 97 text

External Projects!

Slide 98

Slide 98 text

graphql-ruby graphql-java sangria (scala) reindex.io Financial Times

Slide 99

Slide 99 text

graphql.org

Slide 100

Slide 100 text

Open Source Projects etc

Slide 101

Slide 101 text

Whole Greater Than Sum of The Parts

Slide 102

Slide 102 text

Mobile Revolution Giant Leap Forward for Consumers A Big Step Backwards for Developers and Product Organizations

Slide 103

Slide 103 text

Open Standards Proprietary Platforms Instant Distribution Installed Binaries Fast Iteration Compile Cycles Unified Teams Platform-aware Teams

Slide 104

Slide 104 text

The right tools and software can change the landscape

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

React is Opinionated • Functional Programming • Immutable Data Structures • Declarative APIs • Rethinking Best Practices™

Slide 107

Slide 107 text

React Web React

Slide 108

Slide 108 text

iOS React Native Android … React Native Web React

Slide 109

Slide 109 text

A Horizontal, Opinionated Platform Unifying Software, Abstractions, and Tools Proprietary Capabilities