This document discusses integrating front-end tools like Grunt and Bower with build tools like Maven to improve the front-end development workflow for Java web apps. It outlines how Maven currently uses plugins like wro4j for tasks like JavaScript minification and CSS compilation. Grunt and Bower are proposed as alternatives that offer more tasks and easier setup than wro4j. Integrating Grunt and Bower through shell commands makes them extensible to work with various build tools like Maven. Example setup and code for both development and production environments using Maven will be shared.

1. grunt + bower + mvn
For A Better Front-End Workflow for Java Web Apps

2. Objective
To see how integrating modern front end workflow tools like grunt and bower
with other build tools can ease development and deployment.
Maven (with wro4j plugin) has been used as an example but the idea can be
extended to other build tools.

3. mvn
• Maven - A tool used for building and managing Java-based
projects.
• Alternatives – ant, gradle
• Uses plugins for front-end tasks
o wro4j (JS/CSS file grouping/minification/uglification, lint etc.)
o less4j (Less to CSS)
o wro4j extensions for Sass, Google Closure, CoffeeScript etc.

4. grunt
bower
• JS task runner to automate repetitive tasks
• Examples - JS compression/min, Less compilation, CSS min,
image optimization, JS lint etc.
• Everything that wro4j does + a LOT more!!
• Front-End package manager
• Easy version management, no need to check in libraries
http://bower.io/
http://gruntjs.com/

5. Advantages
• Easier setup – from changing a few files (wro4j) to a few lines (grunt)
• Grunt is JS developer friendly
• A lot more variety of tasks with grunt
• Performance improvement
o moving tasks like RequireJS project compilation/min, Less
compliation/min saves atleast 5-10 seconds (V8 vs Rhino)
• Move away from Eclipse (or other IDEs) to your favorite editor in
development environment
• Integration based on shell command execution (both bower and
grunt) – easily extensible to other build tools.

6. Setup & Code
Setup and code for both – development and production environment
deployment will be made available in the final presentation and also on github.
Maven will be used as an example