Looking for a way to handle Javascript file dependencies

Question

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.

Answer 1

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.

Answer 2

If you don't want to go through the effort of setting up an AMD loader like require.js, MVC 5 comes with a built in way to handle things like this with its BundleCollection library. A new MVC project should automatically setup this up for you in the BundleConfig.cs class in App_Start and give a very basic example of its use.

You can combine one or more javascript files into a bundle, which you reference in the HTML instead of the script tags. These scripts are automatically combined into one script and minified when published in Release mode (or setting <compilation debug="false" /> in the Web.Config). In development the script tags are just written to the HTML.

Microsoft has a decent tutorial on this here: https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

You can bundle css files too, but one thing to watch out for is that relative paths in the css files to images can easily be broken.

To fix this, do the following:

bundles.Add(new StyleBundle("~/cssbundles/bootstrap").Include("~/Content/bootstrap.css", new CssRewriteUrlTransform()));

This changes the relative paths in the .css file to absolute paths.

Depending on the complexity of your javascript dependencies and what kind of application you're writing (SPA or not), this may be an easier solution. If you just want to always load a bunch of javascript files when using at least one if them, it's easy to setup and use and reduces the load on the client by bundling/minifying.

Answer 3

I think that good start will be to change your code to separate "packages" and try to manage dependencies with bower (create your own repos with bower.json configurations)

https://bower.io/