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.

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
5. Debugger: Helps understand code at micro-level: ✅ Helps understand code at macro-level: ❌
9. JigZone.com
10. Mental model
11. Do we have tools for macro-level debugging?
12. Minimap
18. Redux
 DevTools
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
30. Mr. Driver
32. "Julia"
35. +1
37. "Raphael"
40. -1
42. "Monica"
45. -1 3
47. "Domenic"
50. +1 4 <div>4</div>
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
81. What about a large real-world app?
88. Cycle.js.org A functional and reactive JavaScript framework 
 for cleaner code
91. ❤ The End
92. Thank you 
 $ Questions?