Question

I have built a single page application where users can build reports. The users are presented with a form allowing them to choose the data source, the chart type and the theme, then upon confirmation the page loads the required files and draws the chart.

For better performance, I’d like to load the code modules and data in parallel. For example if the user selects “Pie chart”, “Blue theme” and “Airline Stats”:

WHEN (js module Pie chart is loaded)
and (blue theme css is loaded)
and (Airline Stats json is loaded)

THEN (draw chart)

I have found a number of libraries that implement AMD, and a number of libraries that implement promises, but none where module loading and promises could be combined as in my example above. Is this possible, and are there any libraries that already implement this?

My need is for client side JavaScript.

Answer 1

jQuery can actualy do this through promises. It’s just a matter of modifying the code.

Assuming that you own the code and all live in the same domain or if cross-domain, the server allows CORS, we will load each with .ajax(). We will then use .when() to detect when all the promises are loaded and .then() to add our callback to execute all the promises resolve.

//you can provide a detailed setting for each using .ajax()'s second parameter
//however, jQuery can "smart detect" the content's dataType

var chart = $.ajax(urlOfChart), //script
    theme = $.ajax(urlOfTheme), //css
    data  = $.ajax(urlOfData);  //JSON

//we use .when() to check when all three resolves
//the arguments will be the jqXHR objects for the requests
//in the order they were given in the argument list
$.when(chart,theme,data).then(function(chart,theme,data){

    //according to jQuery.ajax(), if a script is requested, it is evaluated
    //and we still get it's plain text content
    //so with respect to the script, we do no processing

    //with the css, we get it as plain text since no dataType value handles it
    //we embed it into the DOM by creating a style element 
    //and append the text in it for the styles to take effect on the page
    $('<style type="text/css" />').html(theme).appendTo('head');

    //as for the JSON, jQuery converts it into an object 
    //and is passed as an argument as the return data for that promise

    //...everything is now requested, retrieved and prepared...
    //everything else goes under here

});