The Wheel: Assetic

DZone 's Guide to

The Wheel: Assetic

· Web Dev Zone ·
Free Resource

Serving your static files such as JavaScript libraries and CSS is easy right? You just host them somewhere inside the document root of your web application and provide a link to them to the client by embedding references in the HTML code via the <script> or <style> tags.

However, modern web applications have lots more problems to solve in this context:

  • performance optimization sometimes requires to pack all files of the same type into a single generated package, to avoid the overhead of multiple HTTP connections being established.
  • The content of the static files can be minified and compressed for the same reasons at the source code level (while it can also be gzipped by the web server in an orthogonal way).
  • Some languages such as SASS (an extension to CSS) and CoffeeScript require to be compiled to their base languages before being served.
  • All these built versions of what is really sent to the client may be cached to avoid the same work to be performed on each request, given their static nature that change only with new deployments.
  • And there are more...


Not only Assetic offers solutions to these common problems, but also to more of them. Its vision is to cover the whole pipeline that goes from source files at higher level of abstraction of development-optimized syntax to the "binaries" sent over HTTP.

Here's an example straight from the README of the project:

$css = new AssetCollection(array(
  new FileAsset('/path/to/src/styles.less', array(new LessFilter())),
  new GlobAsset('/path/to/css/*'),
), array(
  new Yui\CssCompressorFilter('/path/to/yuicompressor.jar'),
// this will echo CSS compiled by LESS and compressed by YUI
echo $css->dump();

In this small example, a .less source file is compiled to CSS and it is added to the collection of all *.css files in a particular tree. A compressor is used to remove spaces and other sugar syntax from the result in order to output less bytes as possible.

Assetic features don't stop here, comprehending cache busting and the possibility to write to files, or even integration with Twig. The README itself and the docs written in Markdown cover pretty well what you can do with this tool, so I won't go into more detail on the API.

Not Invented Here

Assetic integrates heterogeneous technologies such as SASS, LESS, CoffeeScript, Dart, and other tools that do not change the language but work on the form of your code. For this reason, Assetic does not fall into the Not Invented Here syndrome and provides only PHP wrappers to the external tools that do the job, being them present on the PATH environment variable or available as executable .jar packages to be configured.

For this reason, the strict dependencies present in the composer.json manifest of the project are just a 5.3 version of PHP and the Symfony Process component (to execute external tools for compilation and optimization purposes, tasks that Assetic calls with the umbrella name *filtering*).

Of course, however, suggested dependencies tell you what you have to link to Assetic to get the specific functionalities, such as the lessphp. Unfortunately, some binary dependencies such as dart2js cannot be easily managed via Composer (at least right now), so you will have to download, install and version the utility yourself.


Whenever you need to serve more than a few .css and .js files, or have some build steps to execute on them, Assetic is the tool of choice for ensuring this work is only performed as many times as necessary. In a world of heterogeneous web technologies, Assetic tries to give you a single API that accepts almost any kind of file and output a single compiled package of JavaScript or CSS code, simplifying referral code inside your application to a pair of static lines.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}