The client script loader is cool

Article
11/25/2009

One of the new “features” of the ASP.NET Ajax library is the refactoring of said library into 15 or so separate scripts. As the capabilities of the library have grown, inevitably so has its size. To maximise performance it’s important to be able to specify only the parts of the library you need for the task at hand.

Of course this in itself creates another problem – how to manage dependencies. MicrosoftAjaxWebForms.js for example has dependencies on MicrosoftAjaxComponentModel.js and MicrosoftAjaxNetwork.js. These too have there own dependencies. Fortunately, someone has compiled a nice little graph for us:

Even better is the news that someone spotted this was all a bit cumbersome and awkward and came up with a very clever way around it. Enter start.js and the client script loader whose job it is to figure out, for a given component or script, what its dependencies are and load them in an optimised fashion.

ScottGu talks a little about the client script loader in preview 6 over here. While I was playing around with it, I got a little confused as I couldn’t get Scott’s example to work. I’d copied the script files from the MicrosoftAjaxLibrary_Preview6\MicrosoftAjax folder as normal but

 <script type="text/javascript">

    Sys.require([Sys.components.watermark]);

</script>

simply didn’t work. However the samples supplied with preview 6 worked okay. I noticed an additional script reference in there

 <script src="../Scripts/ACT/ACTRegisterExtended.js" type="text/javascript"></script>

What was this ACTRegisterExtended.js script it referred to (and why wasn’t it in the MicrosoftAjax folder)? Well, the script itself looks like this:

 Sys.loader.defineScripts({
    releaseUrl: "%/../ACT/" + "{0}.js",
    debugUrl: "%/../ACT/" + "{0}.js"
},
    [
        { name: "ACTWatermark",
            executionDependencies: ["ACTExtenderBase"],
            behaviors: ["AjaxControlToolkit.Watermark"],
            isLoaded: !!(window.AjaxControlToolkit && AjaxControlToolkit.Watermark)
        },
        { name: "ACTExtenderBase",
            executionDependencies: ["ACTCommon"],
            isLoaded: !!(window.AjaxControlToolkit && AjaxControlToolkit.ControlBase)
        },
        { name: "ACTCommon",
            executionDependencies: ["ComponentModel", "Globalization"],
            isLoaded: !!(window.AjaxControlToolkit && AjaxControlToolkit.TextBoxWrapper)
        }
    ]
);

It was quite clear it’s job was to specify the dependency graph for the Ajax Control Toolkit Watermark component allowing the client script loader to do its work. Clever eh? And one would assume one could do the same things for any script including ones I’d created myself.

The recently released ASP.NET Ajax Library 0911 Beta extends this script (now named simply ExtendedControls.js) to include many more of the Ajax Control Toolkit controls. I wont include it here as it’s now quite lengthy :).

What triggered me to write this post was a great post from Bertrand Le Roy titled “Enabling the ASP.NET Ajax script loader for your own scripts” which takes you through the way this works in some detail and explains how to enable the script loader goodness for your own scripts.

Oh, and the script loader supports jQuery too so you can simply write

 Sys.require([Sys.components.watermark, Sys.scripts.jQuery]);

To add jQuery to the page.

Download the ASP.NET Ajax Library 0911 Beta

Read (a lot) more detail about the client script loader from James Senior

The client script loader is cool

Additional resources