See the data flowing through your app

C8dbe3c6d219999ee0ecce86a450d0e3?s=47 André Staltz
September 09, 2016

See the data flowing through your app

What if instead of building your own mental model of how data flows through your application, you could actually see the data flowing in real-time? In this talk we will explore functional and reactive streams as a building block in JavaScript applications, with tools like RxJS, Cycle.js, xstream, which enable DevTools from the future.

C8dbe3c6d219999ee0ecce86a450d0e3?s=128

André Staltz

September 09, 2016
Tweet

Transcript

  1. @andrestaltz See the data flowing through your app

  2. 1. I want an architecture for any kind of user

    interface 2. I want clean, readable, predictable code 3. I want to know how code works
  3. 1. I want an architecture for any kind of user

    interface 2. I want clean, readable, predictable code 3. I want to know how code works
  4. None
  5. Debugger: Helps understand code at micro-level: ✅ Helps understand code

    at macro-level: ❌
  6. None
  7. None
  8. None
  9. JigZone.com

  10. Mental model

  11. Do we have tools for macro-level debugging?

  12. Minimap

  13. None
  14. None
  15. None
  16. None
  17. None
  18. Redux
 DevTools

  19. None
  20. Custom action creators Server

  21. redux-saga Saga Server

  22. redux-loop Server

  23. Server Saga Server

  24. Predefined mental model Flexible mental model

  25. How to visualise the macro-level logic in slow motion? Program

    Control flow if, else, for, while, try, catch, stack trace, etc
  26. How to visualise the macro-level logic in slow motion? Program

    Reactive streams
  27. Stage Outside world

  28. Event

  29. None
  30. Mr. Driver

  31. None
  32. "Julia"

  33. None
  34. None
  35. +1

  36. None
  37. "Raphael"

  38. None
  39. None
  40. -1

  41. None
  42. "Monica"

  43. None
  44. None
  45. -1 3

  46. None
  47. "Domenic"

  48. None
  49. None
  50. +1 4 <div>4</div>

  51. None
  52. None
  53. None
  54. None
  55. None
  56. +1 5 <div>5</div>

  57. -1 4 <div>4</div>

  58. 3 -1 <div>3</div>

  59. Outside world

  60. Stage

  61. Stage Outside world observes observes

  62. Stage Outside world observes observes such cycle much js

  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. What about a large real-world app?

  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. Cycle.js.org A functional and reactive JavaScript framework 
 for cleaner

    code
  89. None
  90. None
  91. ❤ The End

  92. Thank you 
 $ Questions?