React + Relay + GraphQL is the Future

Transcript

1. None

2. @keithpitt

3. None
4. None

5. I’m excited! ⚡

6. But first…history

7. + Probably the Future +

8. Glad I said “probably”

9. + Probably the Future +

10. + Probably the Future +

11. + + Is the future.

12. React

13. None
14. None

15. Just the UI Lots of people use React as the

    V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
16. None

17. + Backbone

18. + Flux

19. +

20. None
21. None
22. None
23. None
24. None
25. None
26. None

27. Too many random “Restful” JSON endpoints

28. The server and the client were coupled

29. Inefficient and slow

30. Too much code

31. Lots of boiler plate

32. Hard to get started

33. Telstra

34. None
35. None

36. GraphQL

37. Relay

38. GraphQL

39. None
40. None

41. CURL -X POST https://api.buildkite.com/v1/organizations/buildkite/ projects/buildkite/23

42. None

43. CURL -X POST https://api.buildkite.com/v1/organizations/buildkite/ projects/buildkite/23?expand=comments

44. CURL -X POST https://api.buildkite.com/v1/organizations/buildkite/ projects/buildkite/23/comments

45. None
46. None
47. None

48. A specification

49. It’s represents data how we think about it

50. It looks like JSON

51. Simple HTTP Post

52. You control what data is returned

53. Typed

54. Introspection

55. None
56. None

57. IDE integration

58. Before commit hook validation

59. None
60. None
61. None

62. Relay

63. The glue between GraphQL and React

64. None
65. None
66. None

67. Demo

68. Relay

69. Batched requests

70. Partial data fetching

71. Telstra

72. Things I skipped:

73. Things I skipped: Webpack + Rails Mutations Security + Authorisation

    Routes Subscriptions ES6,7,8,9,10,xx Probably more…

74. Get excited ⚡

75. + + Is the future.

76. None
77. None

78. Demo

79. None
80. None
81. None
82. None
83. None
84. None
85. None

86. CURL -X POST \ -H "Authorization: Bearer xxx" \ https://graphql.buildkite.com/v1

    \ -d '{ "query": "query AwesomeQuery { viewer { user { name } } }" }'

87. Fin ❤ @keithpitt