Aliro Documentation: AliroResourceLoader

The aliroResourceLoader∞ is a generic CSS and JavaScript loading utility chalked full of benefits for Aliro developers. The aliroResourceLoader is an extension of the YUI PHP Loader∞ that we've customized/enhanced for Aliro. Piggy backing on the functionality of YUI PHP loader it allows you to load up any number of YUI∞ modules and/or your own custom resources as well. It is fully aware of the YUI module dependency tree and you can tell it all about your own dependency requirements as well. You can even make your own resource dependent on YUI resources.

If all that is available in YUI PHP Loader, then why the custom class? There are several reasons for that. The first being we wanted the class to be more aware of the environment that it lives in so as to harness the power of the Aliro core. So not only does it load and sort resources, but it also uses Aliro functions to place them on the page for you in the most optimized location; generally speaking CSS is placed in the head of the document and JavaScript near the closing body tag. Secondly, YUI PHP Loader ships with a combo loader that is capable reducing HTTP requests and increasing performance by outputting all the YUI JavaScript and/or CSS requirements as a single request per resource type. Meaning even if you needed ten YUI components which ultimately boil down to ten JavaScript files and three CSS files you would still only make 2 HTTP requests; one for the CSS and another for the JavaScript. That is all well and good, but what about custom non-YUI resources. YUI PHP Loader will load them, but it loads them as seperate includes and thus they miss out on benefits of the combo service and the number of HTTP requests for the page increases. To work around this limitation for Aliro, we've worked out a custom combo process.

The aliroResourceLoader makes use of the YUI PHP Loader to calculate and sort the full dependency tree. It then retrieves the raw dependency data and uses it to craft combo urls for use with Minify (http://code.google.com/p/minify)∞. You can read the benefits of Minify on their project page, but to sum it up.... we get automatic minification, compression, caching, proper setting of content headers, etc. This means that you now have the potential to serve up all JavaScript and CSS requirements for a page with just 2 requests.

OK enough already... How do you use it? Simple.

Frontend:

More coming soon. Pretty much the same as described below for the backend.

Backend:
The Aliro admin template already includes this base logic:

$aliroLoader = aliroResourceLoader::getInstance();
$aliroLoader->addCustomModules($customModules); //custom modules explained below
$aliroLoader->loadOptimized();

We get an instance of the loader, add in our custom modules, and stage them for loading. Line 2 demonstrates one of only two methods that a 3rd party developer ever really has to be concerned with (i.e.) addCustomModules. Lines 1 and 3 are taken care of by the template and never needed again. So what is the template actually loading? The admin template is loading a custom set of metadata which includes some YUI modules and some custom ones. You'll notice our custom ones actually have dependencies on existing YUI modules (ex)

$customModules = array(
			"adminTemplateCSS" => array(
				"name" => 'adminTemplateCSS',
				"type" => 'css',
				"fullpath" => str_replace($this->request->getCfg('live_site'), "", $this->admin_site.'/templates/'.$this->tname.'/'.$css),
				"requires" => array("reset", "fonts")
			),
			"aliroBaseJS" => array(
				"name" => 'aliroBaseJS',
				"type" => 'js',
				"fullpath" => '/includes/js/aliro_base_javascript.js',
				"requires" => array("yahoo", "dom", "event")
			),
			"aliroCompatJS" => array(
				"name" => 'aliroCompatJS',
				"type" => 'js',
				"fullpath" => '/includes/js/alirojavascript.js', //for backwards compatibility
				"requires" => array("aliroBaseJS")
			)
		);

Note: The fullpath parameter is to be given relative to the Aliro install directory.

So if we touch nothing else then we'll end having two includes in the rendered page (e.g.)

<link rel="stylesheet" type="text/css" href="http://localhost/aliro/includes/minify/min/b=aliro&f=/includes/js/yui/lib/2.8.0r4/build/reset-fonts/reset-fonts.css,/administrator/templates/./adminDefault.css" />
<script type="text/javascript" src="http://localhost/aliro/includes/minify/min/b=aliro&f=/includes/js/yui/lib/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js,/includes/js/aliro_base_javascript.js,/includes/js/alirojavascript.js"></script>

For those paying close attention you'll notice the handoff to minify and the comma separated list of resources that will be minified, combined, cached, and served.

As a developer lets say you wanted to load more some additional modules (e.g.) YUI Charts. Within your extension you can simple call the addYUIModule method from the aliroResourceLoader singleton like so:

aliroResourceLoader::getInstance()->addYUIModule("charts");

The charts module and any dependencies it requires have now be loaded and staged for output. With the charts dependency added lets have a look our includes again:

<link rel="stylesheet" type="text/css" href="http://localhost/aliro/includes/minify/min/b=aliro&f=/includes/js/yui/lib/2.8.0r4/build/reset-fonts/reset-fonts.css,/administrator/templates/./adminDefault.css" />
<script type="text/javascript" src="http://localhost/aliro/includes/minify/min/b=aliro&f=/includes/js/yui/lib/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js,/includes/js/yui/lib/2.8.0r4/build/element/element-min.js,/includes/js/yui/lib/2.8.0r4/build/json/json-min.js,/includes/js/yui/lib/2.8.0r4/build/datasource/datasource-min.js,/includes/js/yui/lib/2.8.0r4/build/swf/swf-min.js,/includes/js/yui/lib/2.8.0r4/build/charts/charts-min.js,/includes/js/aliro_base_javascript.js,/includes/js/alirojavascript.js"></script>

Note: addModule accepts an array of YUI modules as well.

Now what if you had some additional custom CSS and/or JavaScript resources you wanted to load as well. For this you make use of a related method named "addCustomModules". You simply call this method passing it an array of custom metadata in the same format as show above.

That's it really. At the end of the day if you've loaded all your JavaScript and CSS resources via the aliroResourceLoader you never have more than 2 HTTP requests.

Aliro Documentation : AliroResourceLoader