code-maps-frontend

Exploring the idea of using interactive auto-generated diagrams to make frontend code more understandable.

Presentations

• [October 2019] React Conf: Slides / Video / Transcript
• [September 2019] React Boston : Slides / Video

Please feel welcome to send me maps of code that you have made or find elsewhere.

Readings

• Mentioned
  • Papers
    • Software Reflexion Models: Bridging the Gap Between Source & High Level Models - Gail C. Murphy, Kevin Sullivan, David Notkin (1995)
    • The Eyes Have It: A Taxonomy for Information Visualization - Ben Schneiderman (1996)
  • Articles
    • How Graphic Design Legend Massimo Vignelli Cracked the NYC Subway System
  • Books
    • How to Lie With Maps - Mark Monmonier
    • History of the World in 12 Maps
• Influenced but not directly quoted
  • Questions Developers Ask During Change Tasks - Sillito (2006)
  • Developers Ask Reachability Questions - Thomas LaToza & Brad Myers (2012)

Tools

• Visual + Node Based Programming (not necessarily JS)

  • Visual Programming Codex
  • Collections on are.na such as Frederic Brodbeck's or @round's. Still working on curating my own.

• JS+TS Exploration

  • Files as Nodes
    • ARKit
    • Dependency-Cruiser
    • Madge
  • Functions as Nodes
    • Dynamic Callgraphs (Browser Devtools, Flamebearer)
    • Python/C Tools: Pyan
    • Static Callgraphs: js-callgraph
  • Variables as Nodes
    • Observable Debugger
    • Reselect Devtools
  • State Machines
    • XState
    • Sketch.systems

• Miscellaneous

  • Python Callgraph
  • Data Engineering DAGs: Airflow and Dagster UI (Compound nodes)
  • Visualizing Audio Transformation DAGs: NFGrapherJS

• Influenced but not directly mentioned

  • Alternate network layouts (Hive plots, biofabric)
    • The State of the Art in Visualizing Multivariate Networks
  • Generic graph analysis tools (Cytoscape + Gephi + Neo4j viewer)
  • Codecrumbs / Structuralizr TS / Dependo
  • Visual tools for performance/bundle optimization / code growth
    • Gource, Codeflower, hercules, git-of-theseus, bundlebuddy, etc
  • Bret Victor / Mindstorms (Papert) on tangible computing
  • Susie Lu's Keynote at Visfest Unconf 2019 - Data Visualization Retrospective and Abstractions

Demos

• Electron Demos from Section 3
• Historical Train Schedule Remake
• Github Radial Repository - An Electron version of an demo by Amelia Wattenberger. Not from the presentation, but explores related ideas.

Related Readings / Watches

If you're read this far, you might also like these non-frontend specific resources:

• Visualizing The Architecture - Simon Brown, Devternity 2016. See also his site codingthearchitecture.com
• One-Page Design Docs - Stone Librande
• Readings on Wayfinding
• Ruth Malan's public work on software architecture
• Your Code as a Crime Scene - Adam Tornhill (TED 2016) - Applying forensic psychology to understanding code
• Trying out any GIS software (ArcGIS, ESRI, QGis) to get a feel for the potential of data-map overlays

Contributing

If you see a resource that you think would be appropriate to include in this list, I welcome pull requests/issues.

In the future, the "recommended/cut for time" sections might split into a separate list of curated resources. In that case, this document will be limited to items specifically mentioned in the talk.