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.

Advantage: All my pages have the header files already and I don't need to worry about that on each page I'm working on.
Disadvantage: Pages with no need for a YUI component still use up bandwidth/time downloading the headers.

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.

Advantage: Only pages with the components are now loading the dependencies.
Disadvantage: You're back to redoing setup work and/or copying and pasting a lot.

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.

2 Responses to “Using YUI components in a templated environment”


  1. Gero

    Hi. Good blog!
    Nice solution. Ive been loking for something like this for a long time, as i’m new to javascript.
    But its too late, ive figured a solution like yours before =), now i see its an acceptable way of modularizing yui components loading.
    I do something like you do, but less modularized.
    In my master template i load yuiloader-min.js
    And on every page i need yui components, i put at the end of the file the loader
    var loader = new YAHOO.util.YUILoader({
    require: [The components to be used],
    loadOptional: false,
    combine: true,
    filter: “MIN”,
    allowRollup: true,
    onSuccess: function() {
    the page scripts that use components
    });
    loader.insert();

  2. papuapost

    I spent years to find this kind of solution. Your solution of YUI Implementation into my wordpress themes has helped me a lot. This is the lightweight and best solution if anyone would like to use it



css.php