We’ve been working pretty hard on CNET’s new javascript global framework. It’s based on Mootools with a bunch of other things mixed in. Last week I took on the task of documenting the entire Mootools library, now online. I struck up a conversation with the author of that library, Valerio Proietti from mad4milk.net and have since been granted access to contribute to the source of that library (thanks Valerio!). Mostly my contributions have been focused on the docs, but I’ve also helped out with a few bugs and the like.

Anyway, one of the things that Mootools turned me on to was Dean Edward’s /packer/, which is an awesome javascript compression tool. This thing compresses our libraries dramatically, sometimes as much as halving their file size. We’ve actually put our new global libraries into production on news.com and I just got around to actually testing the efficiency of the compression algorythm. Read the rest of this entry »

Huh. So this was eaiser than I thought.

In the Download.com Watch List profile page we use the Behaviour library to define a bunch of functionality (er, I mean “I use…” as I wrote all this over a year ago). We’re going to replace Prototype with our new framework (based mostly on Mootools). Behaviour will work in the environment, but it’s 8K that I don’t really want to keep around. So, what the hell, let’s try and rewrite it with Mootools. Well, here it is:

var BehaviourBaseClass = new Class({
	initialize: function(){
		this.behaviours = [];
		var bhvr = this;
		Event.onDOMReady(function(){bhvr.apply()});
	},
	register: function(actions){
		if(! this.behaviours.test(actions))
			this.behaviours.push(actions);
	},
	apply: function(actions) {
		if ($type(actions)!='array') {
			actions = this.behaviours;
		}
		actions.each(function(bhvrs){
			for (bhvr in bhvrs){
				try {
					if($type(bhvrs[bhvr])=='function') {
						$S(bhvr).each(function(el){
							bhvrs[bhvr](el);
						});
					}
				} catch(e){}
			}
		});
	}
});
var Behaviour = new BehaviourBaseClass();

…which compresses down to 425 703 Bytes. Not bad.

Update
Ok, so I rushed to press a little. This code didn’t work when I put it into place. I fixed it, but that brought the file size up to 703 Bytes instead. Still, it’s a 10X reduction…

Here’s a short little description of how to use labels, breaks, and continues to cut down on loop iterations and speed up your code.

Just a quick reminder that you can drastically cut down on loop iterations by using the break and continue commands, and that there is an option to label loops to allow nested loops to stop their parents from iterating.

Unlike almost every other programming environment, javascript has one big drawback: you have to deliver it to the client. This can result in a big payload of code you’re dropping on your user and there isn’t a whole lot you can do about it.

You can lazy load the javascript so it’s only on demand. You can optimize your code as best you can so that functionality that’s not really needed isn’t present, and other functionality is written as succinctly as possible. You can set up your server to deliver the javascript g-zipped if the browser supports it.

But one simple thing you can do is just delint your code – remove all the tabs and comments and line breaks. It makes for unreadable files, but you just keep a marked up version and a compressed version. For example, Andy Lottmann took the prototype library and knocked it down from 55K to 35K or so. Read the rest of this entry »

There are several examples of the concept of “lazy loading” out there. Dojo is probably the most well known, but the thing I don’t like about Dojo is that the initial include is so expensive (127K!!! – and that’s before you include any widgets).

While digging through ajaxpatterns.org I found this entry on On-Demand Javascript that outlines the concept really well, illustrates how one would implement it, and also points to a couple of implementatins already out there (including Dojo). It’s worth a quick read, especially as we start considering standardizing some of our code libraries. Read the rest of this entry »