islandgrl.net

Wp-2.0-Square-ButtonWordPress 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” );
});
});

Jquery-LogoSo… 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

7 comments

7 Responses to “jQuery vs Prototype – WordPress Gone Astray?”

  1. noris says:

    Im favour for jQuery too. I think what makes jQuery relevant to current web2.0 ish is the ability for css designer to code advanced java scripting as part of the design not to mention the use of css selector as the jQuery object makes us, designer, a born JS programmer.

    Just my two cents.

  2. Schein says:

    I hear WP is moving away from Prototype and accepting JQuery as their javascript language of choice, going forward. BTW- that nice feature of breadcrumbing at the top of the post when I came from a Google search…is that your creation? Is that a WP plugin? thanks!

  3. _ck_ says:

    jQuery is actually nearly 60k, not 20k

    If you use the packed version, it has to unpack itself everytime a visitor loads a page off your website, even if it’s cached.

    Better to use unpacked version and gzip web compression. Much faster and will cache properly without any additional browser execution/memory overhead.

  4. Nader says:

    I like JQuery. A day to learn is not that bad at all. But now Mootools is striking back. They have pretty nice features. I wish they all agree in one model and make it easier for us to integrate and build.

  5. Ryan Boren says:

    Prototype is only really used for AJAX right now. We’ll probably be switching a lot of stuff to jQuery in 2.2. jQuery is already in trunk. Plugin and theme authors will still be able to request that prototype be loaded via the script loader. We’re not religious about what libraries plugin authors use.

  6. While I have to agree with you, I would say your example of having to add behaviour.js is completely wrong.

    Prototype has a function called $$() which you can use like so:
    $$(‘.toggle’)

    Prototype is a great conceptual library, and while I think it does a great job of making Javascript look more like Ruby, I think jQuery will succeed in the end because there are more people who know CSS and want to use Javascript, than there are Ruby developers who want to use Javascript.

    jQuery brings JS to the (web-dev)masses, whereas Prototype makes Javascript easier for Ruby programmers.

    Not to crap on Prototype at all, though. It is a great library, but jQuery is superior, IMHO, and the reasons why I layed out here: http://www.alterform.com/news/prototype-vs-jquery

  7. wagthis.com says:

    geekgrl.net » jQuery vs Prototype – WordPress Gone Astray…

Leave a Reply