Cameron Yick at React Boston 2019

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.Show more