Automatic Visualizations of the Frontend
summary
Automatic maps of frontend code that highlight concrete mismatches between plan and code and point to risky hotspots. Uses the reflection model (C/Java work used to refactor Excel), static and dynamic dependency tools like module-deps and dependency-cruiser, Observable and reselect visualizers, XState diagrams, and an Electron demo that makes file graphs clickable, supports pruning and progressive reveal, and hooks ripgrep and git log to show matching lines. The talk demos over nine tools and shows the maps working end to end.
AI-written summary · about
chapters (5)
- 0:00Start
- 5:21the ideal abstraction level
- 15:04FUNCTION CALL GRAPHS
- 16:34DATAFLOW (VARIABLES)
- 18:42STATE MACHINES
related talks
28mI've Fallen Into a Large Codebase and I Can't Get Up!
25mA Picture Worth a Thousand Programmes
30mVisualizing process evolution
01h 00mFrontend: Graphs. Build. Dead Code
01h 01mThe visual future of reactive applications with statecharts
36mKnowing What You See - Let's Talk About Front-end Consistency
48mFrom Chaos to Clarity Mathematical Foundations for Maintainable React Applications
30mAI Powered Frontend Development Building Better UIs Faster