Software Tips & Tricks

Being an “unofficial” template engine in Symfony2, Smarty(Bundle) needs to catch up with its Twig and PHP counterparts to provide the same integration and range of features. One of the features missing in SmartyBundle was until recently Assetic.

Assetic

Assetic is an asset management framework for PHP written by Kris Wallsmith. Although this library is available for every PHP project I’m focusing in Symfony2 integration.

For a complete overview of the usage of Assetic in Symfony context please refer to the following cookbook entries:

• Symfony2 – How to Use Assetic for Asset Management
• Symfony2 - How to Minify JavaScripts and Stylesheets with YUI Compressor

Usage in SmartyBundle

SmartyBundle provides the same javascripts, stylesheets and image functions supported in Twig and PHP engines. Usage is quite similar to Twig.

Javascripts

Stylesheets

To bring in CSS stylesheets, you can use the same methodologies seen in this entry, except with the stylesheets tag:

Combining Assets

You can also combine several files into one. This helps to reduce the number of HTTP requests, which is great for front end performance. It also allows you to maintain the files more easily by splitting them into manageable parts. This can help with re-usability as you can easily split project-specific files from those which can be used in other applications, but still serve them as a single file.

Using the same javascripts example as above. Note the usage of commas to separate assets.

In the dev environment, each file is still served individually, so that you can debug problems more easily. However, in the prod environment, this will be rendered as a single script tag.

Block attributes

Here is a list of the possible attributes to define in the block function.

• assets: A comma-separated list of files to include in the build (CSS, JS or image files)
• debug: If set to true, the plugin will not combine your assets to allow easier debug
• filter: A coma-separated list of filters to apply.
• combine: Combine all of your CSS and JS files (overrides `debug`)
• output: Defines the URLs that Assetic produces
• var_name: The variable name that will be used to pass the asset URL to the <link> tag

Full example

And now here goes an example using all available attributes:

This is work in progress

That’s right, Assetic support in SmartyBundle still requires some real world usage to get rid of its sharp edges and bring it to production level. If you are able to give it a try, test it for a bit and bring your complains over to SmartyBundle issue tracker. I’ll appreciate it!