jQuery vs Prototype – WordPress Gone Astray?

hannah — Thu, 04 Jan 2007 19:41:35 +0000

WordPress 2.0 essentially marked the final leap of the WP team in joining the Web 2.0 bandwagon… We have a big friendly typeset, drag-and-drop widgets, AJAXified posting and moderating tools. And with 2.1, we will be getting a JavaScript framework.

This doesn’t mean much to the average WP user, but to developers, its huge. Every time a WordPress blog loads, the viewer is now downloading a 48kb nugget of JS – the Prototype Framework. So as a developer – if I want to make a shiny 2.0′ish plugin, I’ve got to use Prototype as a backend. Or I have to force everyone to use something else, of questionable compatibility, which will add yet more bulk to WP. Alex King has embraced Prototype with his Share This plugin. I’m sure others are soon to follow. But to be honest, I can’t see why the whole community isn’t throwing a colossal fit and threatening to dunk the WP dev team in a nice cold lake.

I admit, I’m biased. I’ve been developing sites with the JQuery framework for 4+ months now. Back in August of 2006 I realized that all this AJAX/2.0/Rails/Blah nonsense wasn’t going to fade away, so I best bite the bullet and learn what all the hype was about.

So I looked at Prototype, Scriptalicious, Ruby, Rails, read about AJAX… posted a forlorn “help me, i’m drowning…” message on the Apple web dev mailing list, and got one very short reply: “JQuery. I’ll see you on their dev list soon ”

Prototype does some nice things for you, don’t get me wrong. But Prototype on its own still requires a lot of down-and-dirty javascripting PLUS a learning curve of Prototype syntax, functions and classes. Ick. JQuery, however, does many simple and not-so-simple tasks for you with only a line or two of code. Sure, there’s a learning curve, but at least there is a nice juicy carrot at the end. I don’t want to do loads of down-and-dirty scripting. This is why I looked for a framework in the first place.

There are a variety of examples of how JQuery uses cleaner, more logical, shorter code on the JQuery blog itself. These are a little technical though, and I wanted to provide a quick glimpse that might be more relevant to Plugin Developers:

So you want to hide and show a div, and you want it to slowly fade in and fade out when you toggle the hide/show.

JQuery (library weighing in at 20kb):

$(“#ohmy”).show(“slow”);

Prototype (48kb on its own) can’t do this. We need to add Scriptaculous + Prototype, which has a combined bulk of 228 kb!

Effect.toggle(‘ohmy’,'appear’);

Okay… Other than the added size and extra includes, this doesn’t seem all that bad. But what if we don’t want to add an onclick=”javascript: blah” to every scripted element?

JQuery (20kb):

$(“.toggle”).click(function(){
$(#ohmy).hide(“slow”);
return false;
});

Prototype (48kb on its own) can’t do this. Scriptaculous + Prototype (228kb) can’t do this either. We need Scriptaculous + Prototype + Behaviour, weighing in at 236kb

var myrules = {
‘.toggle’ : function(element){
Effect.toggle(‘ohmy’,'appear’);
}
}
};
Behaviour.register(myrules);

NOTE: As Nate pointed out, this is wrong. The $$(‘.toggle’) function will work just fine. However, I’m leaving the Behaviour example up to illustrate what a fairly savy coder, new to ProtoType, was able to come up with in 2+ hours of research.

Doing something a little more advanced… odd/even ‘zebra’ tables without php overhead:

(this one was pulled from the JQuery blog)

JQuery (20kb):

$(“tr:nth-child(odd)”).addClass(“odd”);

Prototype (48kb):

$A(document.getElementsByTagName(“table”)).each(function(table){
$A(table.getElementsByTagName(“tr”)).each(function(row,i){
if ( i % 2 == 1 )
Element.addClassName( row, “odd” );
});
});

So… JQuery: Get stuff done with less code! For 1/11th the size of prototype+scriptaculous+behaviour, JQuery provides tons of USEFUL stuff built in, no need for additional overhead libraries.

That’s my perspective. I don’t *LOVE* to code for the sheer joy of it. I DO love to see my ideas and visions become reality. I like pretty gadgets, including those that are browser-based. I think this is where many of the WordPress plugin/extension developers are coming from – we want more shinys in our blogs! Thus far, WordPress has done a PHENOMENAL job of making plugin development simple, logical, and intuitive. I picked up WP Plugin syntax in about an hour. Why ruin the ease-of-extension movement now?

And if you want to try JQuery with WordPress… Head on over to Dan Atkinson’s site for his JQuery with WP Plugin

islandgrl.net » wordpress

jQuery vs Prototype – WordPress Gone Astray?

So you want to hide and show a div, and you want it to slowly fade in and fade out when you toggle the hide/show.

Okay… Other than the added size and extra includes, this doesn’t seem all that bad. But what if we don’t want to add an onclick=”javascript: blah” to every scripted element?

Doing something a little more advanced… odd/even ‘zebra’ tables without php overhead: