Prototype vs YUI Round 1 - OOP Architecture

First, lets make sure we are all using the same Framework versions, because these teams have been cranking out frequent changes. This discussion will use the stable release of Prototype 1.5.1 and YUI 2.2.0. This article will analyze the speed of creating small dummy objects to get an idea of which approach is better.

Before, starting, Id like to take a moment to thank the YUI guys for following rigorous coding standards and well documenting their code. I dont know what high-horse the Prototype guys are riding, but there code is sloppy and it doesnt compress well. Consequently, I have taken some time to clean up the prototype code (added semi colons, used short-hand notation, and ran jsmin): uncompressed and minified.

In the Prototype Framework you create objects using the Class.create() function. This modifies the instantiation of your object, so that it will execute the initialize function you attach to the prototype of your object with all the variables passed into the constructor. It is difficult to explain in words, here is an example:

Example 1: Prototype Class.create()

var PrototypeObject = Class.create();
PrototypeObject.prototype = {
	initialize: function(v1, v2) {
		// my initialization code
		this.v1 = v1;
		this.v2 = v2;
	},
	testFunction: function() {
		alert(this.v1);
	}
};
// to use
var someVariable = new PrototypeObject(v1, v2);
someVariable.testFunction();

The someVariable object will contain all the functions and variables attached to PrototypeObject.prototype, including the initialize function. When using the Prototype OOP Architecture, I often design the initialize function so that it can be called again later to reset the object. Example 1 also illustrates how variables are passed through the constructor to the initialize function. There the constructor parameters are added to this so that other functions, like testFunction can access the v1 variable. You can augment these Prototype objects indefinitely, and do any number of customizations. However, I find that as they become larger they are often difficult to follow.

In contrast, for the YUI Framework promotes the Module Pattern, where you create objects by executing a function that contains private-like variables accessible only in the function context or through closures in a returned object. Again, difficult to describe textually; here is an example:

Example 2: YUI Module Pattern

var YUIObject = function(v1, v2) {
	return {
		testFunction: function() {
			alert(v1);
		}
	}
};
// to use
var someVariable = new YUIObject(v1, v2);
someVariable.testFunction();

Example 2 achieves the same functionality as Example 1. The constructor call executes the function YUIObject, passing in two variables. The functional context of YUIObject now has access to variables v1 and v2. Then the function returns an object, which is stored as someVariable. The testFunction has access to v1 because of a closure created when the function is defined. I find this architecture easier to read and simpler to use, so most of my code uses a similar pattern. The downside is that we arent using prototype, so each instance of a Module Pattern object will need to redefine functions. Also, poorly defined closures, with circular logic can leak memory in older browsers.

To wrap up our discussion, I have created a page where you can compare the run times of the different instantiation. Unfortunately, JavaScript run-times are not very accurate and depend on the browser and available CPU cycles of your computer. After running this test times in various browsers, I can summarize that on average the initialization of the YUI-type Objects is 35-45% faster than the Prototype Objects. Although, the difference is only fractions of a millisecond, so it only becomes noticeable when creating thousands of Objects.

http://mattsnider.com/PrototypeVsYUITest.html