Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL: A Horizontal Platform

Dan Schafer
November 17, 2015

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

More Decks by Dan Schafer

Other Decks in Programming

Transcript

  1. None
  2. GraphQL: A Horizontal Platform Dan Schafer Software Engineer

  3. Facebook Mobile Circa 2011

  4. HTML 5 in a Native View

  5. Mobile Afterthought to Mobile First

  6. Truly Native!

  7. HTML5 App Data Services Web Server HTML

  8. Native App Data Services App Server Data

  9. RESTful API

  10. None
  11. Join-tables http://url.api/reso

  12. None
  13. GraphQL

  14. Over 260 Billion served per day

  15. What is GraphQL?

  16. { me { name } }

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

    { name } }
  18. { "user": { "name": "Daniel Schafer" } } { user(id:

    1031) { name } }
  19. { me { name, profilePicture { width, height, url }

    } }
  20. { "me": { "name": "Daniel Schafer", "profilePicture": { "width": 50,

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

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

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

  24. Mental Model for
 Product Developers

  25. Type System

  26. { me { name, friends(orderby: IMPORTANCE, first: 1) { name,

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

    events(first: 1) { name } } } } type Query { me: User user(id: Int): User } { me }
  28. 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) }
  29. 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) }
  30. type Event { name: String attendees(first: Int): [User] } {

    me { name, friends(orderby: IMPORTANCE, first: 1) { name, events(first: 1) { name } } } } { name }
  31. Models Views Here's your 123 model CLIENT Model: 123, plz

    APP SERVER
  32. Models Models v2 Views v2 Views Here's your 123 v2

    model CLIENT Model: 123, v2, plz APP SERVER
  33. Models Models v2 Models v3 Views v3 Views v2 Views

    Here's your 123 v3 model CLIENT Model: 123, v3, plz APP SERVER
  34. 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
  35. Capabilities Requirements CLIENT APP SERVER

  36. Type System Views Models This data shape, plz Here's your

    specific data CLIENT APP SERVER
  37. Views v2 Views Models Models v2 This data shape, plz

    Here's your specific data CLIENT APP SERVER Type System
  38. Views v3 Views v2 Views Models Models v2 Models v3

    This data shape, plz Here's your specific data CLIENT APP SERVER Type System
  39. iOS Feed Android Feed Ads Manager iPad Pages iOS Messenger

    Facebook Lite
  40. Composition

  41. { me { name friends { } } } name

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

    friends { ...friendFragment } } } name events { name }
  43. Relay

  44. TimelineView HeaderView AboutView

  45. TimelineView HeaderView AboutView

  46. fragment timelineFragment on User { ...headerFragment ...aboutFragment } fragment headerFragment

    on User { name profilePicture coverPhoto } fragment aboutFragment on User { currentWork previousWork school }
  47. Backed by arbitrary code

  48. Feed Ranking & Storage

  49. User DB Feed Ranking & Storage

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

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

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

    Feed Ranking & Storage
  53. GraphQL is not a storage engine

  54. GraphQL queries operate over arbitrary code

  55. GraphQL queries can operate over your existing code

  56. GraphQL Type Your Code

  57. type User { profilePicture(size: Int = 50): ProfilePicture } friends:

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

    [User]
  59. // type User { { // profilePicture(size: Int = 50):

    ProfilePicture profilePicture(user, {size}) { return user.profilePicture; }, // friends: [User] friends(user) { return user.friendIDs.map(id => promiseUser(id)); } }
  60. // 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; }
  61. // 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); }
  62. // 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)); }
  63. Type system on the Client

  64. { __schema { queryType { name } types { name

    fields { name, type { name, } } } } }
  65. Introspection A platform for building tools

  66. Documentation (screenshot of doc explorer)

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

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

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

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

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

    url } } }
  72. mutation { }

  73. mutation { likeStory { } }

  74. mutation { likeStory(storyId: 37000641) { } }

  75. mutation { likeStory(storyId: 37000641) { story { likers { count

    } doesViewerLike } } }
  76. mutation { createComment( storyId: 37000641 text: “Hello” ) { comment

    { createTime } } } mutation { updateComment( commentId: 37000641 newText: “Hello” ) { comment { text } } }
  77. mutation { acceptFriendRequest( userId: 37000641 ) { user { friends

    { count } } } } mutation { eventRsvp( eventId: 37000641 status: ATTENDING ) { event { invitees { count } attendees { count } } } }
  78. From REST to GraphQL

  79. None
  80. None
  81. None
  82. None
  83. SWAPI in GraphQL

  84. DEMO

  85. Something Changed!

  86. None
  87. GraphQL queries operate over arbitrary code

  88. None
  89. None
  90. REST Polyfill Structure GraphQL Core App Server Type Definitions GraphQL

    Server REST Server
  91. Direct Access Structure GraphQL Core App Server Type Definitions GraphQL

    Server
  92. GraphQL

  93. None
  94. None
  95. RFC specification graphql-js graphiql

  96. express-graphql libgraphqlparser swapi-graphql

  97. External Projects!

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

  99. graphql.org

  100. Open Source Projects etc

  101. Whole Greater Than Sum of The Parts

  102. Mobile Revolution Giant Leap Forward for Consumers A Big Step

    Backwards for Developers and Product Organizations
  103. Open Standards Proprietary Platforms Instant Distribution Installed Binaries Fast Iteration

    Compile Cycles Unified Teams Platform-aware Teams
  104. The right tools and software can change the landscape

  105. None
  106. React is Opinionated • Functional Programming • Immutable Data Structures

    • Declarative APIs • Rethinking Best Practices™
  107. React Web React

  108. iOS React Native Android … React Native Web React

  109. A Horizontal, Opinionated Platform Unifying Software, Abstractions, and Tools Proprietary

    Capabilities
  110. Learn Once, Write Anywhere Write Once, Run Anywhere

  111. GraphQL GraphQL JS Ruby Hack … SQL Mongo Rethink …

  112. Relay

  113. Ads Manager

  114. None