Enables pathogen encoding in YUI Loader

Pathogen Encoder

This module monkey-patches YUI Loader to generate pathogen-encoded combo urls. It should be loaded as part of an application's seed, and added to the list of core modules.

This module is the encoder component of the pathogen codec, which is used to encode and decode JavaScript and CSS modules using the YUI Combo Handler.

This strategy encodes combo URLs without using any query parameters. This approach was taken due to the cacheing behavior of particular public proxies [1]:

Most proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.

This encoding strategy expects URLs in the following format where module groups are ; delimited and optionally followed by the filter and type:

  • module-group-{X} - A module group which contains a group identifier, a version, and a list of module names.
  • type - Valid values are js and css.
  • filter - Optional. Defaults to min when not specified. Valid values for JS are min, debug, and raw. Valid values for CSS are min and raw.

The core module group represents the set of YUI's core modules and is expected in the following format:

// e.g., c+3.10.3+get,oop

The gallery module group represents the set of YUI's gallery modules and is expected in the following format:

// e.g., g+2013.06.20-02-07+dispatcher,bitly

Note that the gallery version and all gallery module names are listed without the gallery- prefix.

The root module group represents modules built using shifter or anything that outputs the same build directory structure. These are expected in the following format:

// e.g., r+os/mit/td/ape-af-0.0.38+af-pageviz,af-dom,af-poll

The path module group represents modules which specified their full path in their module meta data, as opposed to the root path and the module name pair.

For example, a module from the root module group that was built "the YUI way" can simply specify the root path this/is/a/path/ along with the module name kamenrider, and we can automatically resolve the path to this/is/a/path/kamenrider/kamenrider-min.js.

Since it is non-trivial to encode modules that don't follow this convention, this encoder approaches the problem in two ways:

  1. Treat each module as a group and use the full path in the combo url:
  1. Compute prefix tree encoding to generate a synthetic root module group:

You can enable the compression by setting fullpathCompression to true in the YUI config.

// The following JS URLs are equivalent:
// There is no equiavalent to the following JS URL:
// The following CSS URLs are equivalent:
// There is no equivalent to the following CSS URL:

We use the gallery tag gallery-2013.09.04-21-56 in the example below, but you should check the yui3-gallery for the latest tag which will get you the latest version of the pathogen encoder.

Also note that the debug filter will print out some useful log statements (i.e., the number of combo urls that would have been generated as well as the number of pathogen-encoded combo urls that have been generated).

There are 3 required steps for integration with YUI Loader:

  1. Deliver the module as part of the application seed
// Together with the YUI seed
<script src="http://yui.yahooapis.com/combo?3.10.3/yui/yui-min.js&gallery-2013.09.04-21-56/gallery-pathogen-encoder/gallery-pathogen-encoder-min.js"></script>
// Or separately
<script src="http://yui.yahooapis.com/3.10.3/yui/yui-min.js"></script>
<script src="http://yui.yahooapis.com/gallery-2013.09.04-21-56/gallery-pathogen-encoder/gallery-pathogen-encoder-min.js"></script>
  1. Add the module to the list of core modules
  1. Configure the YUI instance with the custom combo base
    customComboBase: $customComboBase
}).use('node', function (Y) { ... };

For a working example, see this test. You'll need to npm install beforehand to make all the YUI assets locally available.

  • As long as steps 1 and 2 happen before instantiation, Loader will start producing pathogen-encoded urls.
  • This submodule does no work unless the customComboBase configuration is set. customComboBase can be used as a switch for the YUI combo handler.

There are 3 required steps for integration with express-yui.

  1. Add the module to your application so that it gets deployed to the CDN as part of your CI

  2. Enable the encoder

var app = require('express')();
var encoder = require('yui-pathogen-encoder');
  1. Specify the customComboBase config
    customComboBase: $customComboBase

Check out the working example. Due to the nature of locator, you will have to npm link yui-pathogen-encoder into the example directory after doing an npm link in this module's root directory.

When customComboFallback is set to true, Loader will fall back to the default combo url if any module fails to load via the pathogen-encoded url.

    customComboBase: $customComboBase,
    customComboFallback: true
}).use('node', function (Y) { ... };

This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.

[1] https://developers.google.com/speed/docs/best-practices/caching