Introducing PHP Loader
Chad Auld
Front-End Engineer - Yahoo!
YUICONF 2009

What is it?
• A server-side utility
• Used to load YUI
modules into a page
via PHP
• Standalone component
YUICONF 2009

Why use it?
• Simplified resource selection
YUICONF 2009

Why use it?
• Simplified resource selection
• Automatic dependency calculations
YUICONF 2009

Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
YUICONF 2009

Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
• Less metadata sent over the wire
YUICONF 2009

Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
• Less metadata sent over the wire
• Simplifies library upgrades
YUICONF 2009

Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
• Less metadata sent over the wire
• Simplifies library upgrades
• Optimizes page load times via rollups and combo
YUICONF 2009

Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
• Less metadata sent over the wire
• Simplifies library upgrades
• Optimizes page load times via rollups and combo
• Integrates with your existing modules
YUICONF 2009

Dependency Calculations
Can’t I already do this?
YUICONF 2009

Specify Individual Files
<!-- Individual YUI CSS files -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/
2.8.0r4/build/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/
2.8.0r4/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/
2.8.0r4/build/grids/grids-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/
2.8.0r4/build/tabview/assets/skins/sam/tabview.css">
<!-- Individual YUI JS files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/tabview/tabview-min.js"></script>
YUICONF 2009

Use the Client-Side Loader
<script type="text/javascript" src="http://yui.yahooapis.com/
2.8.0r4/build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "",
require:
["dom","event","fonts","grids","reset","tabview","yahoo"],
loadOptional: false,
combine: false,
filter: "MIN",
allowRollup: false,
onSuccess: function() {
//Make use of all requested YUI modules here.
}
});
loader.insert();
<script>
YUICONF 2009

Basic Example
Simplified Resource Selection
<?PHP
include("loader.php");
$loader = new YAHOO_util_Loader("2.8.0r4");
$loader->load("yahoo", "dom", "event", "tabview",
"grids", "fonts", "reset");
echo $loader->tags();
?>
YUICONF 2009

Basic Example: Output
That’s the same 9 HTTP requests
CSS
<link rel="stylesheet" type="text/css" href="http://
yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://
yui.yahooapis.com/2.8.0r4/build/grids/grids-min.css" />
<link rel="stylesheet" type="text/css" href="http://
yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="http://
yui.yahooapis.com/2.8.0r4/build/tabview/assets/skins/sam/
tabview.css" />
JavaScript
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/tabview/tabview-min.js"></script>
YUICONF 2009

Constructor Options
• The YAHOO_util_Loader class constructor accepts
four parameters:
YUICONF 2009

Constructor Options
• The YAHOO_util_Loader class constructor accepts
four parameters:
1. YUI Version : Corresponds to the YUI metadata
YUICONF 2009

Constructor Options
• The YAHOO_util_Loader class constructor accepts
four parameters:
1. YUI Version : Corresponds to the YUI metadata
2. Cache Key : Unique name used by APC to cache
module calculations
YUICONF 2009

Constructor Options
• The YAHOO_util_Loader class constructor accepts
four parameters:
1. YUI Version : Corresponds to the YUI metadata
2. Cache Key : Unique name used by APC to cache
module calculations
3. Modules List : An array of custom modules
YUICONF 2009

Constructor Options
• The YAHOO_util_Loader class constructor accepts
four parameters:
1. YUI Version : Corresponds to the YUI metadata
2. Cache Key : Unique name used by APC to cache
module calculations
3. Modules List : An array of custom modules
4. Metadata Flag : Include the YUI metadata?
YUICONF 2009

Configuration Options
Option Purpose
• Specify location for the YUI build directory
base • Default: Files are served from the Yahoo! CDN
• A filter to apply to result urls
• Valid filters are YUI_DEBUG and YUI_RAW
filter • Default: Minified version
• Use aggregate files such as yahoo-dom-event.js,
rest-fonts-grids.css, etc
allowRollups • Default: true
• Load optional dependencies for the components (e.g.)
loadOptional tabview brings in selector, connection, and a few others
• Default: false
YUICONF 2009

Configuration Options
Option Purpose
• Specify location for the YUI build directory
base • Default: Files are served from the Yahoo! CDN
• A filter to apply to result urls
• Valid filters are YUI_DEBUG and YUI_RAW
filter • Default: Minified version
• Use aggregate files such as yahoo-dom-event.js,
rest-fonts-grids.css, etc
allowRollups • Default: true
• Load optional dependencies for the components (e.g.)
loadOptional tabview brings in selector, connection, and a few others
• Default: false
YUICONF 2009

