Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

React + Relay + GraphQL is the Future

Avatar for Keith Pitt Keith Pitt
November 26, 2015
Programming
2.3k
13

React + Relay + GraphQL is the Future

Avatar for Keith Pitt

Keith Pitt

November 26, 2015

More Decks by Keith Pitt

See All by Keith Pitt
Buildkite loves Golang
Avatar for Keith Pitt keithpitt
3
510
Keith and Mario's Guide to Continuous Deployment
Avatar for Keith Pitt keithpitt
18
2.7k
Buildbox - Lessons Learned
Avatar for Keith Pitt keithpitt
1
510
Practical Backbone Patterns
Avatar for Keith Pitt keithpitt
16
1.7k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Desktoppr - Lessons Learned
Avatar for Keith Pitt keithpitt
6
880
VendorKit - An Introduction
Avatar for Keith Pitt keithpitt
2
630
A basic introduction to Mustache
Avatar for Keith Pitt keithpitt
3
510
UI Testing with Frank
Avatar for Keith Pitt keithpitt
1
380

Other Decks in Programming

See All in Programming
Workers Cache を知る
Avatar for syumai syumai
0
320
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
270
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
Avatar for Yuki Kuwashima yukiny
0
300
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
310
Verilogで学ぶCPU自作入門.pdf
Avatar for uyuki uyuki234
8
4k
WebRTC映像をAirPlayに対応させる挑戦.pdf
Avatar for monolithic-adam monolithic_adam
0
330
パズルゲームの作り方 / how to make puzzle games
Avatar for kaityo256 kaityo256
PRO
2
260
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
150
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
5k
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
330
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2.7k
MVNOの申込からeSIM開通までをiOSアプリでつなぐ- 本人確認・MNP・通信事業者基盤をまたぐ実装
Avatar for Sato Takeshi satotakeshi
0
530

Featured

See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
340
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
58k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.3k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
500
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
Design in an AI World
Avatar for tapps tapps
1
350
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
1
450

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