New IDE tools to visualize code may accelerate app dev
IDE tools for code visualization have always been difficult to implement. But given the benefits, new tools have emerged to make it possible to easily visualize your code.
In order to develop new apps, programmers first need to make sense of how the existing code works. A new tool called Sourcetrail makes it easier to visualize code, including JavaScript, so devs can spend more time writing than reading.
Eberhard Gräther spearheaded the idea to give JavaScript developers IDE tools to visualize code. Gräther felt frustrated by the long learning curve he experienced when he started interning on the Google Chrome team.
"At the time, I looked into a lot of different tools and approaches, but I always felt there was something missing," he said. "There was no code visualization tool that had a simple representation of a symbol and its relationships to the rest of the code base yet, which was the use case I was mostly confronted with while reading code in the Chrome code base."
Visualize your code vs. reading
Eberhard Gräther
Some older Microsoft research suggests developers spend about 70% of their time trying to understand code. While organizations might differ, it is clear developers spend a lot of time learning, particularly new code. A Sourcetrail survey found developers who use the tool saved about 20% to 30% of the time they alloted to reading code. A few saved up to 50%.
"I don't shy away from touching old code anymore," Gräther said. "After a couple minutes looking into it with Sourcetrail, I am back on track and can start implementing right away."
Visualize code efficiently
Without IDE tools to visualize your code, the traditional way to analyze source code is to search for strings and then physically connect the dots. Developers commonly use the IDE itself or more elaborate search tools, like Chrome code search, grep, git-grep and ctags.
"Searching is the standard way of finding information in a code base," Gräther said. "And every developer has become so used to it that they don't think about how it could be done more efficiently anymore."
But with a visual code search, a developer still must figure out how a searched symbol is used in each result. With grep, they must check to see if the result is even remotely related to the thing a developer is searching for. With a tool to visualize code, we can represent this information in a way that is easier and faster to understand.
IDE tools for visualizing code
One of Sourcetrail's main features, for example, is its interactive graph to visualize code. This enables users to see what is related to the selected symbol and make it easy to navigate. All you have to do is click on other symbols or edges. Visualization is also much easier to process than lists of text.
At the same time, it's hard to understand an implementation without seeing the actual source code. In order to bridge this gap, Sourcetrail keeps the code connected to the graph. When the mouse hovers over a graph node or an edge, the respective line in the code is automatically highlighted and vice versa.
I can imagine it won't take much longer until you find tools for visualizing code in every major IDE.
Eberhard GrätherFounder and developer, Sourcetrail
It did take some time to find a code visualization that worked. The first prototypes and IDE tools to visualize code tried to show the whole code base in one big graph. This let developers select symbols they were interested in to see more details, such as calls and access relationships. But this was the wrong approach since code bases can get way too large for this type of representation. Sourcetrail switched to a one-level dependency graph code visualization that shows only one symbol and its direct relationships but does not flood the user with too much information.
The future of visualizing code
Sourcetrail wrote its first version in C++. It added support for Java later. Support for dynamic languages like JavaScript will be a little harder, because it's harder to sort out a lot of the relationship information within the code with static analysis. For this kind of visualization to work, you need to dynamically analyze code while it is running. This is much harder, and it will only show relationships from the pieces that are actually executed.
Sourcetrail executives decided against integrating it directly into a specific IDE. They instead implemented it as a stand-alone tool that runs on Windows, macOS and Linux. In order to integrate it directly into the development workflow, however, they created an IDE tools plug-in for the most common code editors. This makes it possible, and easier, to sync content shown in the visualization with the code in the IDE.
Going forward, Gräther hopes to support more programming languages and provide easy access to store information. This will make it easer for developers to create customer queries that help with use cases that are special to their code base.
"After using visualization tools in my daily development workflow, I think they have a big future," Gräther said. "I can imagine it won't take much longer until you find tools for visualizing code in every major IDE."
Dig Deeper on Development tools for continuous software delivery
Eberhard Gräther
