Understanding async loading

[Johan Chouquet]

Hi all,

I'm interested in understanding the very basics of async scripts/files loading. In fact, I'd like to understand what I see in the Chrome web developer tools, on Timeline tabs.

I am currently interested in those topics, because I was using curl to load asynchronously my scripts : 5 smalls legacy scripts which I managed to convert to AMD modules. Then, I tried to look how those scripts were loaded in the Timeline of Chrome Debug Mode : I was expecting to see them loading in parallel, the async thing. But, instead I just saw them loading one after another. Maybe this can happen when scrips are to small (they're between 1 Ko and 5Ko)? They're not, at this moment, minified nor concatenated. See that image :

My code (in index.html) is like (I have no run.js file right now) :

var cfg = {

paths: {

jquery: {

location: 'app/js/vendor/jquery-1.9.0.min',

            config: {

            factory : function(){

                       return $;

                   } 

            }

       },

curl : 'bower_components/curl/src/curl',

bootstrap: {

location: 'app/js/bootstrap/bootstrap',

config: {

loader: 'curl/loader/legacy',

factory: function() {

return;

},

requires: ['jquery']

}

},

initsimu: 'app/js/user/initsimu',

ui: 'app/js/user/ui',

connexion: 'app/js/user/connexion',

encaissement: 'app/js/user/encaissement',

validate: 'app/js/user/validate'

},

preloads: ['jquery']

};

// beforerun is just a small module that created the link element in the page. I will replace that with plugin css! from curl if I manage to settle point 2 of the question

curl(cfg, ['app/js/user/beforerun'], initiatePage, tellWhy)

.next(['bootstrap'])

.next(['initsimu', 'ui', 'connexion', 'curl/domReady', 'encaissement', 'validate'], actions, tellWhy);

// 'initsimu', 'ui', 'connexion', 'encaissement', 'validate are my modules

function initiatePage(BeforeRun) { BeforeRun.initPage();}

function tellWhy(ex) { console.error(ex.message); }

function actions(initsimu, ui, connexion, domReady, encaissement, validate) {

// do stuff

}

I manage to make things work, but is that correct ?

A note to what I see in the DOM after all that : only bootstrap.js is not async.

I tried a lot of possible ways to load bootstrap (version 2.2.1), but doing as I did way the only it worked (the factory option was a bit lucky for me).

Thank you for your help guys, and Bravo for these great tools!

Regards,

Johan Chouquet

[unscriptable]

Hello Johan,

My responses are inline...

On Wednesday, January 15, 2014 9:36:20 AM UTC-5, Johan Chouquet wrote:

Hi all,

I'm interested in understanding the very basics of async scripts/files loading. In fact, I'd like to understand what I see in the Chrome web developer tools, on Timeline tabs.

I am currently interested in those topics, because I was using curl to load asynchronously my scripts : 5 smalls legacy scripts which I managed to convert to AMD modules. Then, I tried to look how those scripts were loaded in the Timeline of Chrome Debug Mode : I was expecting to see them loading in parallel, the async thing. But, instead I just saw them loading one after another. Maybe this can happen when scrips are to small (they're between 1 Ko and 5Ko)? They're not, at this moment, minified nor concatenated. See that image :

This happens when curl.js (or any run-time loader) discovers the dependency graph and the dependency *graph* is more like a *linked list*.  I'm guessing the there are exactly one dependency per module?

If you use cram.js to create a single bundle, you'll only see one HTTP request, of course. :)  It can be a pin to have to compile a bundle during development, so most developers only create it just before deployment to production or QA.

The .next() API is discouraged.  It was added as a work-around when there were no other solutions to fix some dependency problems.  It's better to make your dependencies explicit.  If any of your modules depend on bootstrap (either explicitly in javascript or implicitly), you should specify it in the dependency list.

Again, at dev time, it's ok to see a non-ideal network timeline.  It's all so fast when working against a local web server.  It's typically easier than creating a bundle every time you make a change.  However, you can decide to use either method, of course!

 

A note to what I see in the DOM after all that : only bootstrap.js is not async.

I tried a lot of possible ways to load bootstrap (version 2.2.1), but doing as I did way the only it worked (the factory option was a bit lucky for me).

Your factory trick for stopping curl from complaining about bootstrap is awesome. :)  I usually look for a component that bootstrap typically adds to jQuery: 

exports: "$.fn.tooltip",

 

Thank you for your help guys, and Bravo for these great tools!

Thanks!

We're experimenting with a tool that could eliminate the AMD config.  You'd have to use bower or npm, though.  It's very early.  It'll be a few weeks before it's ready to test.  Interested?

-- John

[Johan Chouquet]

Hi John,

Thanks for your answer.

For the modules I wrote, almost all of them have only one dependency indeed, maybe one has none (the last one I think).

If I use cram to make a single bundle, what I don't see is : what content will be in this bundle ? I saw that cram was able to make a full web application into a single bundle, so does that mean that there could be html files in that bundle ?

In my case, if I use cram, I'll have one bundle containing one (and only one) module? or will there be all my modules in the bundle ? By looking at the cram docs on github, I've been able to understand a little bit more what that does, but I miss a global understanding, because there are quite a lot of flexible things that cram allows you to do. But I believe that with wire (another one component I want to watch closer), curl + cram + wire can do amazing things!

Regards,

johan

[Johan Chouquet]

By the way, I'm interested in testing that tool you talk about !

Regards,

Johan

Le jeudi 16 janvier 2014 18:01:00 UTC+1, unscriptable a écrit :

[unscriptable]

Hello Johan,

Of the many things cram.js does, the most important is that it transforms anonymous modules into named ones.  Anonymous modules are the preferred form when working with individual files.  However, you can't combine many anonymous modules together in one file because the loader can no longer distinguish between modules.  Modules in a bundle must be named.

Yes, you can embed text files (html snippets or templates, for instance) as well as localization bundles and css files into the bundles.  You use the text! plugin to load text files at load time and to embed text files at build time.  Use the i18n! plugin for localization files and use the css! plugin for css stylesheets.

-- John