I've Fallen Into a Large Codebase and I Can't Get Up!
summary
Describes a concrete workflow that links a human-drawn concept model to real files, then overlays automatically extracted dependencies (using tools like madge and dependency-cruiser) so mismatched imports and vanished edges stand out; demonstrates function- and variable-level views (reselect and observable examples), interactive state-machine diagrams, and an Electron demo with progressive reveal and quick filter/prune controls; shows that adding file metadata (git authors, run counts) and details-on-demand makes large JS/TS codebases navigable and actionable.
AI-written summary · about
chapters (17)
- 0:00Start
- 2:12What We Do When We'Re Lost in the Real World
- 3:50Intentional Information Hiding
- 4:27Which Map Is the Right Map
- 7:43React Example
- 9:55Takeaways
- 11:58What Tools We Can Use That Generate Visualizations from Our Existing Code
- 14:06Dependency Cruisers
- 14:38Nodes as Functions
- 15:03Static Call Graph
- 15:49Observable Notebook
- 17:33State Machines
- 19:02The Hairball Problem
- 19:53Progressive Reveal of Information
- 20:21Information Seeking Mantra
- 25:05Graph Visualization
- 26:23Recap What We'Ve Learned
related talks
30mAutomatic Visualizations of the Frontend
47mTreat Your Code as a Crime Scene
48mFrom Chaos to Clarity Mathematical Foundations for Maintainable React Applications
30mOh No I'm Stuck! A Guide to Detangling a Complex Codebase
57mDealing with Medusas in your Codebase.
56mReading other peoples code
47mKnowledge in code is gold — how to extract it and power your team and AI
19mSoftware Visualization: The humane solution