Assetic

Painless asset management in Symfony

David Buchmann, Liip AG, 31.5.2011

Agenda

• Introduction
• Basics
• Symfony integration
• Write Less css
• Minify css and js
• The future

What is assetic?

• Framework to manage assets
• Stylesheets, Javascript, Images
• Assetic can be used stand alone
• But very nicely integrated into symfony
• Provides a twig extension
• Written by Kris Wallsmith

Benefits

• Facilitate development process with css/js language extensions
• Improve frontend performance by collating and compacting files

Existing filters

• Javascript: CoffeeScript, GoogleClosure, Sprockets, Yui\JsCompressor
• CSS: CssImport, CssMin, CssRewrite, Less/Lessphp, Sass\Compass, Sass\Sass, Sass\Scss, Stylus, Yui\CssCompressor
• Images: Jpegoptim, Jpegtran, OptiPng, Pngout, CssEmbed

Twig

{% stylesheets output="assets/style.css"
    'path/to/Resources/css/yahoo-reset.css'
    'path/to/Resources/css/main.css'
    'path/to/Resources/css/misc.css'
%}
<link href="{{ asset_url }}" media="screen"
    type="text/css" rel="stylesheet" />
{% endstylesheets %}

Performance in mind

• Output all data in one file for performance

The developper in mind

• But separate files in development environment

Production

<link rel="stylesheet" type="text/css"
  media="screen" href="/assets/style.css?1">

Development

<link rel="stylesheet" type="text/css"
  media="screen" href="/main_dev.php/assets/
style_yahoo-reset_1.css">
<link rel="stylesheet" type="text/css"
  media="screen" href="/main_dev.php/assets/
style_main_2.css">
...

Development environment

• Symfony controller for development - or use:
• app/console assetic:dump --watch

YUI Compressor

• Compact javascript and css
• You only want this in non-debug context

YUI filter: config.yml

assetic.filters:
yui_css:
  jar: "%kernel.root_dir%/Resources/java/
yuicompressor-2.4.6.jar"
  apply_to: "\.css$"
yui_js:
  jar: "%kernel.root_dir%/Resources/java/
yuicompressor-2.4.6.jar"
  apply_to: "\.js$"

• apply_to matches on the output extension

Disable in dev: config_dev.yml

assetic.filters:
yui_css:
  jar: "%kernel.root_dir%/Resources/java/
yuicompressor-2.4.6.jar"
  apply_to:
yui_js:
  jar: "%kernel.root_dir%/Resources/java/
yuicompressor-2.4.6.jar"
  apply_to:

• apply_to matches on the output extension

Write Less css

• Less is a superset of css
• Adding what you always missed in css
• Variables: color: @mycolor
• Calculations: height: 20 * 3 px
• Nesting, mixins

Nesting blocks

.header {
    background: red;
    a {
        color: green;
        :hover {
            color: blue;
        }
    }
}

Mixins

@some_mixin(@width: 200px;@radius) {
    border-radius: @radius;
    width: @width
}
.first {
    @some_mixin(300px; 2em);
}

.second {
    @some_mixin(;4px);
    // blank argument takes default value
}

Twig

{% stylesheets output="assets/style.css"
    'path/to/Resources/css/yahoo-reset.css'
    'path/to/Resources/less/main.less'
    'path/to/Resources/less/misc.less'
%}
  <link href="{{ asset_url }}" media="screen"
    type="text/css" rel="stylesheet" />
{% endstylesheets %}

Define asset collections

assetic:
  filters:
    ...
  assets:
    myjs:
      inputs:  js/this.js, js/that.js
      filters: yui_js

And in your template...

{% javascripts output="page.js"
                      "@myjs"
                      "js/other.js"
%}
...
{% endjavascripts %}

Current gotchas

• Globs (*.css) do not work
• Be careful with output="..." - no check for name clashes

Other things

• Automatically collate images into sprites
• Bundles should be able to add stylesheets / scripts to an asset collection
• New filters added every month, easy to write your own if needed.
  Who wants to write a jslint filter?
• Stabilize configuration and documentation

Links

• Code and general doc github.com/kriswallsmith/assetic
• Documentation on Assetic in Symfony? Just a fragment for now: symfony.com/doc/current/cookbook/assetic/yuicompressor.html