i am dustin diaz

jQuery wins the Event Selector Showdown

Having come across this blog post on the jQuery Blog, I was immediately fascinated by the amount of effort library developers are putting into language philosophy. With only a few characters of code, jQuery was able to bind events to two sets of list groups that would set the style of the element you clicked on. Indeed, I was most definitely impressed and wondered to myself how I could get this done with Yahoo! UI utilities.

Sweet! But why?

So we saved a couple lines of code. For the sake of chipping into the group I added a comment displaying how we can get this same thing done with the Yahoo! UI DOM and Event utilities.

YUI Challenge

YAHOO.util.Event.on(

	[YAHOO.util.Dom.get('item').getElementsByTagName('li'),YAHOO.util.Dom.get('otheritem').getElementsByTagName('li')],

		'click',function(){ YAHOO.util.Dom.setStyle(this,'color','#c00'); });

The fact of the matter is, although YUI doesn't win the Event Selector battle, you have to take into account that that's not what it's out to do. The jQuery is definitely smaller because it uses the '$' dollar symbol as a namespace, which is, sexy by appearence; but not always practical.

One thing to note about YUI utilities is that it's not here to change the way you think about writing JavaScript, and as a matter of fact you'll find it very dissimilar to libraries like Prototype, Behavior, Event:Selectors, or jQuery. But rather YUI takes out the cross-browser heavy lifting so you don't have to (which other libs do too). It comes with class management, style getting/setting, batching, getting Elements by "whatever", and a few others... and that's just in the DOM util. The Event utility also takes out some heavy lifting with a few other features that most other utilities haven't dug into with perhaps the exception of Dojo which is customEvents.

What gives with the YAHOO namespace?

One common complaint you might hear about YUI is that everything is YAHOO.foo.bar.MyDaddyCanBeatUpYourDaddy. Fair enough. It's not quite as sexy looking as the dollar symbol - but in practicality, it's for your own good. You really should be thanking the team that they've done that for you since it is very unlikely that Yahoo! code is ever going to clash with yours (ok, no need to "thank," but just know that it's a good thing).

It allows for better code organization and it keeps a visual hierarchy of how the libraries are laid out. If it's a utility, expect it to live under YAHOO.util, if it's a widget (not to be confused with Konfabulator), expect to find it under YAHOO.widget. Likewise if has something to do with Ajax, expect to locate it under YAHOO.util.Connection. Make sense?

Unlike Prototype.js, you may have to worry about collisions such as Event, Element, or Ajax; all of which live under the global namespace. But I'm sure that's nothing Sam Stephenson hasn't got flack for before - not to mention it doesn't stop people from using it anyway. Indeed, I'm still using Prototype for my UDASSS script, but soon enough, I will be changing my ways. All in all, the choice is up to the developer. Use what you're most comfortable with.