Home > Java > WebJars and wro4j integration

WebJars and wro4j integration

WebJars is an easy way for server-side developers (such as your humble servant) to manage client-side resources such as Bootstrap, jQuery and their like, within the same package management tool they use for their server-side libraries.

In essence, what WebJars does is package a set version of the client-side resource (CSS or JavaScript) in the META-INF/resources of a JAR and upload it on Maven Central. Then, any Java EE compatible web-container makes the resource available under a static URL. For example, for a JAR packaging META-INF/resources/webjars/bootstrap.3.0.3/js/bootstrap.js, it can be referenced by webjars/bootstrap/3.0.3/css/bootstrap.css.

Most providers offer a minified version of their resource, and it is packaged along in the JAR, so using a minified resource is a no-brainer (if the minified resource is packages along, of course). However, when using multiple WebJars, this increases the number of browser requests. Outside the context of WebJars, minimizing the number of requests could easily be achieved by using wro4j, a tool that manages both minifying and merging resources through lists of pre- and post-processors. A typical wro4j use-case was already described in an earlier article.

The good thing is that WebJars and wro4j can be integrated with ease through wro4j.xml configuration file. As it stands, wro4j.xml configures resources merging. Those resources may come from a variety of sources; typically, they are internal resource and are referenced by their path relative from the webapp root:

/sample.css

However, the power of wro4j is to be able to reference other kind of resources, including those packaged inside JARs:

classpath:META-INF/resources/webjars/bootstrap/3.0.3/css/bootstrap.css

And with this configuration line only, we merge the resource inside the WebJar with other resources. From this point on, the merged resource can be referenced as the single resource inside our webapp. The following displays a wro4j configuration file that creates a compound.css file from an internal sample.css and the Bootstrap WebJar.



    
        classpath:META-INF/resources/webjars/bootstrap/3.0.3/css/bootstrap.css
        /sample.css
    

An example project in Maven/IntelliJ format is provided as an attachment.

Warning: though having a single minified resource for JavaScript (and one for CSS) improves performance with HTTP/1.1, it seems it might not be the case with HTTP/2.0.

email
Send to Kindle
Categories: Java Tags: , , , ,
  1. Alex
    January 20th, 2014 at 10:40 | #1

    There is even better approach for using webjars. Since release 1.7.0, a dedicated webjar locator is available which uses webjars-locator library to fetch webjars resources.

    As result, it is possible to refer webjars like this:
    webjar:jquery.js

    This will load the jquery webjar is such is available in the classpath. The advantage of this approach is that you don’t have to specify explicitly the version of the webjar in the resource path. Another benefit of using this locator is simplified upgrade of the webjar dependency with no need to update the resource path at all.

    More details are documented here:
    https://code.google.com/p/wro4j/wiki/ResourceTypes

  2. January 26th, 2014 at 12:02 | #2

    @Alex
    Thanks for the hint (and for your library :-))

  3. Rayleigh
    February 4th, 2014 at 12:44 | #3

    I once read this webjars thing had some performance problems, as if I remember correctly, it grabs a lock in the jvm when somebody tries to access some of its resources. Does anybody have more information about this?

  1. No trackbacks yet.