The document discusses integrating Maven and Grunt in build processes, emphasizing speed as a primary requirement, with Grunt being significantly faster than Maven. It highlights the need for collaboration and proper code organization, suggesting the use of the atomic design approach for improving efficiency in AEM projects. The document also introduces the eirslett/frontend-maven-plugin as a solution to streamline the installation and execution of necessary tools within a unified build pipeline.

1. MAKING MAVEN AND
GRUNT PLAY NICE
Presented by Zoran Nikolovski

2. • The number one requirement from a build process is SPEED
• Maven is a great build tool
– Not exactly known for it’s speed of execution
– On average a maven AEM build takes 4-8 minutes to complete
• Grunt builds consistently take <1min

3. • Maven and Grunt have more similarities than differences
– Dependency management
– Plugin management
– Assembly and composition
– Orchestration
– Deployment
– Reporting

4. • So why are we butting heads over which tool to use?
– Generally it’s to do with CSS precompilers
– And specific code organisation requirements in AEM
• Can we all just get along?

5. OF COURSE WE CAN!

6. • Couple of pre-requisites
– Certain organisational skills
– The WILL to work TOGETHER

7. • Couple of pre-requisites
– Certain organisational skills
– The WILL to work TOGETHER
• Really – I cannot stress this enough

8. • Code organisation and structure
– Use the atomic design approach
– Have a clientlib per component (module/molecule) with a common category
• categories="[common-component.category]"
– “Assemble” them in a main etc clientlib
• categories="[common-content.category]”
• embed="[common-component.category]”

9. • Working TOGETHER
– One code base – these days with Sightly it’s even easier
• The component is an HTML file!
– Everyone works in AEM
• No STATIC HTML
– This has many, MANY benefits
• Collaboration
• Joined ownership
• Visibility
• Transparency
• …

10. • Make Maven Grunt
– The missing link: eirslett/frontend-maven-plugin[0]
• Automatically installs Node.js
• Automatically installs NPM
• Automatically installs Grunt
• Runs according the Gruntfile.js
– Have you figured out the coolest thing?
[0]: https://github.com/eirslett/frontend-maven-plugin

11. • Make Maven Grunt
– The missing link: eirslett/frontend-maven-plugin
• Automatically installs Node.js
• Automatically installs NPM
• Automatically installs Grunt
• Runs according the Gruntfile.js
– Have you figured out the coolest thing?
• No need to drag all these installables around!

12. • Make Maven Grunt
– If using SASS is your thing
• Have your SASS file under the component clientlibs
• Don’t check in CSS into SCM
• Configure grunt to compile your SASS -> CSS in the /target folder
– /src/main/content/jcr_root/content/project/app/components/component/clientlibs/sass/file.scss ->
/target/classes/apps/components/component/clientlibs/css/file.css

13. • Make Maven Grunt
– Use profiles
• Allow front-end build to run independently from back-end
• Speed!!!
– Grunt vault plugin to push changes to AEM

14. • Make Maven Grunt
– Use profiles
• Allow front-end build to run independently from back-end
• Speed!!!
– Grunt vault plugin to push changes to AEM
– CAVIET!
• Make sure to always touch the css.txt and js.txt files for all clientlibs!
• This will ensure that AEM will refresh them

15. • Make Maven Grunt
– The rest is really the same
– Still using maven vault plugin to install items to AEM
– Profiles to encapsulate properties for each environment
– Curl to deploy artefacts
– The back-end build still takes 4-8 minutes to complete
• Which is OK because we’re patient 

16. • Benefits
– One shared build pipeline
• Adding profiles allow you to control what gets executed
– Speed
• Front-end won’t trade-in speed for collaboration
– Transparency
• No more STATIC files and integration nightmare
– Portability
• The tools and their configuration are encapsulated in the project

17. THANK YOU!
• Presentation: Will be on SlideShare