History of Module Loading

Not much to say here

Dynamic Script Loading

YUI Get utility, Async script loading blog posts

Moved to modules

General Loader Config

'Recipe'-like approach.
{
  combine: true,
  comboUrl: 'http://yui.yahooapis.com/combo?',
  baseUrl: '3.4.0/build/',
  modules: { }
  groups: {
    meebo: {
      comboUrl: 'http://d.meebocdn.com/combo?',
      baseUrl: '1.0.0/',
      modules: { },
      patterns: { }
    }
  },
  lang: [ "en-US", "en" ],
  ignore: [ 'console' ],
  force: ['node' ],
  filter: { },
  insertBefore: 'printCSS',
  jsAttributes: { defer: true },
  cssAttributes: { type: 'text/css' },
  timeout: 60
}

Static Loading

{
  combine: false,
  base: 'http://host.domain.tld/base/path',
  modules: {
    // Module Definitions
  }
}
Some convenience for debugging.

Combo Loading

{
  combine: true,
  comboBase: 'http://host.domain.tld/comboPath?',
  root: '/base/path/,
  modules: {
    // Module Definitions
  }
}
Fewer HTTP requests, generally better performance. Unable to take advantage of concurrent downloads. URL Split on 2048 characters, in 3.5, 1024.

Use Combo Loading!

{
  combine: true,
  comboUrl: 'http://yui.yahooapis.com/combo?',
  baseUrl: '3.4.0/build/',
  modules: { }
  groups: {
    meebo: {
      comboUrl: 'http://d.meebocdn.com/combo?',
      baseUrl: '1.0.0/',
      modules: { },
      patterns: { }
    }
  },
  lang: [ "en-US", "en" ],
  ignore: [ 'console' ],
  force: ['node' ],
  filter: { },
  insertBefore: 'printCSS',
  jsAttributes: { defer: true },
  cssAttributes: { type: 'text/css' },
  timeout: 60
}

Defining Modules

Dynamic module additions are great for development, they fall apart in production. Can create cascading calls as dependencies are resolved.

Module Options

path will be appended to group/root base. Required should be provided, as it minimizes HTTP requests. Requires must be loaded, optional is loaded if loadOptional is true.

Basic Module Configuration

path will be appended to group/root base. Required should be provided, as it minimizes HTTP requests. Requires must be loaded, optional is loaded if loadOptional is true.
'meebo-module': {
	type: "js",
	path: "meebo-module/meebo-module-min.js",
	requires: ['base', 'base-build'],
	optional: []
}

'meebo-module': {
	type: "js",
	path: "meebo-module/meebo-module-min.js",
	requires: ['base', 'base-build'],
	optional: []
}

'external-module': {
  fullpath: "http://my.partner.com/scripts/module.js"
}

Rollups

'meebo-stack': {
	use: ['node', 'widget', 
		'base', 'meebo-base', 'meebo-event']
}
User can request all five modules at once using 'meebo-stack' alias, but can also request any sized subset and get just the goodness they want

Internationalization

Conditional Loading

Key to progressive enhancement. Use feature detection to bring selectively load fallbacks
modules: {
  'localStorage': {},
  'localStorage-native: {
    condition: {
      test: function(Y) {
        return !!Y.config.win.localStorage;
      },
      trigger: 'localStorage',
      when: 'instead'
    }
  }
}

modules: {
  'localStorage': {},
  'localStorage-gears: {
    condition: {
      test: function(Y) {
        return !!(window.google && window.google.gears);
      },
      trigger: 'localStorage',
      when: 'instead'
    }
  }
}

modules: {
  'localStorage': {},
  'localStorage-globalStorage': {
    condition: {
      test: function(Y) {
        return !!window.globalStorage;
      },
      trigger: 'localStorage',
      when: 'instead',
      'ua': 'gecko'
    }
  }
}

Module Groups

