The Wheel: Assetic
The Wheel: Assetic
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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.
Opinions expressed by DZone contributors are their own.