Iron(Fe)

Follow along : http://bit.do/ironfe

Ben Westrate 

Technical Specialist at ICF Olson

A YEAR IN REVIEW

v2

Overview

  • Why Front End Build Tools?

  • Iron(Fe) Introduction

  • The problems Iron(Fe) solves

  • Problems Iron(Fe) wont solve 

  • What has changed sense last year?

  • Does Iron(Fe) actually help with the dev process? 

#CIRCUIT16

Why Front End Build Tools?

  1. ​Development speed
  2. Code organization 
  3. Reusability 

#CIRCUIT16

Why Front End Build Tools?

Lets talk "server side" javascript

  • File System api
  • Web servers
  • Javascript build tools 

#CIRCUIT16

Why Front End Build Tools?

Development Speed

#CIRCUIT16

Why Front End Build Tools?

Code organization & reusability

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

#CIRCUIT16

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

#CIRCUIT16

Maven + Node = Awesome

#CIRCUIT16

Maven + Node = Awesome

Maven Front End Plugin

Slice 1 Created with Sketch.

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 

#CIRCUIT16

Maven + Node = Awesome

Maven Front End Plugin

Slice 1 Created with Sketch.

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>

#CIRCUIT16

Maven + Node = Awesome

Maven Front End Plugin

Slice 1 Created with Sketch.

Iron(Fe)

#CIRCUIT16

Iron(Fe) Introduction

  • An opinionated build scaffolding framework
  • A project organization tool 
  • Forces your team develop front end code in small maintainable pieces of code

Iron(Fe): 

#CIRCUIT16

The problems Iron(Fe) solves

  • Iron will take the guess work out of setting up a project
  • Iron will make assumptions about naming and project structure 
  • Iron will set up the maven tasks for you to make it easy for your back end team to accept using node in the AEM project 

#CIRCUIT16

Problems Iron (Fe) WON'T solve 

  • Iron will not build or bundle your front end code
  • Iron will not make assumptions about the way you bundle your javascript or css

Why Not???

#CIRCUIT16

What's Changed?

#CIRCUIT16

What's Changed?

  • I removed the old command line interface and replaced it with more proper command line interface. 
  • Removed the one massive .ironrc file that kept a list of every component, bundle and client library 

#CIRCUIT16

Does Iron(Fe) actually help with the dev process?

#CIRCUIT16

Sample Project

#CIRCUIT16

Thank You

Questions?

Contact Me

Twitter : @BenWestrate

Email : benjamin.westrate@icfolson.com

Github : https://github.com/benwestrate

#CIRCUIT16

Iron(Fe) - A Year in Review

By Ben Westrate

Made with Slides.com

Iron(Fe) - A Year in Review

  • 1,436

More from Ben Westrate