Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:16Length:1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.2 Resolving Circular Dependencies

Modules which mutually depend on each other create circular dependencies that can cause problems within our applications. In this lesson we’ll see how to use the nifty Madge tool to work out where they are in order to eliminate them.

Related Links

4.2 Resolving Circular Dependencies

Hello. In this lesson, we're going to look at a simple utility we can use to determine whether we have any circular dependencies in our application. Circular dependencies are caused by two modules that mutually depend on each other. Generally, this is a bad situation which we should avoid. And can sometimes indicate that the structure or design of an application needs to be reconsidered. In our example application, the list manager depends on the list. The list itself doesn't depend on anything. If for some reason we wanted to load the list manager inside the list module, we would find that the list manager would be an empty object inside the list module. Let's do this just to illustrate the example. [BLANK_AUDIO] So if we try to call one of the list manager's methods, we would get undefined. [BLANK_AUDIO] Let's just fire up the browser and take a look. [BLANK_AUDIO] So here, you can see that we have undefined. So obviously, in this case, the circular dependency is a flaw. The list shouldn't know anything about the list manager. Sometimes, however, modules may need to depend on each other. If this is the case, and the dependency is unavoidable, we can use the special require module to fix the circular dependency. [BLANK_AUDIO] Now, if we go back to the browser, then we find that we can access the method once again. So this is how we can fix circular dependencies if absolutely necessary. But generally, we should avoid them. In this case, we know exactly where the circular dependency is. But in larger projects with many more modules and more complex relationships between the modules, they may not be so easy to spot. We can use a nifty little command line tool, called madge, to automatically find and visualize the dependencies between modules. Let's take a look. You'll need to have Node.js installed to run the tool. So let's open up a command prompt. And we can install madge globally with the following command. [BLANK_AUDIO] So I accidentally included the hash sign on the end of the name there. Let's try that again. [BLANK_AUDIO] So madge should be installed now. We can CD into the roots project folder, and run a check for circular dependencies. [BLANK_AUDIO] So it shows our list and list manager modules in red. So let's go back now and put the list module back to how it was originally. [BLANK_AUDIO] And let's run madge again. And now, we have no circular dependencies. Because we can run madge from the command line, we can automate it and include it as part of the build process to prevent the build if a circular dependency is detected. Task run is like Grunt. Can easily configure and run the tool for us. In this lesson, we looked at circular dependencies. And saw that they are usually to be avoided as they can cause issues in script loading. We saw how to fix them using the special require module. And looked at a useful command line tool that we can use to find them, and then fix them. Thanks for watching.

Back to the top