While developing Linux IoT applications, my desire to deconstruct my desktop Linux installation to really understand how it works has grown. Likewise, I find myself needing to wrap my head around increasingly large amounts of source code at one. To actually accomplish either of these two things, I need to develop a tool that helps someone understand software and code.
Knox is the first iteration of my solution to this problem. Knox was intended to be a desktop application that could analyze a filesystem directory and produce meaningful visualizations about the structure, running behavior, and use of the contents. For this event specifically, I decided to focus on analyzing TypeScript projects only, because the TypeScript language tools are readily available. I set the goals of:
- Visualizing important abstractions (classes, interfaces, functions, etc) in a meaningful way
- Detecting tools used in the project, like linters or bundlers
- Generating an overview of all code from the application entry-point forward
The final product, as with many hacks, is far from the planned outcome. It has a very basic, but functioning front-end that communicates with an Express.js server to fetch analysis data. Basic displays of data based upon the three goals are implemented.
A few hours were spent trying to get Electron to cooperate, but it would not. I employed the React framework for the first time, because it was clear that vanilla web technologies wouldn't be sustainable for interface-building in one weekend. I'm disappointed that learning to use React occupied so much time that I couldn't spend time on the analysis algorithms, but since it was my first project with the framework, I'm quite pleased with the outcome from that perspective.
The source code visualization concept of Knox will return at a southeastern hackathon very soon, where it can be rebuilt according to its full potential.
Log in or sign up for Devpost to join the conversation.