1

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.

  • 1
    This is a good place to start to get a good grasp of the concepts used by module loaders: two GDAs live-code a module loader from scratch using Babel which adresses chukning and fairly simple dependency tree analysis. youtube.com/watch?v=4KVeNoN1aFM – msanford Jul 17 '17 at 13:54
  • 1
    Google "modular javascript" and you'll see there are many, many ways (it's a big problem with many solutions). I think unfortunately this question won't have a good answer. – Fuhrmanator Jul 18 '17 at 20:38
  • @Fuhrmanator That's one of the problems I have, there's just too much info out there. I was hoping that someone with more experience would be able to offer a suggestion of a combination of libraries/techniques/etc. I guess you're right though, it's a bit of a big question. Still, I can live in hope that some will offer an opinion. Thanks – Avrohom Yisroel Jul 19 '17 at 14:13
  • In case it helps anyone else, I came across some good resources for this. There is a very good series of videos on the subject, the first of which can be seen here https://www.youtube.com/watch?v=HkFlM73G-hk. This goes from the basics (which I didn't actually need, but was worth watching to get the background), right through to some quite advanced techniques. Also, I found an excellent book on the subject, which has a free PDF version available. You can read the book here. Can't s – Avrohom Yisroel Aug 16 '17 at 16:15
  • Just look at webpack – Fez Vrasta Sep 16 '17 at 21:18
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.

  • Thanks, but that wasn't really what I meant. I know about bundling, but it doesn't really address the issue of dependencies. You still have to maintain the bundles, and if you have complex dependencies (say multiple .js files depending on a few common .js files) then you have to create multiple bundles (one for each combination), include everything in one bundle, or load multiple bundles on each page. Whichever option you pick, you aren't really any better off with the bundling. Thanks for the reply. – Avrohom Yisroel Aug 16 '17 at 21:04
  • Actually, re-reading my question, I guess I wasn't really clear. It was more the modular aspect of Javascript that I was asking about, but looking with fresh eyes, that's not so clear. Thanks anyway. – Avrohom Yisroel Aug 16 '17 at 21:05
0

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.

  • 2
    Thanks for the reply, but as I explained in my comments on the reply by @BerinLoritsch bundling isn't really what I'm looking for. – Avrohom Yisroel Aug 16 '17 at 21:06
-2

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/

  • 1
    this doesn't seem to offer anything substantial over points made and explained in this prior answer that was posted several hours before – gnat Aug 17 '17 at 7:50

Not the answer you're looking for? Browse other questions tagged or ask your own question.