History

Lately I observe that the Node.js ecosystem provides much more (and better!) tools for building web applications. For example there are tools to generate CSS like Less.js, SASS, Stylus, minimizers like Clean CSS, Uglify JS, linting tools like JSHint and JSLint and many more. All these are available in the JVM world via Rhino but it is kind of slow… Maybe it will get better with Nashorn with Java 8 but it will take some time. And someone, like Wro4j, will have to create adapters for all these useful tools.

The solution

In my opinion it is much better to utilize the above tools directly with Node.js with its build tools like Gulp, Grunt, Gear, etc.

To accomplish that the most easier way I’ve found is by using frontend-maven-plugin

• a Maven plugin that downloads Node.js for you and integrates with Gulp and Grunt.

Note: there is a Gradle plugin in the works by the same author!

Demo application

At my GitHub account you may find a demo application that uses Less to create the CSS resources and JSHint and UglifyJS to lint and minimize the JavaScript resources. At pom.xml we use frontend-maven-plugin to execute the default Gulp task that cleans and builds the final CSS and JS resources. The usage is as simple as mvn clean compile. At Maven’s generate-sources phase frontend-maven-plugin will execute the Gulp’s tasks.

Note: it will download Node.js and all needed Gulp plugins the first time and save them at ./node/ and ./node_modules/ folders. Make sure to ignore them in your SCM tool!

The usage in Wicket components is as you probably do it now:

  response.render(CssHeaderItem.forReference(new CssResourceReference(HomePage.class, "res/demo.css")));

In src/main/resources/com/mycompany/res folder there is demo.less resource but Gulp’s stylesInPackages task generates demo.css and puts it in the classpath, so everything Just Works™.

Bonus

Most of the Node.js build work flows provide a way to watch the resources for modifications and reload the browser automatically for you to see the changes. In the demo application we define watch task that listens for changes in the Less and JavaScript resources and executes the earlier tasks automatically. Additionally we make use of livereload-jvm at the server side that can notify browser plugins which will reload the page. To try it:

1. execute *gulp watch* on the command line, in the same folder where gulpfile.js is located
2. install the plugin for your preferred browser
3. start the application via Start.java (starts embedded Jetty server and LiveReload-JVM server)
4. open http://localhost:8080 in the browser
5. open demo.less in your IDE and modify the background color to any valid color. Save the change.
6. the browser will reload automatically !

Final words

I have played with all this on Linux. I’m pretty sure it will work flawlessly on Mac too. People say that Node.js support for Windows has become pretty good these days so it should work there too.

I hope you find all this useful!

Since recently Wicket itself uses the solution described above to execute its JavaScript unit tests.

In my daily job we switched from Node.js+less.js based build to Less4j because it is much faster and we have a lot of Less resources!