Leveraging JavaScript Frameworks to Make Your Life Easier

Framework Preface

Are you a hardcore JavaScript/AJAX programmer who knows no bounds? Do you spend meticulous hours perfecting your code so it works on all browsers? I used to be like that. I still am, but the only difference is that I now don’t spend hours testing my code. This is mostly attributed to the Prototype framework. Today I’m going to go through a few features and benefits of using a JavaScript framework over writing custom code yourself which may require testing and re-testing. Of course there is still the need for testing even when using a framework, but the difference is that there will be a lot of cross-browser compliance which is no longer needed.

There are other frameworks out there like jQuery and MooTools, but today we’ll start with what I’m more familiar with and with what I first started with. The documentation for Prototype is very thorough and I don’t want to explain everything, so I’ll start off with the major items which will change your JavaScript programming life!

JavaScript Framework? Double you tee eff?

You’re asking the right question. For the longest time I was always stuck in my own little JavaScript world where everything I coded was job-specific, customized, and with my own techniques. There were also little quirks which JavaScript had when rendering/running under different browsers/operating systems–these too were also solved using my own super secret techniques. What Prototype does, as well as other JavaScript frameworks, is give you the simple building-blocks which solve those quirks without you even needing to address them specifically. For example, if you want a div element to show or hide, you simply select the element and program the action. Sounds simple, but selecting that element requires some browser detection and compatibility verification. Let’s make a couple comparisons..

Make your life easier

Continuing on with the previous example, let’s select that div element given the following markup:

<div id="copy">
	<p>Lorem ipsom dolor sit amet</p>
</div>

We’re not going to think of any invokers right now, let’s just try to hide the div. Here is what the JavaScript may have looked like prior to using Prototype:

var objDivId = 'copy';
objDiv = document.layers ? document.layers[objDivId] : document.all ? document.all[objDivId] : document.getElementById ? document.getElementById(objDivId) : null;
objDiv != null ? objDiv.style.display = 'none' : '';

Obviously this isn’t the most efficient way of doing this, ideally I would create a function, but this is the shortest of shorthands to select and hide the div element while respecting all web browsers. Now let’s have a look at how this would look using the Prototype framework:

var objDivId = 'copy';
objDiv = $(objDivId);
$(objDivId) ? $(objDivId).style.display = 'none' : '';

For this example, the difference is quite apparent. By using the $() utility method we can quickly select that div element without the worry of what browser is being used. Now, let’s see what happens when we try to hide more than one element. First here’s the HTML markup:

<div id="copy">
	<p>Lorem ipsom dolor sit amet</p>
</div>
<div id="button">
	<p>This is a button</p>
</div>
<div id="preview">
	<p>This is a preview section</p>
</div>

I’m going to create a function to hopefully help the cause of the traditional JavaScript code and see how it compares to using Prototype. First the oldschool method:

function getObject(id) {
	return document.layers ? document.layers[id] : document.all ? document.all[id] : document.getElementById ? document.getElementById(id) : null;
}
var objDivIds = new Array('copy','button','preview');
for (var i=0; i<objDivIds.length; i++) {
	objDiv = getObject(objDivIds[i]);
	objDiv.style.display = 'none';
}

And now the code for doing the same thing using Prototype:

$('copy','button','preview').invoke('hide');

Say what!? Yeah, it’s that easy. The traditional method utilizes a function which will return the object instance. We then iterate through the three div elements and update each one individually.

In the Prototype version, we’re using a couple of included extensions. First, the selector $() utility method returns an Enumerable list of objects, and the hide function is invoked across all of those objects. Easy fo-sheezy.

There are also other ways of selecting multiple elements within a page. You can do this by applying some CSS knowledge. For example, let’s attach a tracking script to all of the links within a page. We want to first select all of the A elements, then iterate through them by adding a short querystring tag to it’s href attribute.

var _TAG = '?source=buyco.ca';
$$('a').each(function(objA) {
	var url = objA.getAttribute('href');
	objA.setAttribute('href',url+_TAG);
});

This time I’m using the $$() utility method which will select a collection of elements. It takes in CSS-style selectors, such as: ‘a.external’ (select all a elements with the classname external), or ‘div#nav ul li’ (select all list items in the div with the id of ‘nav’). The full documentation on this can be found on the Prototype API documentation website.

Post face?

These are two short examples of a few things you can do (quicker) by utilizing a JavaScript framework. You will spend less time focused on browser compliance and more on the functionality and interactivity of your websites. It’s not a quick transition, but practice does make perfect! The documentation on the Prototype website is awesome, and I still find myself going back to learn new things. The main point I’m trying to get across here is that there are tools out there to make our lives (as web developers) a whole lot easier. Don’t get stuck in a place where you’re too comfortable or you’ll end up writing IE6-compliant code forever. Spend your time on more important things like user-experience, and wicked-awesome-flashy-effects. Your site visitors will thank you:)