Asset Helper – Kohana via Kollection module

In relation to my web performance optimization quest, I tried to use another domain (subdomain actually) for my static resources like images, js and css. With this, I’ve created a simple asset helper in addition to my collection of helpers in Kollection module.

kollection – kohana module with some helper classes

My module kollection https://github.com/lysender/kollection is already few months old and now I added this asset helper for my site. So far, there are helper classes for JavaScript and some messaging helper.

Asset helper

The idea behind the asset helper is to generate a URL of arbitrary static resource (image/js/css) and is customizable for using its basic configuration. For now, it has the ability to generate urls for the configured static domain and also support HTTPS via configuration options.

Usage

The helper needs three configuration options: protocol, domain and path_prefix. This configuration is passed to the helper class as an associative array. Ex:

$asset = new Kollection_Asset(array(
    'protocol' => 'http',
    'domain' => 's.lysender.com',
    'path_prefix' => ''
));

To generate the url, you may call it like this:

$this->template->styles = array(
    $asset->asset_url('/media/css/reset.css'),
    $asset->asset_url('/media/css/style.css'),
    $asset->asset_url('/media/css/nav.css')
);

Given the current configuration, it will give this sample URL:

http://s.lysender.com/media/css/reset.css
http://s.lysender.com/media/css/style.css
http://s.lysender.com/media/css/nav.css

It also allows relative paths, HTTPS path and relative protocol path as long as you configure it right on the options. For example, you can leave the protocol blank so that URLs will look like these:

//s.lysender.com/media/css/reset.css
//s.lysender.com/media/css/style.css
//s.lysender.com/media/css/nav.css

Or leave everything blank to use just path either absolute path or relative path depending on what you passed on the asset_url() method. Please note that it does not automatically detects HTTPS protocol. You have to explicitly detect and pass it to the class. Also, it does not use static method nor singleton pattern, just plain simple object.

Integration to Kohana application

Since this is a very simple code, it is fairly easy to integrate to any Kohana application. In my application, I did the following.

• Add kollection module to modules
• Create a config for assets per environment (dev, staging, prod)
• Integrate the asset helper to controller and templates

Add kollection module to modules

You may use git submodules for this or just download the master brand from github. Using submodule, simply run:

git submodule add git://github.com/lysender/kollection modules/kollection

Then enable the module in application/bootstrap.php

// other modules
'kollection' => MODPATH.'kollection'
// other modules

Create a config for assets per environment (dev, staging, prod)

I’ve created a configuration for asset helper specifically for domain option. See below:

<?php defined('SYSPATH') or die('No direct script access.');

return array(
	Kohana::DEVELOPMENT => array(
		'protocol' => 'http',
		'domain' => 's.lysender.darkstar.net',
		'path_prefix' => '/ly'
	),
	Kohana::TESTING => array(
		'protocol' => 'http',
		'domain' => 's.lysender.darkstar.net',
		'path_prefix' => '/ly'
	),
	Kohana::STAGING => array(
		'protocol' => 'http',
		'domain' => 's.lysender.darkstar.net',
		'path_prefix' => '/ly'
	),
	Kohana::PRODUCTION => array(
		'protocol' => 'http',
		'domain' => 's.lysender.com',
		'path_prefix' => '/ly'
	)
);

Integrate the asset helper to controller and templates

I have this base controller that handles templating site wide of my application. I just added a public property asset and use it all over the controller. See below:

	/** 
	 * Asset helper
	 *
	 * @var Kollection_Asset
	 */
	public $asset;
	
	/** 
	 * before()
	 *
	 * Called before action is called
	 */
	public function before()
	{
		parent::before();

		// Initialize asset
		$config = Kohana::$config->load('asset');

		// Load config by environment
		$this->asset = new Kollection_Asset($config[Kohana::$environment]);

		// Set asset helper to view globally
		View::set_global('asset', $this->asset);

		if ($this->auto_render)
		{
			$this->template->styles = array(
				$this->asset->asset_url('/media/css/screen.css')	=> 'screen, projection',
				$this->asset->asset_url('/media/css/print.css')	=> 'print',
				$this->asset->asset_url('/media/css/style.css')	=> 'screen, projection'
			);

			$this->template->scripts = array(
				$this->asset->asset_url('/media/js/jquery-1.4.2.min.js')
			);
		}
	}

Then in my template, nothing is changed except for few manually injected resource like conditional CSS:

<!-- basic styles -->
<?php foreach ($styles as $style => $media)
	echo HTML::style($style.'?v='.APP_VERSION, array('media' => $media)), "\n" ?>

<!--[if IE]>
<?php echo HTML::style($asset->asset_url('/media/css/ie.css?v='.APP_VERSION), array('media' => 'screen, projection')) ?>
<![endif]-->

Class: https://github.com/lysender/kollection/blob/master/classes/kollection/asset.php
Test: https://github.com/lysender/kollection/blob/master/tests/kollection/AssetTest.php

Enjoy!