IAM

ARTICLE

Kohana Javascript and CSS Management using the Media Module

Javascript and CSS files are necessary components of every web application. The Media module for Kohana is written to provide a central responsibility to manage all the assets needed. It will automatically bundle, compress and cache the used files. In addition it is capable of handling dependencies among javascript files.

Update. The usage of the Kohana Media module is also demonstrated in the demo application presented here.

Introduction

The Kohana Media module aims to simplify the management of Javascript and CSS files in modern web applications. Using the singleton pattern, both Javascript and CSS files can be managed all across the web application. Used CSS files are organized according to their media type (e.g. screen or print). The files are compressed using JSMin and CSSMin and bundled in a single file. To accelerate web performance, the bundled files are cached. Kohana Media on GitHub

Configuration

Before getting started, we have a look on the configuration file of the module. By default, the Javascript and CSS files are expected to be found at the following locations:
return array(
  'css' => DOCROOT . 'media' . DIRECTORY_SEPARATOR . 'css' . DIRECTORY_SEPARATOR,
  'js' => DOCROOT . 'media' . DIRECTORY_SEPARATOR . 'js' . DIRECTORY_SEPARATOR,
);

Usage

Note: Kohana::$cache_dir is usually set to application/cache. This will not work for CSS or JS files due to Kohana's rewriting rules. It is recommended to change Kohana::$cache_dir to cache (outside the application directory) using Kohana::init in bootstrap.php.

As the module implements the singleton pattern, we can add JavaScript and CSS files all across the web application. CSS files for different media types (e.g. screen or print) can be added using the provided CSS helper which is accessible via Media::instance()->css($type) and expects the media type to be passed as argument.
Media::instance()->css('print')->add('bootstrap.min.css');
// Or add multiple at once:
Media::instance()->css('screen')->add(array(
  'bootstrap.min.css',
  'application.css',
  // ...
));
For adding javascript files we have to be aware of the dependencies between the files (e.g. all JavaScript plugins of Twitter Bootstrap require jQuery to be loaded first). Again, we use the add method of the provided JavaScript helper to add JavaScript files:
// Bootstrap depends on JQuery.
Media::instance()->js()->add('bootstrap.min.js', array('jquery.min.js'));
// Multiple at once:
Media::instance()->js()->add(array(
  // File => array of dependencies.
  'bootstrap.min.js' => array('jquery.min.js'),
  'bootstrap-datepicker.js' => array('jquery.min.js', 'bootstrap.min.js'),
  // ...
));
The files are bundled, compressed and stored in Kohana::$cache_dir. They can be included within the template using the render method which returns the full filename of the created cached file:
<-- We assume Kohana::$cache_dir to be the directory 'cache' in the root of the application. -->
<script type="text/javascript" src="<?php echo URL::base() . 'cache/' . Media::instance()->js()->render(); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo URL::base() . 'cache/' . Media::instance()->css('screen')->render(); ?>">
<link rel="stylesheet" type="text/css" href="<?php echo URL::base() . 'cache/' . Media::instance()->css('print')->render(); ?>" media="print">
What is your opinion on this article? Let me know your thoughts on Twitter @davidstutz92 or LinkedIn in/davidstutz92.