React + Relay + GraphQL is the Future

Transcript

1. View Slide

2. @keithpitt
   

   View Slide

3. View Slide

4. View Slide

5. I’m excited! ⚡
   

   View Slide

6. But first…history
   

   View Slide

7. +
   Probably the Future
   +
   

   View Slide

8. Glad I said “probably”
   

   View Slide

9. +
   Probably the Future
   +
   

   View Slide

10. +
    Probably the Future
    +
    

    View Slide

11. + +
    Is the future.
    

    View Slide

12. React
    

    View Slide

13. View Slide

14. View Slide

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.
    

    View Slide

16. View Slide

17. +
    Backbone
    

    View Slide

18. +
    Flux
    

    View Slide

19. +
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. Too many random
    “Restful” JSON
    endpoints
    

    View Slide

28. The server and the client
    were coupled
    

    View Slide

29. Inefficient and slow
    

    View Slide

30. Too much code
    

    View Slide

31. Lots of boiler plate
    

    View Slide

32. Hard to get started
    

    View Slide

33. Telstra
    

    View Slide

34. View Slide

35. View Slide

36. GraphQL
    

    View Slide

37. Relay
    

    View Slide

38. GraphQL
    

    View Slide

39. View Slide

40. View Slide

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

    View Slide

42. View Slide

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

    View Slide

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

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. A specification
    

    View Slide

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

    View Slide

50. It looks like JSON
    

    View Slide

51. Simple HTTP Post
    

    View Slide

52. You control what data is
    returned
    

    View Slide

53. Typed
    

    View Slide

54. Introspection
    

    View Slide

55. View Slide

56. View Slide

57. IDE integration
    

    View Slide

58. Before commit hook
    validation
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. Relay
    

    View Slide

63. The glue between GraphQL
    and React
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. Demo
    

    View Slide

68. Relay
    

    View Slide

69. Batched requests
    

    View Slide

70. Partial data fetching
    

    View Slide

71. Telstra
    

    View Slide

72. Things I skipped:
    

    View Slide

73. Things I skipped:
    Webpack + Rails
    Mutations
    Security + Authorisation
    Routes
    Subscriptions
    ES6,7,8,9,10,xx
    Probably more…
    

    View Slide

74. Get excited ⚡
    

    View Slide

75. + +
    Is the future.
    

    View Slide

76. View Slide

77. View Slide

78. Demo
    

    View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. CURL -X POST \
    -H "Authorization: Bearer xxx" \
    https://graphql.buildkite.com/v1 \
    -d '{ "query": "query AwesomeQuery { viewer { user { name } } }" }'
    

    View Slide

87. Fin ❤
    @keithpitt
    

    View Slide