JavaScript Web Applications

Chapter 6. Dependency Management

One of the things that’s held JavaScript back as a language has been the lack of dependency management and a module system. Unlike other languages, namespacing and modules aren’t something traditionally emphasized when people are learning JavaScript. Indeed, popular libraries like jQuery don’t enforce any application structure; there’s definitely an onus on the developer to resolve this himself. Too often, I see spaghetti-styled JavaScript, with a crazy amount of indentation and anonymous functions. Does this look familiar?

function() {
  function() {
    function() {
      function() {

      }
    }
  }
}

The usage of modules and namespacing is one thing, but the lack of native dependency systems is becoming an increasing concern when building larger applications. For a long time, a script tag was deemed sufficient, as the amount of JavaScript present on the page didn’t justify anything further. However, when you start writing complex JavaScript applications, a dependency system is absolutely critical. It’s completely impractical to keep track of dependencies yourself by adding script tags to the page manually. You’ll often end up with a mess like this:

<script src="jquery.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.ui.js" type="text/javascript" charset="utf-8"></script> <script src="application.utils.js" type="text/javascript" charset="utf-8"></script> <script src="application.js" type="text/javascript" charset="utf-8"></script> <script src="models/asset.js" ...