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):
Prototype (48kb on its own) can’t do this. We need to add Scriptaculous + Prototype, which has a combined bulk of 228 kb!
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):
$(#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
‘.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):
Prototype (48kb):
$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
17 Responses to “jQuery vs Prototype – WordPress Gone Astray?”
Leave a Reply
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.
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!
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.
Nice article… I’m just diving into jQuery myself… using it on one client project, and my current wordpress blog…
Sad thing was that after getting my jQuery functions working, the elements from lightbox and the k2 theme functions for advanced archive and ajax search are blown up…
going to have to do some investigating on that one… but I was able to integrate a cool jQuery element for the social bookmarking section of posts, and was really happy that it went together so smoothly despite errors with the other stuff caused afterwards…
I enjoyed reading what you had to say. I actually hit your site randomly from google and kept reading all of the posts. Really interesting writing style.
Thanks again.
The only reason you have cleaner more logical code from these bloggers is because they DONT know how to properly use Prototype. If you compress your code Prototype is 15kb (thats all thats needed for that shotty code example they posted). If you add Prototype+Scriptaculous (Full) they will be at 32kb. If you take jQuery+Interface (scriptaculous equiv) it is 40kb).
You can do the same things in Prototype just as clean, logical, and short.
The author of this blog didn’t even bother going to Prototypes homepage and looking at the huge amount of Documentation and API available. This is just misinformation at its best.
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.
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.