A summary of Caridy Patino’s talk “Building YUI 3 Custom Modules” at YUIConf 2009

Caridy Patino, developer of the YUI Event Bubbling Extension, gave a great talk today on building modules in YUI 3 at YUIConf 2009.


Photo credit: https://www.flickr.com/photos/equanimity/4055624319/

Some elements that stood out:

  • Modules are contained pieces of functionality that can be used in YUI 3 via the use() method
  • Modules are not plugins, though the plugin functionality is defined as a module. Plugins add functionality to a pre-existing object and are added via the plug() method.
  • There are three ways to register modules with YUI:
    • Specify the modules to load on the seed object and let YUI pull it in, e.g.,

    • Include the script defining the module on the page, and then add it to YUI, e.g.,

      <script src="module.js"></script> ... YUI().use('module'...

      This is a quick way to start using a custom module, but it is the least performant because it adds a blocking http request to the page
    • Specify the location and dependencies for a module in a configuration object passed into the YUI seed object. This is way offers the highest performance. To illustrate:

      'module': {
      fullpath: "http://example.com/module.js",
      requires: ['node', 'event']

In general, module architecture looks something like this:

  • YUI.add(‘module’, function (Y) {
    //module code
    /* version */,
    /* requirement list */);

For a good example of module structure and usage, check out Dav Glass’s YQL module in the YUI Gallery. Here’s the source code. Another good example is in tutorial for Dynamically Adding YUI and External Modules on YDN.

Slide decks and video from the YUIConf presentations should be up soon. Please follow the YUI blog for more info.

Find Caridy online:


Erik Eldridge

Yahoo! Developer Network