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 + Node = Awesome
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
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>Maven + Node = Awesome
There is a lot of set up to get these things to work.....
Iron (Fe)
beta
- An opinionated yet flexible FrontEnd development framework
- FrontEnd project scaffolding
- Component and Client Library generation
- Blueprint for FrontEnd build tools
beta
Sample Project
The End
Questions?
Contact Me
CIRCUIT 2015 - Iron
By Ben Westrate
