Packages JS

I find that javascript tends to entangle and form spaghetti code, almost by itself. One of the reasons this happens is the language’s lack of decent package management support. I know, it’s underway in the form of Javascript 2.0, but with the current, extremely low, rate at which IE has been improving it’s Javascript support, I’m afraid I’ll have grown a very long white beard before I’ll ever be able to use it in a real life project… So, without further ado, let me present:

Packages JS

Packages JS is my personal stab at a framework for modular javascript. Others exist and I toyed with some. I still decided to build one myself, because the others where all part of some library or just too complex for my liking. They supplied package management to the library and to users of the library, but I only want the package management stuff itself, not the whole library. I wanted something small, just a few K, in a single file, with an API with a very small surface area, that did package and dependency management for me in a transparent way and that let me easily create my own packages.

Packages JS does just that. Currently, the file is 9 KB. That’s the fully commented version. Once run through Packer that’s shrunk to just 3KB. The API has a very small surface area, just two functions:

function Package(name, dependencies, callback)
function Export(name, object)

That’s it. You specify the name of your package and place it in a file named correspondingly, you specify the packages and objects that you depend on and you place your code inside the body of a callback function, which you supply as the third argument. Packages JS will load your dependencies and call the callback when they are ready. Your package can then create functions and objects and export these for use in other packages.

Here’s what packages look like:

Package("my.lib", [], function() {
  // code without dependencies
  function myFunction() {
    alert("my function!");
  }
 
  Export("myFunction", myFunction);
});

And in another file:

Package("my.site", ["my.lib"], function(myFunction) {
  // you can use myFunction here
  myFunction(); // alerts "my function!"
});

Behind the scenes, as soon as our package is included in the page, Packages JS will save the callback function for later reference and check for each of our dependencies whether a script element pointing at that package is present in the head section of the page. If not it inserts a new one, thus loading the required package. It then checks wheter any of the loaded packages has no open dependencies. If so, it invokes those packages’ callback functions. Once a callback completes Packages JS registers the package and removes the open dependency that other packages might have to it from their dependency lists. This in turn causes new packages to have all their dependencies fulfilled, until finally all of them have loaded and ran in the right order. The code for this is actually surprisingly simple.

Visit my test page to learn more.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s