Visualize Your iOS App’s Dependency Graph

Understand the shape of your codebase

In my previous article, I wrote about how we can use the different tools available to remove unused resources, classes, functions, and localized strings . I hope you guys liked it.

In this article, I’m going to talk about another tool I usually use to get an in-depth analysis of my codebase. Here, we’re talking about the dependency graph in our project. So what’s a dependency graph?

“In mathematical terms, a dependency graph is a directed graph, where directed edges connect the nodes and indicate a directional dependency.” — Eric Dietrich

I’d like to talk more about the dependency graph, but maybe in a separate article next time. The tool I’m going to explain is one I’ve been using for some time to get an overview of the classes and structs in my project — how big they are, how they are linked with one another, and which classes are dependent on which. Let’s dive into the actual usage first and then come back to the explanation.

This tool is the Objective-C And Swift Dependencies Visualizer and uses .o(object) files to generate a dependency graph.

To use this tool: enter the following command in your terminal first:

git clone https://github.com/PaulTaykalo/objc-dependency-visualizer.git ;
cd objc-dependency-visualizer ;

Now go and build your iOS project in Xcode, and then enter the command:

./generate-objc-dependencies-to-json.rb -w -s "" > origin.js ;

What this above command does is it takes your project from the derived data that you just built before entering the above command and then prepares a directed graph of your classes. Now enter:

open index.html

The above command opens your default browser and shows the chart.

Note: This might not work in Safari, so do use Chrome or Firefox to open that index.html file.

For demo purposes, I’ve used my existing project to prepare the below chart:

I know it looks vague, but I had to zoom out to show all of the classes. A closer look at the graph is below:

So all these orange circles are the view controllers, the brown ones are the constants and structs, and so on.

Clicking on one circle highlights it with all the other classes it’s dependent on or the ones that have a dependency on it, as shown in the above image.

If you closely view the dependency graph, you’ll notice there are some circles far apart from the main cluster — these are called islands. They’re separate bits of code that aren’t dependent on the main codebase and might/might not serve the purpose of the project.

Islands aren’t necessarily bad, but from the dependency graph view, we can see that we can surely delete the whole island, as it serves no purpose.

So the gist of all this is using the dependency-graph viewer, we can see the distribution of the codebase in our project. It gives an on-the-fly analysis of the codebase. It also helps us to see the cyclic dependency between the classes. A cyclic dependency is formed when two or more abstractions have direct or indirect dependencies to each other.

Conclusion

Thanks for reading. Happy coding!