React + Relay + GraphQL is the Future

E14f55d3f939977cecbf51b64ff6f861?s=47 Keith Pitt
November 26, 2015
Programming
12
1.8k

React + Relay + GraphQL is the Future

E14f55d3f939977cecbf51b64ff6f861?s=128

Keith Pitt

November 26, 2015
Tweet

More Decks by Keith Pitt

See All by Keith Pitt
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
2
210
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
18
2k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
1
210
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
16
1.4k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
398
20k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
6
490
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
2
290
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
3
230
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
1
91

Other Decks in Programming

See All in Programming
B7caf463b7dbc6c305ba290ec3c16521?s=48 eroispaziali
0
300
744a38d972036c3bd0bcdaddafdd5f26?s=48 mathetake
4
2.1k
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
290
B67d76d100e6dbb2ec11087c44d02fbf?s=48 takahiro901
0
190
D9e4d5a4b36f83fbde1076815df1362f?s=48 bmack
0
380
29bfc9e2bc82b775a30af70be3196386?s=48 hannaprinz
0
100
Acb6390b6c4b5192f40e10601b63dafc?s=48 twkiiim
0
1.1k
Aae878e0b108379a60ca627ee262befa?s=48 susanpotter
0
170
018058d75600e02954f48b471765ae3a?s=48 yuki384
0
180
A8341bc33e5d88f607328d5a82fa42e1?s=48 smartcamp
0
270
110cd4dcaed019b3bd9809e541afdeb6?s=48 okuramasafumi
0
200
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
2
220

Featured

See All Featured
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
115
4.7k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
12
430
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
6
380
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
681
180k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
163
18k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
342
20k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
69
1.2k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
93
5k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
353
62k

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