Tool Types Covered

• Generator
• Package Manager
• Linter
• Module Loader/Bundler
• Concatenator & Minifier
• JS Transpiler
• CSS Preprocessor
• Task Runner/Build System

Not Covered

• Editors
• Source Control
• Testing
• Frameworks
• Continuous Integration

History

A brief, mostly inaccurate, and subjective history of front-end tooling

Before 1999

Simple

Backend does 99% of the work

1999 & 2000

Microsoft creates XMLHTTP

Mozilla creates XMLHTTPRequest

The beginning of AJAX

2000-2004

Dark Ages

2005 & 2006

JS Renaissance

With great power, comes the need for great tooling!

Somebody...maybe

2007 - 2009

We build complex web applications using our great new frameworks

2009

Modules

• CommonJS
• AMD

2010

JS Industrial Revolution

2012

We still dislike JS, just not as much

• TypeScript

2013

You got your JS in my markup

You got your markup in my JS

• JSX & React

2015

JS is looking a little dated, how about a refresh

• ES6/ES2015

Intial Architecture

• Rapid start
• Define folder structure
• Modular/Reusable
• Consistency
• Dependencies
  • Find
  • Acquire

Generators/Scaffolding

Allow for rapid creation of the structure of an application. Generators can create an entire application framework, or can create individual components of an application.

Package Manager

• Reduce
• Reuse
• Recycle
• Update

• Frustrating Windows devs due to the 260 character path limit

Package Manager

Develop

• Code efficiently
• Minimize errors
• Consistent style
• Rapid iteration
• Update dependencies

Tooling

• Editor
• Linter
• Dev Server
  • Live reload / Hot reload
• Watch & rebuild
• Package Manager

Linter

Linter

ESLint

Types of Issues a ESLint Catches

var foo = "foo";
const bar = "bar";

if (foo = "bar") {              // Accidental assignment in a conditional statement

    debugger;                   // Forgotten debugger statements left in code

    var hello = "world";        // Disallow variable declaration in a nested block

    typeof foo === "stirng";    // Only allow valid strings in typeof comparisons

  }                             // Inconsistent indentation

bar = "foo";                    // ES6 const reassignment

// And much much more

// In fact, it can catch almost anything since it uses Esprima
//  to parse the code and create an Abstract Syntax Tree to use for linting

{
    "env": {
        "browser": true,             // Defines predefined global variables
        "es6": true                  // You can set more than 1 environment
    },
    "extends": "eslint:recommended", // Enables a subset of core rules for common problems
    "parserOptions": {
        "sourceType": "module",      // Can be "script" or "module", module denotes ES6 modules
        "ecmaVersion": 6             // Specifies the version of JS to use
    },
    "rules": {                       // Rules can be "off" or 0, "warn" or 1, and "error" or 2
        // Enable additional rules beyond the eslint:recommended
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["warning", "double"],
        "semi": ["error", "always"],

        // Override default options for rules from base configurations
        "comma-dangle": ["error", "always"],
        "no-cond-assign": ["error", "always"],

        // Disable rules from base configurations
        "no-console": "off"
    }
}

Other ESLint Features

• Ships with over 200 available rules

• Supports plugins to add additional rules

• Can be configured multiple ways

  • .eslintrc.* file

  • 'eslintConfig' section in package.json

  • Command line arguments

  • Comments in source files

• Configuration Cascading

  • Subfolders can have different linting rules

Test

Reduce errors

Prevent regressions

Validate interfaces

Refactor confidently

Build

• Optimize
• Build quickly
• Debuggable output
• Customize for environment
  • Development
  • Test
  • Production

CSS Preprocessor

Why?

CSS Preprocessor

Sass

// Importing other SCSS files
@import 'reset';

// Variables!! Yay!
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
$secondary-color: #042;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

nav {
// Nesting of rules
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    // Referencing the parent selector
    &.category {
      color: $secondary-color;
    }
  }

  a {
    display: block;
  }
}

CSS

/* Rules from reset.scss */

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul.category {
  color: #042;
}

nav a {
  display: block;
}

CSS Preprocessor

There are things a traditional CSS Preprocessor doesn't handle well:

​Adding browser specific prefixes

Not extensible

Work with inline styles in JS files

Use future CSS syntax today

CSS Preprocessor

PostCSS

PostCSS

• Creating browser prefixed styles
• Linting the CSS
• Creating unique selectors for CSS embedded in JS components
• Adding support for variables, loops, math, conditional statements, etc

A tool for transforming styles with JS plugins

Autoprefixer

a {
  transition: transform 1s
}

More Information

Kicking Sass: How To Write CSS (and JS) in a PostCSS World

Aaron Ladage

Sunday - 1:30-2:20 - Room 2207

