Embracing the Power of GraphQL

FullStack Conf 2017

https://skillsmatter.com/conferences/8264-fullstack-2017-the-conference-on-javascript-node-and-internet-of-things

Transcript

1. GRAPHQL EMBRACING THE POWER OF
2. HELLO FULLSTACK CONF!
3. ABOUT ME: @tgriesser
4. WHY? WHAT? HOW?
5. WHY? WHAT? HOW?
6. WHY CHOOSE GRAPHQL?
7. WHY CHOOSE ANYTHING?
8. WHY CHOOSE ANYTHING? (new in software development)
9. BECAUSE ALL THE COOL DEVELOPERS ARE USING IT
10. BECAUSE ALL THE COOL DEVELOPERS ARE USING IT
11. BECAUSE IT SOLVES A REAL PROBLEM
12. BECAUSE IT SOLVES A REAL PROBLEM TM
14. PROBLEM?
15. REST
16. PROBLEM?
17. WHAT PROBLEM?
22. PROBLEM?
23. PROBLEM:
24. REST APIs can lead to a ton of custom complex logic on the front-end to handle results
26. Friction between front-end requirements & backend APIs when building apps with great experiences
27. Performance issues due to network overhead & over/under fetching on the server to account for access patterns
32. Performance issues due to network overhead & over/under fetching on the server to account for access patterns (half baked graphql)
33. A strongly typed, self documenting specification can provide major tooling benefits out of the box
34. Overall developer experience
35. WE CAN DO BETTER
36. WE CAN DO BETTER - Facebook, 2012
37. WHY? WHAT? HOW?
39. WHAT IS GRAPHQL?
40. WHERE DOES IT FIT IN MY STACK?
41. CAN I USE GRAPHQL WITH $INSERT_DATA_STORE_HERE
42. WHAT IS GRAPHQL?
44. A SPECIFICATION
45. A SPECIFICATION (LANGUAGE AGNOSTIC)
46. A SPECIFICATION (DATA SOURCE AGNOSTIC)
47. A SPECIFICATION (Predictable)
49. Types
50. Types ID, String, Float, Int, Boolean
51. Types ID, String, Float, Int, Boolean List, Enum, ObjectTypes, InputObjectTypes
52. Types ID, String, Float, Int, Boolean List, Enum, ObjectTypes, InputObjectTypes Queries, Mutations, Fragments
53. Types ID, String, Float, Int, Boolean List, Enum, ObjectTypes, InputObjectTypes Queries, Mutations, Fragments Unions, Interfaces (Directives)
54. Lots of terms!
55. REST: Many simple endpoints
56. GraphQL: A single smart endpoint
57. Reference Implementation (GraphQL JS)
58. WHY? WHAT? HOW?
60. YIKES!
61. A TON OF RESOURCES
62. WHERE TO BEGIN?
64. Apollo Client
67. Apollo Server (express, hapi, koa, connect, restify)
68. Apollo Codegen
69. QUERIES + SCHEMA
70. QUERIES + SCHEMA = TYPES
71. DEMO TIME
72. Performance issues, both due to network overhead & due to over/under fetching on the server to account for access patterns
73. Naive resolvers will execute 12 queries
81. DATALOADER • Elegantly solves the n+1 Query problem • As the Graph executes, you “load" a resource, which adds that ID to a queue • That queue is then flushed at the end of the execution of that level of the tree
86. Promise
88. Promise
89. select * from users where id in (…)
90. With DataLoader: 3 queries
91. GraphQL: Where does it fall short?
92. Authorization is still something you need to consider…
93. …though you’d need to anyway
94. Mutations still feel like they need some refinement
95. Errors take some getting used to
96. 200 = valid formed query, any errors are specified as part of the response, incomplete payload
97. My experience: it’s been awesome
98. My experience: it’s been awesome
99. How to sell it??
100. Performance
101. Performance
102. Productivity
105. Incremental adoption
106. It gets simpler as you get further in
107. Read up on other experiences:
112. Tomorrow: 14:30
113. Questions? @tgriesser