Visualizing the data flow with Cycle.js
summary
Built DevTools visualize live reactive streams so events literally zap between nodes, showing recursive component trees, DOM and HTTP worlds, and a counter example implemented with xstream/RxJS and a Cycle main(sources) function. A reproduced bug is found by watching a stray event propagate instead of stepping through code. Supports collapsing/expanding nested stages to tame large graphs, integrates with JSX and Cycle Onionify state reducers, and runs in production (example: Danske Bank). This is pragmatic visual DevTools for macro-level debugging.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 2:12Visualizing a bug
- 3:27Debugger
- 4:28Microlevel information
- 5:48Macrolevel debugging
- 6:52React Monaco
- 18:53Real world application
- 20:22Other ideas
- 22:54Thank you
- 23:07Questions
- 24:29Recommendations
- 25:52QA
- 31:02Interview
related talks
35mFunctional Reactive Programming with Cycle.js
30mVisualization Driven Development
36mNext generation of frontend architectures
35mVisual Reasoning and Mental Maps in Elixir
08mCode flow canvas - a generic visual programming system
32mWhat if the user was a function
38mReact as a Developer Health Tool
35mDebugging JS and React