Using YUI components in a templated environment

If you develop sites anything like I do, you’ll end up setting up a site wide layout and theme before you start coding any individual pages. I like to add YUI components where they are useful, but I’ve come across a couple little quirks that were annoying me. Here are my observations and what I did to get around them.

Templating Quirks with YUI

The root of my annoyance is that I don’t need all the components I want to use on all my pages. I do however need some components on more than one page as well as sometimes needing a few components on one page. Somewhere along the line, I gained a believe that doing things more than once was not good. Copying and pasting header files and setup code between pages is on my list of less desirable behavior. This led me down the path of adding all the YUI header files to my master template for my site.

If you weight the disadvantages of putting the header files on every page higher than the advantages like I did, you might go the opposite route and try adding them only to the pages where you need the components.

Dynamically Loading YUI Components

Well, I wasn’t entirely happy with either solution so I came up with a hybrid. I’ve watched the YUI-Loader with some interest since it was introduced a couple versions ago. It is now no longer marked as “Beta” and I figured it was worth looking at for my current project. The basics are this:

1. Include the loader script.
2. Create a loader with a list of objects you’ll be using.
3. Use the loader to grab all the required resources.
4. Use the resources you need.

Sounds like a good idea to me but I didn’t want to copy/paste loader initialization code in my template pages any more than I wanted to copy/paste header files. My solution is to create a generic loader in my master template and then override the required resources at the page level.

Here is part of my master template

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.1/build/yuiloader/yuiloader-beta-min.js"></script>
<script type="text/javascript">
var yuiLoaderRequires=[];
var myOnLoad=function() {}
function init() {
var yuiLoader = new YAHOO.util.YUILoader({
require: yuiLoaderRequires,
onSuccess: myOnLoad
});
yuiLoader.insert();
}
</script>
<!-- Using your template language, insert the child template javascript here -->
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(init);
</script>


Then, just override yuiLoaderRequires and myOnLoad in the subpages:


<script type="text/javascript">
yuiLoaderRequires=['treeview','colorpicker'];
myOnLoad=function() { doSomething....; }
</script>


I find that a lot less annoying than looking up requirements for each component on each page. Also, running the loader in the onDOMReady function causes the requirements to be loaded after the HTML has been rendered, this ought to give the appearance of a faster page load for most users. It might not work for every case though, so use with care. Hope you enjoy.