Tuesday, September 30, 2008

YUI File Disjoint Complexity FAIL


So here's what has been getting my goat for a while with YUI and a very smple application I've been using it to build.

So for said application, I have to reference 12 separate Javascript files along with 5 separate CSS files.  All for this simple interface (datatable, tabs, button, ajax (connection), events and maybe a few more things I am not remembering):

This type of complexity is what makes YUI daunting for many developers and difficult to maintain; over at nRegex I'm referencing a bunch of older versions of YUI and if/when I do decide to update there will be quite a few places in which compatibility and errors have the potential in manifesting themselves.

YUI controls are nice once working but I'm at the point of wondering if this kind of disjointedness should lead me towards jQuery or Dojo. Especially with Microsoft's recent adoption of jQuery, I'm leaning in that direction. But I don't want to be rash so I'll ask:
1. What is the canonical solution e.g. blessed by Yahoo! (I see a YUI loader of some kind)?
2. What does that look like with the 5 CSS and 12 *.JS files I've got above?



AJ said...

Sooo... what's a picture of an ultrasound doing on your blog post? Subtle hint or random choice?

David Seruyange said...

I thought I should leak why I've been such a bad blogger of late.

Dav Glass said...

Try the Dependency Configurator: http://developer.yahoo.com/yui/articles/hosting/

Also an FYI, the yahoo-dom-event.js file is a roll up of the yahoo-min.js, dom-min.js & the event-min.js. So there is no reason to include them over again.

Eric Miraglia said...

You should be able to do all of this in just three requests as of YUI 2.5.2:

<!-- css -->

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css">

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css">

<!-- js -->

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/animation/animation-min.js&2.5.2/build/element/element-beta-min.js&2.5.2/build/container/container_core-min.js&2.5.2/build/menu/menu-min.js&2.5.2/build/button/button-min.js&2.5.2/build/connection/connection-min.js&2.5.2/build/datasource/datasource-beta-min.js&2.5.2/build/datatable/datatable-beta-min.js&2.5.2/build/tabview/tabview-min.js"></script>

As Dav says, head over to the YUI dependency configurator to explore your options.