wicketstuff-merged-resources: New (much simpler) Version

September 24th, 2009 by  |  Published in Java, Wicket, wicketstuff-merged-resources  |  6 Comments

It’s been a while since I’ve last posted here. Nevertheless, I’ve been busy working on some (yet to be released) Open Source projects. Others are already released but not documented/promoted yet. One of these unpromoted releases is the new version of wicketstuff-merged-resources.  wicketstuff-merged-resources was the result of my “Wicket Interface Speed-up” series where I investigate how to reduce time spent rendering Wicket pages on the client side. wicketstuff-merged-resources has two main purposes: reducing the number of HTTP requests by merging resources (i.e. JS and CSS files) and enabling aggressive caching (up to a year) by adding a version number to mounted resources (e.g. /css/all-42.css instead of /css/all.css). While wicket has the option to add a timestamp to references (something like /css/all.css?t=20090924), adding the version to the name is preferred over adding a query string. This said, let’s see how to use wicketstuff-merged-resources’ new version.

The main class now is ResourceMount which replaces the deprecated ResourceMountHelper (already removed in trunk version). Mounting is now much simpler. Just see this example:

ResourceMount mount = new ResourceMount()
.setResourceVersionProvider(new RevisionVersionProvider())
.setPath("/style/all.css")
.addResourceSpecsMatchingSuffix(PanelOne.class, ComponentB.class, MyForm.class)
.mount(this);

Note that you still use the resources as you are used to, e.g.

add(HeaderContributor.forCss(MyForm.class, "MyForm.css"));
add(HeaderContributor.forJavaScript(MyForm.class, "MyForm.js"));

This example simply mounts PanelOne.css, ComponentB.css and MyForm.css into a single file at /style/all.css (the suffix “.css” is determined from the path – “/style/all.js” would mount all “.js” files). Additionally, the RevisionVersionProvider is used to determine which version to append (you may implement your own IResourceVersionProvider that best fits your environment). For example, the merged file may be mounted at /style/all-42.css (while still being available at /style/all.css through a permanent redirect).

While ResourceMount tries to autodetect most properties of the merged resource (e.g. style, locale, compression) it comes with a ton of customization options. For instance, it’s possible to use a custom IRequestTargetUrlCodingStrategy. Doesn’t that sound interesting to you? Well, we used this option to upload all resources to Amazon Simple Storage Service/CloudFront in order to transparently leverage Amazon’s CDN by simply mounting them in our applications (Isn’t that awesome? Stay tuned for another blog post!).

Jörn Zaefferer suggested adding wicketstuff-annotations-like mounting of (merged) resources using annotations, which will hopefully be added in a later version. In the meantime, I may provide Jörn’s solution for those interested (Jörn, you don’t mind, do you?) – just leave a message.

Additional feature include CSS compression using Yahoo’s YUI Compressor and resource preprocessing. The later is particularly interesting, as you might implement things like replacing colors in CSS files or add internationalization from .properties files to JS files – just implement the IResourcePreProcessor interface (or use StringResourcePreProcessor if your only dealing with Strings).

I think I’ve mentioned the most important features now. Just see wicketstuff-merged-resources in WicketStuff’s Wiki for more (and possibly up-to-date) documentation. If you have any questions, don’t hesitate to post a comment!

Responses

  1. Richard Wilkinson says:

    September 25th, 2009 at 9:30 am (#)

    Looks good, will have a look when i get chance.

  2. Nino says:

    September 25th, 2009 at 12:18 pm (#)

    Here:

    This example simply mounts PanelOne.css, ComponentB.css and MyForm.css (the suffix “.css” is determined from the path – “/style/all.css” will mount all “.js” files) into a single file at /style/all.css.

    dont you mean “all “.css” files”?

  3. Stefan Fußenegger says:

    September 25th, 2009 at 12:28 pm (#)

    Good catch. Fixed it, thanks.

  4. Jörn Zaefferer says:

    September 27th, 2009 at 10:29 pm (#)

    Hey Stefan,

    feel free to release the example code I provided.

  5. Alex says:

    November 21st, 2009 at 11:34 pm (#)

    I find this very interesting. Though, you may take a look at a tool you can easily integrate in any project. It is called wro4j (http://code.google.com/p/wro4j/). Using wro4j, you can include any kind of resources, even from classpath (css, js) and merge them easily, thus drastically improving web performance.

    Alex Objelean

  6. Stefan Fußenegger says:

    November 23rd, 2009 at 8:59 am (#)

    Hi Alex, thanks for your comment. I’ve already heard of wro4j. I wanted to look into its code base ant see if I could integrate parts of it. Currently, I don’t see any other possibilities to make use of it, or do you?

Leave a Response