Elements of a Modern

Front-End Workflow

Ian VanSchooten

November 2016

The Goal

A maintainable, scalable, bug-free, high-performance

web application

Icons made by Freepik from www.flaticon.com are licensed CC 3.0 BY

A maintainable, scalable, bug-free, high-performance

web application

A maintainable, scalable, bug-free, high-performance

web application

A maintainable, scalable, bug-free, high-performance

web application

A maintainable, scalable, bug-free, high-performance

web application

Problem 1

I need to organize my JavaScript and get it onto my page.

Modules

Module Types

Asynchronous Module Definition (AMD)

CommonJS (CJS)

ECMAScript Modules (ESM, ES6, ES2015)

More history

var foo = require('foo');

import foo from 'foo';

define(["foo"], function (foo) {
    return {
        // your code goes here
   };
});

Module Loader Options

RequireJS

SystemJS

AMD

SEM.js talk from Miguel Castillo

ES6, Vanilla, AMD, CommonJS

Built on draft ES6 loader specification

Used in Angular 2, Auralia

Bundlers

CommonJS

Bundle into one (or more) standard JS scripts

Problem 2

I have a lot of JavaScript files/modules now.

Bundling

Bundler Options

Browserify

Webpack

CommonJS

AMD, CommonJS, ES6

Can also load other assets like CSS

Rollup

ES6 modules, others with work

Promises smaller bundle sizes, "tree shaking"

SEM.js talk from David Jsa

bit-bundler

Similar to Webpack

Less complicated setup

Problem 3

I want to use JavaScript modules that other people have written.

Package Managers

Package Manager Options

Bower

npm

jspm

Downloads source files to your HDD

Mainly CommonJS

Powerful tooling

Focuses on ES6 modules

Uses SystemJS module loader

Y arn

New client using npm registry

Faster and simpler than npm

Problem 4

I want to write code in a language or version of JavaScript that

not all browsers support.

i.e. ES6, ES2017, TypeScript, CoffeeScript

Transpilation

Transpiler Options

Babel

TypeScript

Turn JavaScript into other JavaScript

Plugin system

SEM.js ES6 talk from Brian Genisio

Typed superset of JavaScript

Developed by Microsoft

Used by Angular 2

B ublé

Fast, opinionated alternative to Babel

Coffee Script

Cleaner syntax, influenced ES6

Problem 5

My JavaScript bundle is very big.

Minification

image source

Minifier Options

UglifyJS

Battle tested, most widely used

Most bundlers include UglifyJS or make it easy to add

Not yet compatible with pure ES6

Babili

Plugin for Babel (might be renamed to babel-minify)

ES6 compatible

Super-early beta phase tool

Problem 6

I want to catch bugs before I ship code to my users.

Test Frameworks

Unit Testing Options

Jasmine

BDD testing framework

Popular, requires an assertion library, like Chai

Runs tests concurrently in separate threads

Commonly used with React, allows snapshotting

Test framework from jQuery, used in Ember-cli

Tape

Simple testing without globals

Problem 7

More people have joined my team,

and they all use different styles.

Linting

Linter Options

ESLint

Pluggable and configurable

237 Core rules, many more in plugins

SEM.js lightning talk from Ian VanSchooten

StyleLint

CSS Linter

Similar architecture/setup to ESLint

TS Lint

Linting for TypeScript

Problem 8

CSS is awful.

OK, maybe not awful, but we can do better.

CSS Processing

CSS Processor Options

Less

Original CSS preprocessor from Twitter

Sass

Similar to Less, generally more popular today

Originally written in Ruby, then C++, now Dart

PostCSS

Transform CSS with JavaScript

Large ecosystem of plugins

Autoprefixer, CSSNext, CSS Modules, StyleLint

Aphrodite

"Inline styles that work"

Write CSS in JavaScript

SEM.js talk from Kevin Dangoor

Problem 9

I need to manage all this bundling, minifying, transpiling, processing css, testing, & linting.

Task Runners

Task Runner Options

Grunt

Sequential operations, config heavy

Writes intermediate steps to disk

SEM.js talk from Miguel Castillo

Gulp

Uses streams instead of files, faster than grunt

Code-over-configuration

npm scripts

Simpler than grunt or gulp, still powerful

Chain scripts together, pass custom args, etc.

Broccoli

Very fast asset pipeline

Brunch

Opinionated build tool, fast rebuild times

Problem 10

I've spent all my time setting up my workflow,

and forgotten what I wanted to build.

CLI / Scaffolds

CLI / Scaffold Options

a ngular-cli

CLI for Angular 2 apps

ember-cli

Ember.js command line utility

SEM.js talk from Tom Zellman

auralia-cli

Aurelia CLI for creating projects, bundling, etc.

y eoman

Scaffolding tool for various projects

polymer-cli

Command-line tool for Polymer projects.

react-create-app

Create React apps with no build configuration

Review

Modules

A way to organize your code

Bundlers

Combine modules to load in the browser

Pkg Managers

Minifiers

Download and manage external dependencies

Remove unnecessary bits from code to reduce filesize

Transpilers

Allow us to write code that browsers don't understand

CSS Processors

Manipulate and extend stylesheets

Test Tools

Automate tests of our code

Linters

Establish shared style and avoid bad syntax

Task Runners

Put together all the steps to our workflow

CLIs

Make all the hard choices for us, set up the workflow

Go Forth and Shave

These slides are at:

https://slides.com/ianvanschooten/modern-frontend-workflow