GraphQL for web devs who don't need it

Transcript

1. GraphQL for those who don’t need it @choonkeat
2. Your app has many APIs POST /things { "json": input1 } POST /things/two { "json": input2 } POST /other { "json": input3 } GET /other/things
3. Today: Focus on 1 API POST /things { "json": input1 } POST /things/two { "json": input2 } POST /other { "json": input3 } GET /other/things
4. POST /things { "json": input1 } POST /things/two { "json": input2 } POST /other { "json": input3 } GET /other/things Same Authentication, Same Middleware, Same HTTP client, Same HTTP server,… Changing small part
7. Contract
10. Your app has many APIs POST /things { "json": input1 } POST /things/two { "json": input2 } POST /other { "json": input3 } GET /other/things
11. Your app has many APIs POST /things { "json": input1 } POST /things/two { "json": input2 } POST /other { "json": input3 } GET /other/things If only we could document and describe our APIs
12. postman-collection.json
13. postman-collection.json
14. postman-collection.json
15. If only we could document and describe our APIs
16. If only we could document and describe our APIs
17. If only we could document and describe our APIs
21. Specimen
22. postman-collection.json Also Specimen
24. GraphiQL
25. What’s the catch? • Succinct API document • Tools that speak my API (“repositories”) not request path, query string...
26. Making a request today
27. Making a request today
28. Before
29. After
30. After
31. Before
32. After
33. Response?
34. Before
35. After
36. Before
37. After
38. Same Same Lah
39. Impact for Front-end POST /things { "json": input1 } POST /things/two { "json": input2 } POST /other { "json": input3 } GET /other/things
40. Impact for Front-end POST /q {"query": "allThings()", input1 } POST /q {“query":"createThing(x:$x)", input2 } POST /q {"query": "other()..", input3 } POST /q {"query": "otherThings().." }
41. Why should back-end provide GraphQL? just to make frontend coworkers happy?
42. Scope of HTTP API [client] [server] construct HTTP request send HTTP request receive HTTP request parse HTTP headers invoke correct HTTP handler parse request payload process construct response send response receive response parses response process response
43. Scope of HTTP API [client] [server] construct HTTP request send HTTP request receive HTTP request parse HTTP headers invoke correct HTTP handler parse request payload process construct response send response receive response parses response process response List Comment -> String String -> List User
44. Scope of GraphQL? [client] [server] construct HTTP request send HTTP request receive HTTP request parse HTTP headers invoke correct HTTP handler parse request payload process construct response send response receive response parses response process response
45. Scope of GraphQL [client] [server] construct HTTP request send HTTP request receive HTTP request parse HTTP headers invoke correct HTTP handler parse request payload process construct response send response receive response parses response process response List Comment -> String String -> List User
46. GraphQL is • Request JSON format • decoder of request into strongly typed variables • free validation; optional, required fields • JSON encoder for your response
47. GraphQL is • A specification • Implementations are standard middleware • like Ruby’s Rack or Python’s WSGI • http.Handler wrapper
50. PUT A QUERY ENGINE OF MY DATABASE OVER THE INTERNET?
51. PUT A QUERY ENGINE OF MY DATABASE OVER THE INTERNET?
52. GraphQL is NOT • a backdoor to steal unauthorised data
53. GraphQL is NOT • a backdoor to steal unauthorised data • a microservice
54. GraphQL is NOT • a framework • “what if it doesn’t do everything i need!” • mutually exclusive with REST • “what about email confirmation link, download csv, …?”
55. GraphQL is NOT • a framework • “what if it doesn’t do everything i need!” • mutually exclusive with REST • “what about email confirmation link, download csv, …?”
56. Co-exist Yes Yes HTTP endpoint GraphQL function No No HTTP headers? Binary body?
57. Co-exist Yes Yes HTTP endpoint GraphQL function No No HTTP headers? Binary body? Not to scale
58. Co-exist GraphQL function Y Y H to scale
59. Day In the Life Of … route.GET("/posts", func(ResponseWriter, Request)
60. Day In the Life Of …
61. Day In the Life Of …
62. route.GET("/posts", func(ResponseWriter, Request) route.GET("/posts/:page", func(ResponseWriter, ... Day In the Life Of …
63. Day In the Life Of …
64. route.GET("/posts", func(ResponseWriter, Request) route.GET("/posts/:page", func(ResponseWriter, ... route.GET("/posts?page=:page", func(ResponseWriter Day In the Life Of …
65. Day In the Life Of …
66. Day In the Life Of …
67. route.GET("/posts", func(ResponseWriter, Request) route.GET("/posts/:page", func(ResponseWriter, ... route.GET("/posts?page=:page", func(ResponseWriter route.POST("/posts",func(ResponseWriter, Request) Day In the Life Of …
68. Schema & Handler 
 This routing is clear
 - what api
 - what input
 - what output 
 and checked by compiler

69. Schema & Handler 
 This routing is clear
 - what api
 - what input
 - what output 
 and checked by compiler

70. Schema & Handler 
 This routing is clear
 - what api
 - what input
 - what output 
 and checked by compiler

71. route.GET("/posts", func(ResponseWriter, Request) route.GET("/posts/:page", func(ResponseWriter, ... route.GET("/posts?page=:page", func(ResponseWriter route.POST("/posts",func(ResponseWriter, Request) route.GET("/posts?page=:page&pageSize=:pageSize"
72. [client] [server] construct HTTP request send HTTP request receive HTTP request parse HTTP headers invoke correct HTTP handler parse request payload function(args) return construct response send response receive response parses response process response Focus on Logic
73. [client] [server] construct HTTP request send HTTP request receive HTTP request parse HTTP headers invoke correct HTTP handler parse request payload function(args) return construct response send response receive response parses response process response Focus on Logic Same Authentication, Same Middleware, Same HTTP client, Same HTTP server,…
74. [client] [server] construct HTTP request send HTTP request receive HTTP request parse HTTP headers invoke correct HTTP handler parse request payload function(args) return construct response send response receive response parses response process response Focus on Logic 
 TDD Friendly 

75. tinyurl.com/dontneedtdd
76. tinyurl.com/dontneedtdd
77. tinyurl.com/dontneedtdd
78. tinyurl.com/dontneedtdd
79. tinyurl.com/dontneedtdd
80. Summary • Front-end remain familiar with option to go further • GraphiQL — developer console to your web API • Focus on function processing data • TDD friendly, no views, and no templates! • Add regular HTTP endpoints as needed • Just middleware; wrap JWT, CORS, Instrumentation
81. Summary • Front-end remain familiar with option to go further • GraphiQL — developer console to your web API • Focus on function processing data • TDD friendly, no views, and no templates! • Add regular HTTP endpoints as needed • Just middleware; wrap JWT, CORS, Instrumentation
82. Thank you @choonkeat