Modern Front End Build Tools in AEM

CIRCUIT - An Adobe Developer Event

Presented by ICF Interactive

Follow along : https://slides.com/benwestrate/deck/live

Ben Westrate

Technical Specialist at ICFI

Overview

Why I use front end build tools
How do I use these tools with out adding more work for the rest of my team?
Sample Project
Questions

Why Front End Build Tools?

Development speed
Code organization
Reusability

Why Front End Build Tools?

Lets talk "server side" javascript

File System api
Web servers
Javascript build tools

Why Front End Build Tools?

Development Speed

Why Front End Build Tools?

Code organization & reusability

Common JS Modules
Small self contained functionality
Modules can be published for later use on other projects.

Why Front End Build Tools?

{
  "name": "",
  "version": "",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "main": "./lib/index.js",
  "repository": { },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {},
  "homepage": "https://github.com/jzeltman/iron",
  "dependencies": {
    "gulp": "^3.9.0",
  }
}

package.json

But ...

Fear not!

Maven + Node = Awesome

Maven Front End Plugin

What does this gain us?

The full power of node during the maven build!
- Any gulp, grunt, or other node build tool can be run
- Javascript can be linted and compiled
- LESS, SASS, and Sylus can be compiled
All of this can be done with out manually installing node

Maven + Node = Awesome

Maven Front End Plugin

How do you use it?

<plugins>
    <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>0.0.23</version>
        ...
    </plugin>
...

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>...</version>

    <!-- optional -->
    <configuration>
        <workingDirectory>src/main/frontend</workingDirectory>
    </configuration>

    <executions>
      ...
    </executions>
</plugin>

<execution>
    <!-- optional: you don't really need execution ids,
    but it looks nice in your build log. -->
    <id>install node and npm</id>
    <goals>
        <goal>install-node-and-npm</goal>
    </goals>
    <!-- optional: default phase is "generate-resources" -->
    <phase>generate-resources</phase>
    <configuration>
        <nodeVersion>v0.10.18</nodeVersion>
        <npmVersion>1.3.8</npmVersion>
        <!-- optional: where to download node and npm from. Defaults to http://nodejs.org/dist/ -->
        <downloadRoot>http://myproxy.example.org/nodejs/dist/</downloadRoot>
    </configuration>
</execution>

<execution>
    <id>npm install</id>
    <goals>
        <goal>npm</goal>
    </goals>

    <!-- optional: default phase is "generate-resources" -->
    <phase>generate-resources</phase>

    <configuration>
        <!-- optional: The default argument is actually
        "install", so unless you need to run some other npm command,
        you can remove this whole <configuration> section.
        -->
        <arguments>install</arguments>
    </configuration>
</execution>