GraphQL: A Horizontal Platform

GraphQL: A Horizontal Platform
Dan Schafer
Taipei, 17-18 November 2015
Singapore, 21 November 2015

Transcript

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
11. Join-tables http://url.api/reso
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
83. SWAPI in GraphQL
84. DEMO
85. Something Changed!
87. GraphQL queries operate over arbitrary code
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
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
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