Configuration Options
Option Purpose
• Specify location for the YUI build directory
base • Default: Files are served from the Yahoo! CDN
• A filter to apply to result urls
• Valid filters are YUI_DEBUG and YUI_RAW
filter • Default: Minified version
• Use aggregate files such as yahoo-dom-event.js,
rest-fonts-grids.css, etc
allowRollups • Default: true
• Load optional dependencies for the components (e.g.)
loadOptional tabview brings in selector, connection, and a few others
• Default: false
YUICONF 2009

Configuration Options
Option Purpose
• Specify location for the YUI build directory
base • Default: Files are served from the Yahoo! CDN
• A filter to apply to result urls
• Valid filters are YUI_DEBUG and YUI_RAW
filter • Default: Minified version
• Use aggregate files such as yahoo-dom-event.js,
rest-fonts-grids.css, etc
allowRollups • Default: true
• Load optional dependencies for the components (e.g.)
loadOptional tabview brings in selector, connection, and a few others
• Default: false
YUICONF 2009

Configuration Options
Did those seem familiar? They should.
YUICONF 2009

Why use it?
✓Simplified resource selection
✓Automatic dependency calculations
✓Less metadata sent over the wire
✓Simplifies library upgrades
➡Optimizes page load times via rollups and combo
• Integrates with your existing modules
YUICONF 2009

Basic Example (with Rollups)
Now just 5 HTTP requests. A 44% improvement!
$loader->allowRollups = true;
$loader->load("yahoo", "dom", "event", "tabview", "grids",
"fonts", "reset");
CSS
<link rel="stylesheet" type="text/css" href="http://
yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-
grids.css" />
<link rel="stylesheet" type="text/css" href="http://
yui.yahooapis.com/2.8.0r4/build/tabview/assets/skins/sam/
tabview.css" />
JavaScript
<script type="text/javascript" src="http://yui.yahooapis.com/
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/
2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/
2.8.0r4/build/tabview/tabview-min.js"></script>
YUICONF 2009

Basic Example (with Filter)
Can you spot the debug files?
$loader->filter = YUI_DEBUG;
$loader->load("yahoo", "dom", "event", "tabview", "grids",
"fonts", "reset");
JavaScript
<script type="text/javascript" src="http://yui.yahooapis.com/
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/
2.8.0r4/build/element/element-debug.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/
2.8.0r4/build/tabview/tabview-debug.js"></script>
YUICONF 2009

Output Methods
• tags : give me all the includes and don’t hold back
YUICONF 2009

Output Methods
• tags : give me all the includes and don’t hold back
• css and script : more control, split the includes (as
recommended in the performance best practices)
YUICONF 2009

Output Methods
• tags : give me all the includes and don’t hold back
• css and script : more control, split the includes (as
recommended in the performance best practices)
• embed : give me everything and don’t hold back
YUICONF 2009

Output Methods
• tags : give me all the includes and don’t hold back
• css and script : more control, split the includes (as
recommended in the performance best practices)
• embed : give me everything and don’t hold back
• css_embed and script_embed : give me everything
for a specific resource type and don’t hold back
YUICONF 2009

Output Methods
• tags : give me all the includes and don’t hold back
• css and script : more control, split the includes (as
recommended in the performance best practices)
• embed : give me everything and don’t hold back
• css_embed and script_embed : give me everything
for a specific resource type and don’t hold back
• Other output formats also available for more
programmatic purposes
YUICONF 2009

Additional Output Methods
$loader->data()
Array( [js] => Array(
[0] => Array(
[http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-
event/yahoo-dom-event.js] => Array(
[0] => yahoo-dom-event
[1] => yahoo
[2] => event
[3] => dom
)
)
)
[css] => Array (
[0] => Array(
[http://yui.yahooapis.com/2.8.0r4/build/reset-fonts/
reset-fonts.css] => Array(
[0] => reset-fonts
[1] => reset
[2] => fonts
)
)
) )
YUICONF 2009

Additional Output Methods
$loader->json()
{"js": [
{
"http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/
yahoo-dom-event.js": [
"yahoo-dom-event",
"yahoo",
"event",
"dom"
]
},
...
],
"css": [
{
"http://yui.yahooapis.com/2.8.0r4/build/reset-fonts/
reset-fonts.css": [
"reset-fonts",
"reset",
"fonts"
]
},
...
]}
YUICONF 2009

