Javascript – Looking for a way to handle Javascript file dependencies

dependenciesdesign-patternsjavascript

I'm making the transformation from being a web developer whose pages often contain loads of <script> tags to one whose pages contain modular Javascript, encapsulated in functions, etc. I'm trying to work out the best way to handle the situation where the code in a particular script file assumes that another script has already been loaded.

For example, my markup may look like this at the moment…

<script src="SomeCommonUtil.js"></script>
<script src="PageSpecificScript.js"></script>

…where the code in PageSpecificScript.js assumes that the code in SomeCommonUtil.js has already been loaded.

I would like to improve this, but am not sure the best way to go about it.

Looking around, it seems that requires.js is a popular approach, but then I see things like require.js and others as well. I'm struggling to work my way through this, and was hoping someone could give me some guidance.

We develop ASP.NET MVC5 web sites, and use the KendoUI library for widgets. We've just started using KendoUI's MVVM framework as well.

Any guidance would be appreciated.

Best Answer

Based on the clarification, you might be talking about JavaScript package management. The two big ones I know about are Node Package Manager (NPM) and Bower. VisualStudio has Bower integration, so that might be a good match for you.

The JavaScript package managers keep track of the dependencies between your dependencies, so that when you include something like KendoUI, then the package manager will download and integrate all the dependencies it needs.


What many websites do these days is create a consolidated and minimized version of the JavaScript. There are a few ways to go about doing this, depending on how you want to manage it.

Asp.Net MVC 5 has the concept of creating resource bundles which reduces the number of resources the browser has to pull down, and the size of the resource. I'm not aware to what extent that MVC goes through to remove code that is never called, but this process works pretty well.

Some specific JavaScript tools (like Sencha ExtJS) have a proprietary tool to handle the bundling and minification for you. Typically, it will remove parts of the library you are not using, and it doesn't break the library when minifying the code.

A pure JavaScript solution is to use something like WebPack to generate both the bundled JavaScript, and a map file for debugging. The map file is a standard understood by Firefox and Chrome (with more browsers coming on line) that lets you run the minimized code, but interact with the JavaScript in your browser's debug window as if it were separate files. WebPack has the added bonus of being able to transpile JavaScript 6 code down to JavaScript 5 for those legacy browsers (like Internet Explorer).

Having used all three solutions I'm aware of some tradeoffs:

  • Resource Bundles are easy to set up and integrate. They just lack the mapping file to make debugging easy.
  • Proprietary libraries that have proprietary bundling tools really need them. We've had our JavaScript break in unpredictable ways on different browsers when using resource bundles.
  • Webpack has a high learning curve, but is capable of doing some very impressive things. If you intend on using React, it's almost a necessity. If you have a UI that is talking to a REST API layer, it's the way to go.

The short answer is, you are probably going to get the most bang for your buck by using resource bundles in your particular case.

Related Topic