During the last February I’ve had the chance to be a speaker at Zend Framework Day in Italy where I made a talk about zf2 modules. I think the topics covered deserve more time and space, so this blog post is the first of a series about how to take advantage of new ZF2 modular structure.
One of the first issues a developer runs into when dealing with ZF2 modules is how to arrange assets between modules. A Web asset is simply any css file, js library, image (and generally all static files) a module needs to work properly.

The problem: where assets should be placed?

The first problem to solve is: where my module’s assets should be placed to let me (the developer) forget about them? Because I should not care about assets provisioning, I would spend my time working on module itself! To simplify the problem, let me break it into two (not so) different use cases.

Shared assets

A module probably has many shared assets with other modules: javascript libraries, images, css files, etc. A common practice is to place all of them inside the project /public folder. Despite this is the simplest solution, it’s not the best. Copy/paste manually is never a good practice, besides copying all files inside the same folder will contribute to lose the explicit dependencies the module has with its assets.

Single module’s assets

In many cases a module has also some assets being used only by itself. We know that a module should focus on a single project functionality, so it should contain all the things that functionality needs to work well. The simplest answer now is probably the best: we should place all assets inside the module.

Some naive solutions

How should we make the web server aware that out modules have some assets that need to be visible inside our view scripts?

We could copy all assets (also those needed by a single module) inside public folder, every time one of them is added or updated. This is a bad practice, trust me!

We could use symlinks to let files be viewed inside another folder. Or we could do some apache htaccess tuning to let web server search files through all module folders. Luckily, there is a better way to handle things…

Welcome AssetManager module

AssetManager is a ZF2 module (https://github.com/RWOverdijk/AssetManager) aimed at managing assets, that resolve exactly our problem. It’s based on the Assetic asset management framework for PHP (https://github.com/kriswallsmith/assetic).

I don’t cover module provisioning and installation phases here because online there are straightforward and well organized articles about this (take a look on module’s wiki: https://github.com/RWOverdijk/AssetManager/wiki).

Instead, here I would like to explain how this module can be a real time (and headache) saver for all ZF2 developers.

After completing the install process, the module can take care of your assets through two simple steps:

1. Create a folder where assets should be placed. I typically suggest to use the /assets folder inside your module. Obviously you’re free to use whatever name you prefer. Sometimes you find assets inside a folder named /public, but this could be confused with the folder where the web server points to. So I suggest to choose a different name to make things clear. Use the folder you prefer, but keep in mind the rule of thumb: use always the same location inside all your modules, to make them more clear and readable.
2. Add the following rule to your module’s configuration file (/config/module.config.php – “assets” refers to the folder where your assets are placed):

With this two simple steps we are telling the AssetManager where the assets of our module are placed.

That’s it! Now when an asset is not found inside project /public folder, the AssetManager module’ll look inside our module /assets folder to find the requested file. From now you could link assets inside your views simply as follows:

 

In this way, we don’t need to worry about where our css is physically located, just link it as if it was placed inside /public folder. So simple and so amazing! In this way you can place all module assets (both shared and exclusive) inside the module. So that module is now really reusable inside other projects, without hidden dependencies.

Pay only attention to avoid colliding file rules. It’s not uncommon to have modules containing files with the same name. In this case prefixing the asset path with the module’s name (or slug) could solve the issue (this can be done through the ‘map’ key inside configuration file; take a look on the code in the following paragraphs for an example).

This is the simplest use of AssetManager we could make, but this module has many more features that are worth an extra look. Let me define some terms the module uses (each of this maps to a key of module’s config file):

• Resolvers (resolver_configs key) allow to define where assets should be searched and how they are named / arranged. Many resolver types are available: MapResolver, CollectionResolver, PrioritizedPathsResolver and PathStackResolver (detailed infos and examples available here: https://github.com/RWOverdijk/AssetManager/wiki/Resolvers)
• Filters (filters key) allow make some processing on assets before serving them (eg. Minify minification, compiling of css files)
• Cache (caching key), as the name suggest, allows to choose which caching policy use to speed up assets serving time

An example

It’s a common practice to merge css files in order to limit the number of http requests (improving page serving speed). The AssetModule could help us to merge files automatically. Supposing our module has two css files (main.css and custom1.css), we could merge them together simply updating module’s config file as follows:

 

And the resulting view script is:

More code samples can be found on official module wiki (https://github.com/RWOverdijk/AssetManager/wiki), that’s really well written and full of useful examples.

Conclusion

There are other ZF2 modules that provide asset management features. I personally like AssetManager because it’s really effective and simple to use. However is not important which module you decide to use, the important thing is that you should stop right now to manage assets manually. It’s a real boring and time wasting task, especially in the long run.

So now you’ve no excuses, this module requires no more than a few minutes to be installed and configured. Go and give it a try! And… after having configured your assets, don’t forget to enable AssetModule’s cache. That’s really a must to offer decent website performance and hence a good user experience.

For those who prefer a talk-like explanation, the extract of my Zend Framework Day presentation about this topic can be found here.

Image credit: http://www.flickr.com/photos/tracyleephoto/8322509672