{
  combine: true,
  comboUrl: 'http://yui.yahooapis.com/combo?',
  baseUrl: '3.4.0/build/',
  modules: { }
  groups: {
    meebo: {
      comboUrl: 'http://d.meebocdn.com/combo?',
      baseUrl: '1.0.0/',
      modules: { },
      patterns: { }
    }
  },
  lang: [ "en-US", "en" ],
  ignore: [ 'console' ],
  force: ['node' ],
  filter: { },
  insertBefore: 'printCSS',
  jsAttributes: { defer: true },
  cssAttributes: { type: 'text/css' },
  timeout: 60
}

Groups override base config

{
  base: 'http://host.domain.tld/base/path',
  group: {
    meebo: {
      base: 'http://host.cdn.com/yet/another/base/path'
    }
  }
}

groups: {
  meebo: {
    base: 'http://s.meebocdn.com/yui3/11.15/',
    patterns: {
    
      'meebocss-': { type: 'css' },
      
      '-debug': {
        configFn: function(me) {
           var modName = me.name.replace(/-debug/, '');
           me.path = modName + '/' + modName + '-debug.js';
        }
      },
      
      'meebo-': {
        configFn: function(me) {
            me.path = 'scripts/' + me.name + '-min.js';
          }
        }
      
      }
    }
  }
}
patterns are strings, matched with indexOf. configFn called after all defaults are set for new module being create at runtime. This is the mechanism used for Gallery and yui2-in-3. Default path is module-name/module-name-min.js
{
  combine: true,
  comboUrl: 'http://yui.yahooapis.com/combo?',
  baseUrl: '3.4.0/build/',
  modules: { }
  groups: {
    meebo: {
      comboUrl: 'http://d.meebocdn.com/combo?',
      baseUrl: '1.0.0/',
      modules: { },
      patterns: { }
    }
  },
  lang: [ "en-US", "en" ],
  ignore: [ 'console' ],
  force: ['node' ],
  filter: { },
  insertBefore: 'printCSS',
  jsAttributes: { defer: true },
  cssAttributes: { type: 'text/css' },
  timeout: 60
}

Base Configuration Options

These can not be overriden by group definitions.

Base Configuration Options

These can not be overriden by group definitions.

Internationalization

List of preferred languages. Requires Intl for you. Needs to be sent by the server, since the client can't look this shit up.

Module Config

meebo-login: {
	requires: ['widget'],
	lang: ['en', 'en-GB', 'es', 'jp', 'fr']
}

Loader Config

This is ORDERED
{
	lang: ['en-US', 'en']
}

Change Module Load Behaviour

List of preferred languages. Requires Intl for you. Needs to be sent by the server, since the client can't look this shit up.

Ignore prevents a module from ever loading

{
	ignore: [ "console" ]
}

YUI().use('node', 'console');

Always load a Module

{
	force: [ "ad" ],
	modules: {
		'ad': { fullpath: "http://ad.doubleclick.com/getAd" }
	}
}

YUI().use('yui-later', function(Y) {
	Y.later(60000, Y, use, 'ad', true);
});

Module Path Filtering

List of preferred languages. Requires Intl for you. Needs to be sent by the server, since the client can't look this shit up.

Pre-provided Filters

{
  filter: 'RAW'
  groups: {
    meebo: {
      filter: 'DEBUG'
    }
  }
}

Module Filters

{
  filters: {
    'node': "RAW",
    'meebo-node': "DEBUG"
  }
}
searchExp must be a regexp

Custom filters

{
	filter: {
		searchExp: "yuiconf2010-",
		replaceStr: "yuiconf2011-"
	}
}
{
	filter: {
		searchExp: "\\.coffee$",
		replaceStr: ".js"
	}
}
searchExp must be a regexp

DOM Details

List of preferred languages. Requires Intl for you. Needs to be sent by the server, since the client can't look this shit up.

Four Sources of Config

GlobalConfig created for NodeJS. Seems like a reasonable place to shove module definitions. YUI_config applied globally to all instances. Compelling reasons to generate this per-page, dynamically. I usually use arguments to the YUI method for debugging on the instance-level.

Fin