Additional Output Methods
$loader->raw()
/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button
,textarea,p,blockquote,th,td{margin:0;padding:
0;}table{border-collapse:collapse;border-spacing:
0;}fieldset,img{border:
0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{f
ont-
......
......
......
YUICONF 2009

Example: Loading Calendar
Server-Side Source
<?PHP //Do loader setup here... ?>
<html>
<head>
<title>YUI PHP Loader Utility Basic Example</title>
<?PHP echo $loader->css(); ?>
</head>
<body class="yui-skin-sam">
<h1>YUI PHP Loader Utility Basic Example</h1>
<div id="calendar_container"></div>
<?PHP echo $loader->script(); ?>
<script type="text/javascript">
YAHOO.util.Event.onAvailable("calendar_container",
function() {
var myCal = new YAHOO.widget.Calendar("mycal_id",
"calendar_container");
myCal.render();
})
</script>
</body>
</html>
YUICONF 2009

Example: Loading Calendar
Rendered Source
<html>
<head>
<title>YUI PHP Loader Utility Advanced Example</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/
2.8.0r4/build/calendar/assets/skins/sam/calendar.css" />
</head>
<body class="yui-skin-sam">
<h1>YUI PHP Loader Utility Basic Example</h1>
<div id="calendar_container"></div>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/
build/calendar/calendar-min.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onAvailable("calendar_container", function() {
var myCal = new YAHOO.widget.Calendar("mycal_id",
"calendar_container");
myCal.render();
})
</script>
</body>
</html>
YUICONF 2009

Why use it?
✓Simplified resource selection
✓Automatic dependency calculations
✓Less metadata sent over the wire
✓Simplifies library upgrades
✓Optimizes page load times via rollups and combo
➡Integrates with your existing modules
YUICONF 2009

Custom Modules
• The modules parameter is to be given as an
associative array.
YUICONF 2009

Custom Modules
• The modules parameter is to be given as an
associative array.
• The array should consist of custom JavaScript and/or
CSS modules.
YUICONF 2009

Custom Modules
• The modules parameter is to be given as an
associative array.
• The array should consist of custom JavaScript and/or
CSS modules.
• Format mirrors that of the standard YUI module
metadata. Use the PHP files in lib/meta as your
guide.
YUICONF 2009

Custom Modules
• The modules parameter is to be given as an
associative array.
• The array should consist of custom JavaScript and/or
CSS modules.
• Format mirrors that of the standard YUI module
metadata. Use the PHP files in lib/meta as your
guide.
• The module names must be unique.
YUICONF 2009

Custom Modules
• The modules parameter is to be given as an
associative array.
• The array should consist of custom JavaScript and/or
CSS modules.
• Format mirrors that of the standard YUI module
metadata. Use the PHP files in lib/meta as your
guide.
• The module names must be unique.
• Custom modules dependencies.
YUICONF 2009

Example: Custom Modules
include("loader.php");
$customModules = array(
"customJS" => array(
"name" => 'customJS',
"type" => 'js', // js or css
"fullpath" => './assets/custom/data.js',
"requires" => array('JSONModule')
),
"JSONModule" => array(
"name" => 'JSONModule',
"type" => 'js',
"fullpath" => 'http://www.json.org/json2.js' // overrides path
),
"customCSS" => array(
"name" => 'customCSS',
"type" => 'css',
"fullpath" => './assets/custom/custom.css'
)
);
$loader = new YAHOO_util_Loader('2.8.0r4', 'my_custom_config_'.rand(),
$customModules, false);
$loader->load("JSONModule", "customJS", "customCSS");
YUICONF 2009

Example: Custom Modules
include("loader.php");
$customModules = array(
"customJS" => array(
"name" => 'customJS',
CSS "type" => 'js',
"fullpath" => './assets/custom/data.js',
<link rel="stylesheet" type="text/css" href="./assets/custom/
"requires" => array (0 => 'JSONModule')
custom.css" />
),
"JSONModule" => array(
JavaScript "name" => 'JSONModule',
<script type="text/javascript" or css
"type" => 'js', // js src="http://www.json.org/
json2.js"></script> => 'http://www.json.org/json2.js' // overrides path
"fullpath"
),
<script type="text/javascript" src="./assets/custom/data.js"></
"customCSS" => array(
script> "name" => 'customCSS',
"type" => 'css',
"fullpath" => './assets/custom/custom.css'
)
);
$loader = new YAHOO_util_Loader('2.8.0r4', 'my_custom_config_'.rand(),
$customModules, true);
$loader->load("JSONModule", "customJS", "customCSS");
YUICONF 2009

Example: Custom Modules
with YUI Dependencies
include("loader.php");
$customModules = array(
"customJS" => array(
"name" => 'customJS',
"type" => 'js', // 'js' or 'css'
"fullpath" => './assets/custom/data.js', // overrides path
"requires" => array("event", "dom", "json")
),
"customCSS" => array(
"name" => 'customCSS',
"type" => 'css',
"fullpath" => './assets/custom/custom.css'
)
);
$loader = new YAHOO_util_Loader('2.8.0r4',
'my_custom_config_'.rand(), $customModules);
$loader->load("customJS", "customCSS");
YUICONF 2009

Example: Custom Modules
with YUI Dependencies
include("loader.php");
$customConfig = array(
"customJS" => array(
CSS
"name" => 'customJS',
<link rel="stylesheet" or 'css'
"type" => 'js', // 'js' type="text/css" href="./assets/
custom/custom.css" />
"fullpath" => './assets/custom/data.js', // overrides path
"global" => true, // globals are always loaded
JavaScript array (0 => 'event', 1 => 'dom', 2 => 'json')
"requires" =>
),<script type="text/javascript" src="http://
"customCSS" => array(
yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-
"name" => 'customCSS',
event.js"></script>
"type" => 'css',
<script type="text/javascript" src="http://
"fullpath" => './assets/custom/custom.css',
yui.yahooapis.com/2.8.0r4/build/json/json-min.js"></script>
"global" => true
) <script type="text/javascript" src="./assets/custom/
); data.js"></script>
$loader = new YAHOO_util_Loader('2.8.0r4', 'my_custom_config_'.rand(),
$customConfig);
$loader->load("customJS", "customCSS");
YUICONF 2009

Combo Handling
• Single HTTP request per resource type
YUICONF 2009

Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
YUICONF 2009

Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
• Take advantage of the Yahoo! CDN
YUICONF 2009

Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
• Take advantage of the Yahoo! CDN
• Intrinsic combo-handling support
YUICONF 2009

Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
• Take advantage of the Yahoo! CDN
• Intrinsic combo-handling support
• Yahoo! combo handler and SSL?
YUICONF 2009

Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
• Take advantage of the Yahoo! CDN
• Intrinsic combo-handling support
• Yahoo! combo handler and SSL?
• Limited to YUI modules
YUICONF 2009

Configuration Options (revisited)
Option Purpose
• Combine files into a single request per
resource type
combine • Take advantage of the Yahoo! CDN
• Use your own to combine/serve these files
• Base path to the selected combo service
comboBase
• Default: http://yui.yahooapis.com/combo?
YUICONF 2009

Configuration Options (revisited)
Option Purpose
• Combine files into a single request per
resource type
combine • Take advantage of the Yahoo! CDN
• Use your own to combine/serve these files
• Base path to the selected combo service
comboBase
• Default: http://yui.yahooapis.com/combo?
YUICONF 2009

Basic Example (now with Combo)
Only 2 HTTP requests. A 77% improvement!
$loader->allowRollups = true;
$loader->combine = true;
$loader->load("yahoo", "dom", "event", "tabview", "grids",
"fonts", "reset");
CSS
<link rel="stylesheet" type="text/css" href="http://
yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/
reset-fonts-grids.css&2.8.0r4/build/tabview/assets/skins/
sam/tabview.css" />
JavaScript
<script type="text/javascript" src="http://
yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-
dom-event.js&2.8.0r4/build/element/element-min.js&2.8.0r4/
build/tabview/tabview-min.js"></script>
YUICONF 2009

Basic Example (Local Combo)
2 HTTP requests served from a custom endpoint
$loader->combine = true;
//Web accessible url to the combo.php file on your server
$loader->comboBase = "http://your-domain.com/yuiconf/phploader/
combo.php?";
$loader->load("yahoo", "dom", "event", "tabview", "grids", "fonts",
"reset");
CSS
<link rel="stylesheet" type="text/css" href="http://your-
domain.com/yuiconf/phploader/combo.php?2.8.0r4/build/reset-
fonts-grids/reset-fonts-grids.css&2.8.0r4/build/tabview/assets/
skins/sam/tabview.css" />
JavaScript
<script type="text/javascript" src="http://your-domain.com/
yuiconf/phploader/combo.php?2.8.0r4/build/yahoo-dom-event/
yahoo-dom-event.js&2.8.0r4/build/element/element-
min.js&2.8.0r4/build/tabview/tabview-min.js"></script>
YUICONF 2009

Local Combo Handler
• Single variable to verify/tweak in combo.php (i.e.)
PATH_TO_LOADER.
YUICONF 2009

Local Combo Handler
• Single variable to verify/tweak in combo.php (i.e.)
PATH_TO_LOADER.
• Cache-Control, Expires, Content-Type headers are
set to match the Yahoo! CDN settings.
YUICONF 2009

Local Combo Handler
• Single variable to verify/tweak in combo.php (i.e.)
PATH_TO_LOADER.
• Cache-Control, Expires, Content-Type headers are
set to match the Yahoo! CDN settings.
• Makes use of the same base YUI metadata and core
YAHOO_util_Loader class.
YUICONF 2009

What’s does the future hold?
• Work to finalize the first production-ready release
• Support for shorter combo urls (i.e.) module list
• Ports to ASP, JSP, Python, Ruby...
YUICONF 2009

Questions?
http://developer.yahoo.com/yui/phploader/
Chad Auld
yuilibrary: chadauld
github: cauld
twitter: @chadauld
YUICONF 2009