RequireJS: Asynchronous JavaScript loading

18 Mar 2010

A certain someone was talking to me about how they find it interesting that node.js, the JavaScript server framework du jour which loves all things async, starts life with a bunch of synchronous require() calls. Now, this is actually quite fine since the startup of the server is not the issue at hand.

However, if you are running require()-esque loader code in the browser you want to avoid blocking calls else Steve Souders will come over and beat you up.

I have seen a couple of interesting items in this area:

RequireJS

James Burke of Mozilla Messaging has spent a lot of time in the depths of dojo.require(). He has taken another look at the problem and RequireJS a solution that offers:

some sort of #include/import/require
ability to load nested dependencies
ease of use for developer but then backed by an optimization tool that helps deployment

He walks through the problem and why other solutions like LABjs, CommonJS require, and Dojo itself don’t cover all of his bases.

The end result is:

PLAIN TEXT

JAVASCRIPT:

// code that runs asynchronously when the library is loaded
require([“some/script.js”], function() {
//This function is called after some/script.js has loaded.
});
// defining the module and dependencies
require.def(
// The name of this module
“types/Manager”,
// The array of dependencies
[“types/Employee”],
// The function to execute when all dependencies have loaded. The arguments
// to this function are the array of dependencies mentioned above.
function (Employee) {
function Manager () {
this.reports = [];
}
// This will now work
Manager.prototype = new Employee();
// return the Manager constructor function so it can be used by other modules.
return Manager;
}
);

Google Analytics “async add to []” Pattern

When talking to Davis Frank of Pivotal about some Google Analytics code, he pointed me to details about the new GA asynchronous loader that we very excitedly blogged about since GA was such a blocking offender on the Web.

Part of the asynchronous API is that you, the developer create an array, and use the push() method to put commands on a queue. This means that you can start pushing commands immediately.

Then, when the GA code loads asynchronously, it takes over that array and wraps those standard methods. Now it can take the commands and fire them back to GA and push() can do more. Freaking brilliant.

Go to Source

Tags: end result, issue at hand, james burke, nbsp nbsp nbsp nbsp nbsp, optimization tool, prototype, server framework, souders, text javascript

2 Responses to RequireJS: Asynchronous JavaScript loading

Ann F

April 2nd, 2010 at 11:19 pm

polar bear, i do not think the republicans understand the issue
at hand here on the economy. i too am not too big of a fan of
the stimulus package. republicans will argue big spending in
the past has not always helped us get out of recessions.
instead the will point out to the policies of lyndon johnson,
big spending, the great society and what they deem its failure.
personally though i am inclined to agree with you. tax cuts
and 8 years of war have not helped the economy, maybe
big spending will, we are running out of time and options.

sexrex

May 20th, 2010 at 8:35 am

wow

Programming Blog

RequireJS: Asynchronous JavaScript loading

2 Responses to RequireJS: Asynchronous JavaScript loading

Comment Form

About this blog