Cameron Yick

Visualization isn't just for charts. Developers spend most of their time trying to understand existing code, which often lacks documentation about design-level concepts. Handcrafted diagrams are useful but get out of date, and traditional code search only helps if you know what words to look for. 

We don't navigate the real world by examining every sector of a geographic map, so why should we scan code line-by-line? 

This talk will showcase the past, present, and future of visual tools for automatically generating maps of code, using inspiration from older typed languages and HCI research.

2019

React Conf

Automatic Visualizations of the Frontend

Developers spend more time reading existing code than writing new code. Navigating codebases is especially important when joining new projects, or when investigating external libraries. Unfortunately, getting a full understanding of a system can be a slow process, especially in large codebases. Incomplete or inaccurate mental models contribute to bugs and slow development. Handmade architecture diagrams can help, but it is easy for these to drift out of sync from the code they originally described.

Automatically generated visualizations can help to untangle this complexity, but they aren't mainstream (yet). This talk will share a few existing tools and techniques for visualizing relationships in source code developed for other languages, such as Smalltalk and Java. We’ll examine how these "old" techniques could benefit modern Javascript/Typescript codebases. Next, we'll explore techniques currently available to React developers beyond the standard devtools, including automatic code annotation, state charts, annotated code maps, and network analysis tools to make sense of a file’s dependency tree. I'll close by sharing ideas for visual analysis from other fields that can be applied to understanding concepts in frontend code.