Frontin'

Integrating frontend build tools into your builds.

REPO
git.io/vcKgy

Jay Landro

front end developer at sdg

OH NO!

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Too Many Scripts</title>

    <script src="awesomeJavaScript1.js" async></script>
    <script src="awesomeJavaScript2.js" async></script>
    <script src="awesomeJavaScript3.js" async></script>
    <script src="awesomeJavaScript4.js" async></script>
    <script src="awesomeJavaScript5.js" async></script>
    <script src="awesomeJavaScript6.js" async></script>
    <script src="awesomeJavaScript7.js" async></script>
    <script src="awesomeJavaScript8.js" async></script>
    <script src="awesomeJavaScript9.js" async></script>
    <script src="awesomeJavaScript10.js" async></script>
    <script src="awesomeJavaScript11.js" async></script>
    <script src="awesomeJavaScript12.js" async></script>
    <script src="awesomeJavaScript13.js" async></script>
    <script src="awesomeJavaScript14.js" async></script>
    <script src="awesomeJavaScript15.js" async></script>
    <script src="awesomeJavaScript16.js" async></script>
    <script src="awesomeJavaScript17.js" async></script>
    <script src="awesomeJavaScript18.js" async></script>
    <script src="awesomeJavaScript19.js" async></script>
    <script src="awesomeJavaScript20.js" async></script>
    <script src="awesomeJavaScript21.js" async></script>
    <script src="awesomeJavaScript22.js" async></script>
    <script src="awesomeJavaScript23.js" async></script>
    <script src="awesomeJavaScript24.js" async></script>
    <script src="awesomeJavaScript25.js" async></script>
    <script src="awesomeJavaScript26.js" async></script>
    <script src="awesomeJavaScript27.js" async></script>
    <script src="awesomeJavaScript28.js" async></script>
    <script src="awesomeJavaScript29.js" async></script>
    <script src="awesomeJavaScript30.js" async></script>
    <script src="awesomeJavaScript31.js" async></script>
    <script src="awesomeJavaScript32.js" async></script>
    <script src="awesomeJavaScript33.js" async></script>
    <script src="awesomeJavaScript34.js" async></script>
    <script src="awesomeJavaScript35.js" async></script>
    <script src="awesomeJavaScript36.js" async></script>
    <script src="awesomeJavaScript37.js" async></script>
    <script src="awesomeJavaScript38.js" async></script>
    <script src="awesomeJavaScript39.js" async></script>
    <script src="awesomeJavaScript40.js" async></script>
    <script src="awesomeJavaScript41.js" async></script>
    <script src="awesomeJavaScript42.js" async></script>
    <script src="awesomeJavaScript43.js" async></script>
    <script src="awesomeJavaScript44.js" async></script>
    <script src="awesomeJavaScript45.js" async></script>
    <script src="awesomeJavaScript46.js" async></script>
    <script src="awesomeJavaScript47.js" async></script>
    <script src="awesomeJavaScript48.js" async></script>
    <script src="awesomeJavaScript49.js" async></script>
    <script src="awesomeJavaScript50.js" async></script>
    <script src="awesomeJavaScript51.js" async></script>
    <script src="awesomeJavaScript52.js" async></script>
    <script src="awesomeJavaScript53.js" async></script>
    <script src="awesomeJavaScript54.js" async></script>
    <script src="awesomeJavaScript55.js" async></script>
    <script src="awesomeJavaScript56.js" async></script>
    <script src="awesomeJavaScript57.js" async></script>
    <script src="awesomeJavaScript58.js" async></script>
    <script src="awesomeJavaScript59.js" async></script>
    <script src="awesomeJavaScript60.js" async></script>
</head>
<body>


    
</body>
</html>

There HAS to be a better way!

 

Enter modern build tools

GRUNT

  • Oldest Node implementation (2013)
  • Massive ecosystem – http://gruntjs.com/plugins
  • Explicit Configuration
  • Tight integration with Yeoman and Bower

GRUNT

grunt.initConfig({
  clean: {
    src: ['build/app.js', 'build/vendor.js']
  },
  
  copy: {
    files: [{
      src: 'build/app.js',
      dest: 'build/dist/app.js'
    }]
  }
  
  concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
  }
  
  // ... other task configurations ...
  
});

grunt.registerTask('build', ['clean', 'concat', 'copy']);

GULp

  • First tool to take advantage of Node streams and piping
  • Script over configuration
  • FAST
  • Rich eco-system almost as sizable as Grunt's 
    http://gulpjs.com/plugins/
  • Built in support for Browsersync

GULp

//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

//declare the task
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

Webpack

  • More in line with ES6 patterns
  • Modular
  • Less dom focused
  • Configuration over scripting
  • Loaders expand strong emphasis on JavaScript to other tasks

Webpack

var commonjs = require("./commonjs");

define(["amd-module", "../file"], function(amdModule, file) {
	require(["big-module/big/file"], function(big) {
	});
});

require("coffee!./cup.coffee");

require("./cup");

function loadTemplate(name) {
	return require("./templates/" + name + ".jade");
}

function loadTemplateAsync(name, callback) {
	require(["bundle?lazy!./templates/" + name + ".jade"], 
	  function(templateBundle) {
		templateBundle(callback);
	});
}

Enter the GIANTS

Maven

No Need
To install

Locally

Who will love you

  • Dev Ops
  • Windows Users
  • Client
  • Boss
  • Your cat  (will probably love you anyways)

ANT

  • Multiple exec targets
  • Easiest for all team members and build servers to perform install of Node, NPM and FEBT
  • Parse log output for errors

ANT

  <target name="gulp">
    <exec executable="gulp" dir="${src}" outputproperty="log">
        <arg line="deploy --dir ${dist}"/>
    </exec>

    <echo message="${log}"/>
        <condition property="onSuccess">
            <matches pattern="Finished" string="${log}"/>
        </condition>
    <fail message="Gulp failed!" unless="onSuccess"/>
  </target>

IT'S

DEMO
TIME

Others paths to the same destination

  • Webjars
    • 900 frontend libraries in Maven Central 
    • Bower Webjars - Install anything
    • Built in support for RequireJS
  • What about Brunch, Broccoli, Mimosa, Jake, OSNFEBT?
  • What about Webpack?
    • Like Browserify
    • Declarative > Imperative
    • Bundling
    • Follows entry point

Jay Landro

jay.landro@solutiondesign.com

https://github.com/jaylandro/frontin-OSN-2015

https://github.com/eirslett/frontend-maven-plugin

http://slides.com/jaylandro/osn2015-frontin

 

 

Frontin'

By jaylandro

Made with Slides.com

Frontin'

Integrating frontend build tools into your backend builds

  • 578

More from jaylandro