evanculver.com

jQuery $.live() Equivalent in YUI 3

It’s been a while since I’ve posted and since I started at Yahoo! so I figured I’d give a little love to the new toys I’ve had the pleasure of playing with as of late. Clearly, we’re using YUI here at Yahoo! and because of that I’d had to adjust my thinking on a few goto front-end techniques that I relied on jQuery for. I hope to post more on these adjustments I’ve had to make, but we’ll see.

Aside from general patterns involving YUI loader, a major jQuery feature I realized that I had come to rely on is jQuery’s $.live() method.

Let’s say I have some markup like:


<div id="wrap">
    <span id="button">Click Me!</span>
</div>


That’s being dynamically inserted into the DOM.

I got pretty used to doing something like:


$("#id").live("click", function() {
    // do stuff
}


Super handy, but not exactly the best performance-wise. If you read the jQuery documentation (or even the jQuery source), you’ll soon find out that what’s going on behind the scenes is an implied event delegation to the root of the DOM. But, not to get too far off topic, there’s a lot of overhead that comes at the expense of this convenience.

YUI provides the same sort of functionality, albeit in a more explicit fashion via the Event delegate() method. I personally like the design decision that was made by the YUI team considering the performance hits that can be involved with using jQuery’s live method incorrectly, but to be completely fair, you can’t really mind the cleanliness of jQuery’s API. Anyways, you can always read the YUI 3 Event docs, but the above simply becomes:


YUI().use('node', 'node-event-delegate', function(Y) {
    Y.one('#wrap').delegate('click', function(e) {
        // do stuff
    }, '#id');
});


I really like the cleanliness of jQuery, but sometimes, you gotta make a little lemonade outta the lemons you were given, even if they’re a little bit rounder and less yellow than the ones you’ve seen before.

There are definitely some caveats in the jQuery way of doing things as well as in YUI, but I feel like it’s a whole lot harder to screw it up in YUI.

Now, go try it yourself.

Tags: code, delegate, event-delegation, javascript, jquery, live, yui

a brief comparison of JS frameworks

I’ve recenly taken it upon myself to re-evaluate the tradeoff’s between some of the more popular javascript frameworks in an effort to choose one for a site re-write. I had previously been a fan of the YUI Ajax abstractions, but wanted to explore why people like Ryan Johnson of Aptana and LivePipe.net fame were so pumped about Prototype for instance. So I took a simple example of implementing a fadeIn/fadeOut effect in 3 different frameworks (MooTools, jQuery, YUI) to show how these frameworks’ handle something like front-end effects. So, check it out…

MooTools code (documentation)

	// do fade in
	if(!elementVisible) {
		var div = $('eId').setStyles({
			display:'block',
			opacity: 0
		});
		new Fx.Style(div, 'opacity', {duration: 1000} ).start(1);
		elementVisible = true;
	}
 
	// do fade out
	else {
		var div = $('eId').setStyles({
			opacity: 1
		});
 
		new Fx.Style(div, 'opacity', {duration: 1000} ).start(0);
		inlineLoginActive = false;
	}

YUI code (documentation)

	// do fade in
	if(!elementVisible) {
 
		// set up the animation
		var fadeIn = new YAHOO.util.Anim('eId', {
			opacity: { to: 1 }
		}, .8, YAHOO.util.Easing.easeOut); 
 
		// set it to block but make it 'see-through'
		$('eId').style.display = "block";
		$('eId').style.opacity = "0";
 
		// now slowly change the opacity
		fadeIn.animate();
 
		// reset state
		elementVisible = true;
 
	}
 
	// do fade out
	else {
		var fadeOut = new YAHOO.util.Anim('eId', {
			opacity: { to: 0 }
		}, .8, YAHOO.util.Easing.easeOut);
 
		// make sure the element is not 'see-through' already
		$('eId').style.opacity = "1";
 
		// now slowly change the opacity
		fadeOut.animate();
 
		// reset state
		elementVisible = false;
	}

jQuery code (documentation)

	// do fade in
	if(!elementVisible) {
		// magic
		$('#eId').fadeIn("def");
 
		// reset state
		elementVisible = true;
	}
 
	// do fade out
	else {
		// magic
		$('#eId').fadeOut("def");
 
		// reset state
		elementVisible = false;
	}

Its pretty clear that jQuery takes the cake with dealing with this particular effect. But, the thing is, its built-in effects library is pretty extensive where as MooTools and YUI lack a bit. If I’m not wrong, one major contributing factor to a framework’s success is its abiltiy to provide the means to easily implement new effects and features let alone have them conveniently packaged all together, so it seems that jQuery and MooTools succeed here, where YUI makes a stronger effort at providing specific abstractions and “widgets”. For effects I choose jQuery, easy to extend/massage, yet packages many base effects out of the box.

I also mentioned that I liked the YUI Ajax abstractions, but… after playing around a bit, jQuery continues to impress with its various abstractions for specific purposes such as retrieving and injecting responses right into the DOM (Ajax/load). Previously, I just had a convenience method in YUI to do the same:

function getHTML(url, data, toUpdate) {
	var handleSuccess = function(o){
		if(o.responseText !== undefined){
			$(toUpdate).innerHTML = o.responseText;
		}
		else alert('Sorry, there was an error, please try again.');
	}
	var handleFailure = function() { alert('Request Failed'); }
	var callback = { success:handleSuccess, failure: handleFailure };
	var request = YAHOO.util.Connect.asyncRequest('POST', url, callback, data);
}

MooTools janks on this a little. It’s still very straightforward, but I found myself writing 3 methods per action, to keep the code cleaner, instead of the aforementioned callback definitions within the YUI method. Just seems cleaner, but as any coder knows, there are clean ways to do everything. This is what leads me to the real meat of it all. These frameworks all provide an adequate means of manipulating the DOM, implementing fancy Fx and abstracting ajax operations, but the ease of learning your way around the framework is what’s most important, and that is determined by the quality of its documentation. YUI has an amazing amount of examples and detail for all their components, making it very clear how to use the framework. MooTools is pretty nice, but lacks detail and examples, and jQuery sits right in the middle with adequate examples and details.

Taking these few things into consideration just led me to like jQuery the most. Thats it, a bit of a ramble, but that’s how it goes sometimes in Evan’s world. For a detailed look into these frameworks and others check out this guy’s analysis. Its pretty dam complete.

Tags: code, evansanidiot, js, opinion, ramblings