JQuery and YUI

Recently I’ve had the pleasure of developing a web app using a combination of jQuery and YUI on the front end.  These two frameworks take strikingly different approaches to JavaScript development.  YUI is massive, verbose, and feels like using a mildly over-engineered Java library.  JQuery code tends to be much smaller and functional.  I imagine jQuery is much closer to what the creators of JavaScript originally had in mind.  The ease of navigating the DOM in jQuery needs to be seen to be believed:

<script>
     //selects the first li element from the first ul under
     //the navigation element in the following HTML
     $("#navigation ul:first li:first"); //the entire JQuery code
</script>
<div id="navigation">
<ul>
   <li>foo</li>
   <li>bar</li>
   <li>Ackbar</li>
   <li>Bob Barker</li>
</ul>
<!--- subnav --->
<ul>
    <li>Some other useless list item</li>
    <li>Jeff Bain should use JQuery</li>
</ul>
</div>

However, YUI does have one advantage. The YUI GUI widgets are extremely powerful and exceed in breadth and depth the widgets of jQuery-UI. For example, jQuery has no equivalent of the YUI DataTable. Recently I was tasked with scrapping the data in a HTML <table> from a live website.  There was lots of superflious rows in the table, so I used jQuery’s AJAX API’s to download the table and remove all the irrelevent information. Once complete, I passed off the formatted <table> data to a YUI DataSource, which generated a beautiful, sortable, and resizable YUI DataTable on the fly.

Without jQuery, it would have been agany using YUI’s verbose and limited selectors.  Without YUI, I would have had to either create my own datasheet class or trust that a bug free and costumizable jQuery plugin existed.  jQuery and YUI are an awesome combination and cover just about anything you’d want to do on the web.

Disclaimer: I used YUI 2.8.  It’s entirely possible that YUI 3.0 is better, however it’s missing most of YUI 2′s nice widgets – defeating the point.