Monday, April 14th, 2008

using.js: manage JavaScript dependencies

Category: JavaScript, Library, Performance

<p>Jon Davis created Using.js, a simple library to manage dependencies with the goals of:

  • Seperate script dependencies from HTML markup (let the script framework figure out the dependencies it needs, not the designer)
  • Make script referencing as simple and easy as possible (no need to manage the HTML files)
  • Lazy load the scripts and not load them until and unless they are actually needed at runtime.

To use the script you simply:

javascript
< view plain text >
  1. // potential scripts are pre-registered first
  2. using.register("jquery", "/scripts/jquery-1.2.3.js");
  3.  
  4. // later, when actually needed
  5. using("jquery"); // loads jQuery and de-registers jQuery from using
  6. $("a").css("text-decoration", "none");
  7.  
  8. // or asynchronously
  9. using("jquery", function() {
  10.   $("a").css("text-decoration", "none");
  11. });

As we see more and more tactics for getting performance by doing tricks with when scripts are loaded, I expect to see more of libraries like this. The key is working out exactly what script needs to be loaded right away, after the DOM is around, and what can wait for later. How do you want to load the script? Dynamic script element? Via iframe? XHR + eval? They all have pros and cons.

Related Content:

4 Comments »

Comments feed TrackBack URI

Looks a whole lot like YUILoader and the YAHOO global object’s register method. :-)

Comment by arapehl — April 14, 2008

For most sites, stuff like this would actually detract from the user experience, as you impose extra delays, after the user has begun using the site / app.

And, it even adds more complexity to your code.

But, under the right conditions, I suppose it’s great.

Comment by MorganRoderick — April 14, 2008

@arapehl: You missed the point; the footprint of using.js is 4kb.

@MorganRoderick: There will only be one extra delay per library that hasn’t been loaded, and that delay only occurs once. This is the same delay that occurs when the user hits the page; it is only lazily loaded. Ultimately, it’s up to the developer and scenario to determine whether this is feasible UX or not.

Comment by stimpy77 — April 14, 2008

I agree with stimpy77. A lot of sites need something lightweight that can pull in code from multiple sources, without fully buying into a single framework.

I currently work at Instructables.com, and we wrote a GPL’ed library called JSLoad that does a similar thing. It’s been working beautifully on IE, FF, and Safari for almost a year now, serving about a million page views a day.

One difference between using and JSLoad seems to be that the dependencies are managed centrally by a JSLoad singleton; we work with many existing libraries and scripts, and adding dependency code to files we didn’t create seemed like a maintenance and upgrading headache.

JSLoad was also written with flexibility in mind. Dependencies come in the form of “tags”, which allows for all kinds dependency structures that are independent of the js files themselves. This was very useful since I was handed a good amount of legacy code when I started; JSLoad allowed me to encapsulate the code according to initial guesses and refactor for efficiency and maintainability over time.

Here’s the link JSLoad.

Comment by ericnguyen — April 14, 2008

Leave a comment

You must be logged in to post a comment.