Transpile JS

TSC

Coffee

Concatenate/Minify

UglifyJS

Task Runners

These are the big boy of build tools. They allow you to perform nearly any build step, but tend to require extensive configuration to setup.

A single approach to launch all of the build tasks including

Linting

Testing

Transpiling

Preprocessing

Compilation

Concatenation

Minification

Copying files

Watching for changes

Development Server

Live Reload

Optimize Images

Install Dependencies

Etc

Configuration

Declarative

Two Main Types

Grunt

grunt.initConfig({
   less: {
      development: {
         files: {
            "build/tmp/app.css": "assets/app.less"
         }
      }
   },

   autoprefixer: {
      options: {
         browsers: ['last 2 version', 'ie 8', 'ie 9']
      },
      multiple_files: {
         expand: true,
         flatten: true,
         src: 'build/tmp/app.css',
         dest: 'build/'
      }
   }
});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');

grunt.registerTask('css', ['less', 'autoprefixer']);

Gulp

var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefix = require('gulp-autoprefixer'),
    jshint = require('gulp-eslint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('css', function () {
   gulp.src('assets/app.less')
      .pipe(less())
      .pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
      .pipe(gulp.dest('build'));
});

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.eslint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

Grunt and Gulp are by far the most popular front-end tasks runners, however there are other task runners/build tools

Opinion

Use npm scripts to abstract away any build tool or task runner used Only include one of these tools if your build has complex requirements that can't be fulfilled with simpler tools

Module Loaders/Bundlers

JavaScript didn't have a native module concept until ES6, so when JS frameworks started to become popular people worked on module specs for JS.

AMD and CommonJS modules were a huge leap forward for JS development, but they added the need for module loaders.

Module Loaders

Module Loaders

Webpack

CommonJS and AMD module support out of the box

ES6 modules with a plugin, Webpack 1, or out of the box with Webpack 2.0

Multiple bundle generation

On demand loading of additional code chunks

Dependencies

require('./button.css');
const icon = require('ok.svg');

import React from 'react';

const ConfirmButton = React.createClass({
    render() {
        return (
            <Button class="confirm" title="OK">
                <img src={icon} />
            </Button>
        );
    }
});

var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var less = require('less');

module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/editor.main.jsx'
    ],
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'editor.bundle.js',
        sourceMapFilename: '[file].map',
        publicPath: '/build/'
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        preLoaders: [ 
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'eslint'
            }
        ],
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'react-hot!babel'
            },
            {
                test: /\.(less|css)$/,
                loader: 'style-loader!css-loader!postcss-loader!less-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(svg|png|jpg|jpeg|gif)$/,
                loader: 'file',
                exclude: /node_modules/
            }
        ]
    },
    postcss: function () {
        return [autoprefixer];
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
}

Loader Examples

Filetype loaders

• JSON
• CSV
• SVG
• XML

​Transpile loaders

• Elm
• Typescript
• Babel

How

Framework CLI

Convention

Delegate

Abstraction

Great Framework CLIs

• ember-cli
• angular-cli (Angular 2)
• vue-cli
• create-react-application

Ember-cli

[X] Generators

[X] Lint

[X] Development Server

    [X] Live Reload

[X] Watch

[X] Test

[X] Transpile

[X] Preprocess

[X] Minify

[X] Concatenate

[X] Source Maps

Angular-cli

[X] Generators

[X] Lint

[X] Development Server

    [X] Live Reload

[X] Watch

[X] Test

[X] Transpile

[X] Preprocess

[X] Minify

[X] Concatenate

[X] Source Maps

[X] Optimize Images

Create-react-app

[X] Generators

[X] Lint

[X] Development Server

    [X] Hot Reload

[X] Watch

[X] Test

[X] Transpile

[X] Preprocess

[X] Minify

[X] Concatenate

[X] Source Maps

[X] Optimize Images

Vue-cli

[X] Lint

[X] Development Server

    [X] Live Reload

    [X] Hot Reload

[X] Watch

[X] Test

[X] Transpile

[X] Preprocess

[X] Minify

[X] Concatenate

[X] Source Maps

Hot Module Replacement

Live reload, but much better

Live Reloading

Glorified F5

Hot Module Replacement

Maintain app state

No browser refresh

Requirements

• Module Loader
• Development server
• Polling/sockets
• State separate from logic

Tree Shaking 🌲

Save bytes

Tree Shaking

Tree shaking removes a unused exports in ES6 modules from your built code.

// maths.js

// This function isn't used anywhere, so
// it is excluded from the bundle...
export function square ( x ) {
	return x * x;
}

// This function gets included
export function cube ( x ) {
	// rewrite this as `square( x ) * x`
	// and see what happens!
	return x * x * x;
}

// main.js
import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125