SlideShare a Scribd company logo
grunt + bower + mvn
For A Better Front-End Workflow for Java Web Apps
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.
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.
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/
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.
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

More Related Content

PPTX
DevDay 2018 - Blazor
PDF
NodeSummit - MEAN Stack
PDF
Automate your WordPress Workflow with Grunt.js
PPTX
PPTX
MEAN stack
PDF
The MEAN Stack
PDF
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
PDF
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
DevDay 2018 - Blazor
NodeSummit - MEAN Stack
Automate your WordPress Workflow with Grunt.js
MEAN stack
The MEAN Stack
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...

What's hot (19)

PDF
Preprocessor Workflow with Grunt
PDF
Firebase and AngularJS
PDF
Daniel Steigerwald - Este.js - konec velkého Schizma
PPTX
NWJS. Web on desktop
PPTX
Introduction to git & WordPress
PDF
Making websites with WordPress
PPTX
PHP Indonesia - Nodejs Web Development
PDF
Afrimadoni the power of docker
PPTX
Introduction to JS frameworks
PDF
MEAN Stack - Google Developers Live 10/03/2013
DOCX
Javascript - Today's trending script
PDF
Gulp.js & webpack
PDF
The shift to the edge
PPTX
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
ODP
Sfd hanoi2012 nguyen ha duong yang node.js-intro
PDF
WebAssembly with Rust
PDF
Front-end development automation with Grunt
PDF
Javascript fullstasck
PPTX
The Saga of JavaScript and TypeScript: Part 1
Preprocessor Workflow with Grunt
Firebase and AngularJS
Daniel Steigerwald - Este.js - konec velkého Schizma
NWJS. Web on desktop
Introduction to git & WordPress
Making websites with WordPress
PHP Indonesia - Nodejs Web Development
Afrimadoni the power of docker
Introduction to JS frameworks
MEAN Stack - Google Developers Live 10/03/2013
Javascript - Today's trending script
Gulp.js & webpack
The shift to the edge
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
Sfd hanoi2012 nguyen ha duong yang node.js-intro
WebAssembly with Rust
Front-end development automation with Grunt
Javascript fullstasck
The Saga of JavaScript and TypeScript: Part 1
Ad

Similar to Integrating grunt and bower with maven (20)

PDF
Extending Build to the Client: A Maven User's Guide to Grunt.js
ODP
Introducing Yeoman 1.0 beta
ODP
Front-end tools in java webapps
PDF
Frontend Build Tools - CC FE & UX
PDF
Modern Web Application Development Workflow - EclipseCon US 2014
PDF
The Secrets of The FullStack Ninja - Part A - Session I
PDF
Modern Web Application Development Workflow - EclipseCon France 2014
PDF
Modern Web Application Development Workflow - EclipseCon Europe 2014
PDF
What a Back-end Java Developer Doesn't Know About the Modern Web Stack-final
PDF
Modern Web Application Development Workflow - web2day 2014
PDF
Bower & Grunt - A practical workflow
PDF
Introduction maven3 and gwt2.5 rc2 - Lesson 01
PDF
Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20
PDF
Grunt.js and Yeoman, Continous Integration
PDF
Java Power Tools 1st Edition John Ferguson Smart
PDF
JLPDevs - Optimization Tooling for Modern Web App Development
PPT
Bootstrapping angular js with bower grunt yeoman
PDF
Modernizing Your WordPress Workflow with Grunt & Bower
PDF
BP-10 Keeping Your Sanity – Rapid Development & Deployment Tools
PDF
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
Extending Build to the Client: A Maven User's Guide to Grunt.js
Introducing Yeoman 1.0 beta
Front-end tools in java webapps
Frontend Build Tools - CC FE & UX
Modern Web Application Development Workflow - EclipseCon US 2014
The Secrets of The FullStack Ninja - Part A - Session I
Modern Web Application Development Workflow - EclipseCon France 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
What a Back-end Java Developer Doesn't Know About the Modern Web Stack-final
Modern Web Application Development Workflow - web2day 2014
Bower & Grunt - A practical workflow
Introduction maven3 and gwt2.5 rc2 - Lesson 01
Continuous Integration with Open Source Tools - PHPUgFfm 2014-11-20
Grunt.js and Yeoman, Continous Integration
Java Power Tools 1st Edition John Ferguson Smart
JLPDevs - Optimization Tooling for Modern Web App Development
Bootstrapping angular js with bower grunt yeoman
Modernizing Your WordPress Workflow with Grunt & Bower
BP-10 Keeping Your Sanity – Rapid Development & Deployment Tools
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
Ad

Recently uploaded (20)

PDF
Human-AI Collaboration: Balancing Agentic AI and Autonomy in Hybrid Systems
PPTX
Module 8- Technological and Communication Skills.pptx
PDF
Visual Aids for Exploratory Data Analysis.pdf
PPTX
introduction to high performance computing
PPTX
Fundamentals of safety and accident prevention -final (1).pptx
PDF
BIO-INSPIRED ARCHITECTURE FOR PARSIMONIOUS CONVERSATIONAL INTELLIGENCE : THE ...
PPTX
"Array and Linked List in Data Structures with Types, Operations, Implementat...
PDF
Abrasive, erosive and cavitation wear.pdf
PDF
Unit I ESSENTIAL OF DIGITAL MARKETING.pdf
PPTX
communication and presentation skills 01
PPTX
Management Information system : MIS-e-Business Systems.pptx
PDF
null (2) bgfbg bfgb bfgb fbfg bfbgf b.pdf
PDF
BIO-INSPIRED HORMONAL MODULATION AND ADAPTIVE ORCHESTRATION IN S-AI-GPT
PPT
Occupational Health and Safety Management System
PDF
PREDICTION OF DIABETES FROM ELECTRONIC HEALTH RECORDS
PDF
Artificial Superintelligence (ASI) Alliance Vision Paper.pdf
PPTX
Sorting and Hashing in Data Structures with Algorithms, Techniques, Implement...
PDF
Exploratory_Data_Analysis_Fundamentals.pdf
PPT
Total quality management ppt for engineering students
PDF
UNIT no 1 INTRODUCTION TO DBMS NOTES.pdf
Human-AI Collaboration: Balancing Agentic AI and Autonomy in Hybrid Systems
Module 8- Technological and Communication Skills.pptx
Visual Aids for Exploratory Data Analysis.pdf
introduction to high performance computing
Fundamentals of safety and accident prevention -final (1).pptx
BIO-INSPIRED ARCHITECTURE FOR PARSIMONIOUS CONVERSATIONAL INTELLIGENCE : THE ...
"Array and Linked List in Data Structures with Types, Operations, Implementat...
Abrasive, erosive and cavitation wear.pdf
Unit I ESSENTIAL OF DIGITAL MARKETING.pdf
communication and presentation skills 01
Management Information system : MIS-e-Business Systems.pptx
null (2) bgfbg bfgb bfgb fbfg bfbgf b.pdf
BIO-INSPIRED HORMONAL MODULATION AND ADAPTIVE ORCHESTRATION IN S-AI-GPT
Occupational Health and Safety Management System
PREDICTION OF DIABETES FROM ELECTRONIC HEALTH RECORDS
Artificial Superintelligence (ASI) Alliance Vision Paper.pdf
Sorting and Hashing in Data Structures with Algorithms, Techniques, Implement...
Exploratory_Data_Analysis_Fundamentals.pdf
Total quality management ppt for engineering students
UNIT no 1 INTRODUCTION TO DBMS NOTES.pdf

Integrating grunt and bower with maven

  • 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