YUI PHP Loader helps manage your JavaScript and CSS dependencies in any PHP-based project; it comes preloaded with YUI metadata for both YUI 2 and YUI 3.
5. Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
YUICONF 2009
6. Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
• Less metadata sent over the wire
YUICONF 2009
7. 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
8. 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
9. 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
16. Constructor Options
• The YAHOO_util_Loader class constructor accepts
four parameters:
1. YUI Version : Corresponds to the YUI metadata
YUICONF 2009
17. 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
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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
25. 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
29. 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
30. 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
31. 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
32. 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
38. 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
39. Custom Modules
• The modules parameter is to be given as an
associative array.
YUICONF 2009
40. 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
41. 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
42. 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
43. 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
49. Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
YUICONF 2009
50. Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
• Take advantage of the Yahoo! CDN
YUICONF 2009
51. 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
52. 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
53. 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
54. 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
55. 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
57. 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
58. Local Combo Handler
• Single variable to verify/tweak in combo.php (i.e.)
PATH_TO_LOADER.
YUICONF 2009
59. 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
60. 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
61. 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