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 ...
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
...
Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
...
Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
...
Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
...
Why use it?
• Simplified resource selection
• Automatic dependency calculations
• Reliable, sorted loading of dependencies
...
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://y...
Use the Client-Side Loader
     <script type="text/javascript" src="http://yui.yahooapis.com/
     2.8.0r4/build/yuiloader...
Basic Example
Simplified Resource Selection

  <?PHP
  include("loader.php");
  $loader = new YAHOO_util_Loader("2.8.0r4");...
Basic Example: Output
That’s the same 9 HTTP requests
  CSS
  <link rel="stylesheet" type="text/css" href="http://
  yui.y...
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 t...
Constructor Options
• The YAHOO_util_Loader class constructor accepts
  four parameters:
   1. YUI Version : Corresponds t...
Constructor Options
• The YAHOO_util_Loader class constructor accepts
  four parameters:
   1. YUI Version : Corresponds t...
Constructor Options
• The YAHOO_util_Loader class constructor accepts
  four parameters:
   1. YUI Version : Corresponds t...
Configuration Options
      Option                             Purpose
                  • Specify location for the YUI bui...
Configuration Options
      Option                             Purpose
                  • Specify location for the YUI bui...
Configuration Options
      Option                             Purpose
                  • Specify location for the YUI bui...
Configuration Options
      Option                             Purpose
                  • Specify location for the YUI bui...
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
 ✓Simpli...
Basic Example (with Rollups)
Now just 5 HTTP requests. A 44% improvement!
  $loader->allowRollups = true;
  $loader->load(...
Basic Example (with Filter)
Can you spot the debug files?
  $loader->filter = YUI_DEBUG;
  $loader->load("yahoo", "dom", "e...
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 (...
Output Methods
• tags : give me all the includes and don’t hold back
• css and script : more control, split the includes (...
Output Methods
• tags : give me all the includes and don’t hold back
• css and script : more control, split the includes (...
Output Methods
• tags : give me all the includes and don’t hold back
• css and script : more control, split the includes (...
Additional Output Methods
$loader->data()
  Array( [js] => Array(
              [0] => Array(
                      [http:...
Additional Output Methods
$loader->json()
 {"js": [
         {
             "http://yui.yahooapis.com/2.8.0r4/build/yahoo-...
Additional Output Methods
$loader->raw()

    /*
    Copyright (c) 2009, Yahoo! Inc. All rights reserved.
    Code license...
Example: Loading Calendar
Server-Side Source
   <?PHP //Do loader setup here... ?>
   <html>
   <head>
      <title>YUI PH...
Example: Loading Calendar
Rendered Source
 <html>
 <head>
    <title>YUI PHP Loader Utility Advanced Example</title>
    <...
Why use it?
✓Simplified resource selection
✓Automatic dependency calculations
✓Less metadata sent over the wire
✓Simplifies ...
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 Java...
Custom Modules
• The modules parameter is to be given as an
  associative array.
• The array should consist of custom Java...
Custom Modules
• The modules parameter is to be given as an
  associative array.
• The array should consist of custom Java...
Custom Modules
• The modules parameter is to be given as an
  associative array.
• The array should consist of custom Java...
Example: Custom Modules
  include("loader.php");

  $customModules = array(
      "customJS" => array(
          "name" =>...
Example: Custom Modules
  include("loader.php");

   $customModules = array(
       "customJS" => array(
           "name"...
Example: Custom Modules
                      with YUI Dependencies
  include("loader.php");

  $customModules = array(
  ...
Example: Custom Modules
                       with YUI Dependencies
  include("loader.php");

  $customConfig = array(
  ...
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...
Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
• Take advantage...
Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
• Take advantage...
Combo Handling
• Single HTTP request per resource type
• Returns a single cacheable JavaScript or CSS file
• Take advantage...
Configuration Options (revisited)

     Option                    Purpose


               • Combine files into a single req...
Configuration Options (revisited)

     Option                    Purpose


               • Combine files into a single req...
Basic Example (now with Combo)
Only 2 HTTP requests. A 77% improvement!

  $loader->allowRollups = true;
  $loader->combin...
Basic Example (Local Combo)
2 HTTP requests served from a custom endpoint
 $loader->combine = true;
 //Web accessible url ...
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, Cont...
Local Combo Handler
• Single variable to verify/tweak in combo.php (i.e.)
  PATH_TO_LOADER.
• Cache-Control, Expires, Cont...
What’s does the future hold?
• Work to finalize the first production-ready release
• Support for shorter combo urls (i.e.) m...
Questions?
               http://developer.yahoo.com/yui/phploader/




                            Chad Auld
            ...
Upcoming SlideShare
Loading in …5
×

Introduction to YUI PHP Loader

5,743 views

Published on

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.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,743
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
52
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • Introduction to YUI PHP Loader

    1. 1. Introducing PHP Loader Chad Auld Front-End Engineer - Yahoo! YUICONF 2009
    2. 2. What is it? • A server-side utility • Used to load YUI modules into a page via PHP • Standalone component YUICONF 2009
    3. 3. Why use it? • Simplified resource selection YUICONF 2009
    4. 4. Why use it? • Simplified resource selection • Automatic dependency calculations YUICONF 2009
    5. 5. Why use it? • Simplified resource selection • Automatic dependency calculations • Reliable, sorted loading of dependencies YUICONF 2009
    6. 6. Why use it? • Simplified resource selection • Automatic dependency calculations • Reliable, sorted loading of dependencies • Less metadata sent over the wire YUICONF 2009
    7. 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. 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. 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
    10. 10. Dependency Calculations Can’t I already do this? YUICONF 2009
    11. 11. 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
    12. 12. 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
    13. 13. 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
    14. 14. 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
    15. 15. Constructor Options • The YAHOO_util_Loader class constructor accepts four parameters: YUICONF 2009
    16. 16. Constructor Options • The YAHOO_util_Loader class constructor accepts four parameters: 1. YUI Version : Corresponds to the YUI metadata YUICONF 2009
    17. 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. 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. 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. 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. 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. 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. 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
    24. 24. Configuration Options Did those seem familiar? They should. YUICONF 2009
    25. 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
    26. 26. 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
    27. 27. 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
    28. 28. Output Methods • tags : give me all the includes and don’t hold back YUICONF 2009
    29. 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. 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. 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. 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
    33. 33. 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
    34. 34. 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
    35. 35. 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
    36. 36. 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
    37. 37. 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
    38. 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. 39. Custom Modules • The modules parameter is to be given as an associative array. YUICONF 2009
    40. 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. 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. 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. 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
    44. 44. 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
    45. 45. 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
    46. 46. 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
    47. 47. 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
    48. 48. Combo Handling • Single HTTP request per resource type YUICONF 2009
    49. 49. Combo Handling • Single HTTP request per resource type • Returns a single cacheable JavaScript or CSS file YUICONF 2009
    50. 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. 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. 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. 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. 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. 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
    56. 56. 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
    57. 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. 58. Local Combo Handler • Single variable to verify/tweak in combo.php (i.e.) PATH_TO_LOADER. YUICONF 2009
    59. 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. 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. 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
    62. 62. Questions? http://developer.yahoo.com/yui/phploader/ Chad Auld yuilibrary: chadauld github: cauld twitter: @chadauld YUICONF 2009

    ×