When you work on a codebase, at any certain point of time, they tend to grow in size. Thus the larger the codebase becomes, the more Javascript modules you will get to develop and maintain.

And more often than not, those same Javascript modules are not always clear when you spend time determining the inter or intra-relationships between them.

For eg,

A developer (let’s called him Jake) works on modules, A, B, C, and discovers the following dependencies pattern.

Module A depends on Module B and C,
Module B depends on Module C
Module C doesn't depend on anything.

From this, Jake would assume he only needs to worry about the core functionality shared between A, B and C in linear fashion.. and nothing else.

But this is a very bad assumption to take because, as he searched through the codebase, he learned/realised that there are other modules in the system are also relying on Module B and C and he’s never worked on these other modules before.

But yet, he has to touch these modules because any changes he introduced in Module B/C not only has to work with Module A, but it must not break in Module XXX etc, that depends on B/C as well. Or.. he may not know anything about Module XXX at all and he would like to communicate better with his teammates how strongly interlinked this module would be across the entired front-end platofrm…

Sure… you may whip up the VSC and do a global search of the entire codebase to find the relevant modules you see want like so

project
│
└───A
│   │   A.js
│
└───B
│   │   B.js
│
└───C
    │   C.js

You still couldn’t figure out clearly on the outset how they supposed to relate to each other visually when navigating the flow of data coming from one module to the next or several modules.

You want to see the bigger picture… The bigger picture where we want to see ALL the dependencies and ALL files at the same time.

Henceforth, we found the solution here.

That solution is called MadgeJS.

According to its main Github headline,

Create graphs from your CommonJS, AMD or ES6 module dependencies.

Nuff said.

It is simply a fantastic tooling that helps you to build visual graphs of your Javascript dependencies tree whenever you wish to discover the interdependent relationships between modules in the whole JS systems - on the fly.

The short version of this:

1. Start and make your project
2. Run madge, and feed the source files
3. Lastly, you will see a generated graph will pop up.

For example, if you do the git clone of madge js library, and run npm install when you run madge on its library, you will see below

You may need to install graphviz to view this.

Which is great for small projects.

But… what about bigger ones?

Such as the one from Moment JS here.

☝️ That’s pretty insane right?

So, you can see the visual dependency graph tree could get so many layers of depth of dependency tree branches as far as you can reach. From this, as developer working in a sizable team, you wamt to know where the modules have been moved around or changes by other developers in the codebase.

You can, of course, change the depth of the dependency graph as little or more as you want.

Madge allows you to:

1. Query dependency graphs on a single file
2. Query dependency graphs on multiple files
3. Query dependency from different folder locations
4. Query modules that have little or dependency at all
5. etc, etc

With all, you can determine the output of the visualisation graph in different formats such as PNG, SVG or even JSON as well.

It works on all types of JS frameworks ie React, Angular, VueJS, Svelte, Express etc, etc.

That’s it, folks! Have that as another awesome tooling to add as part of your JS toolkit belt.

Till then, Happy Coding!