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)
var foo = require('foo');import foo from 'foo';define(["foo"], function (foo) {
return {
// your code goes here
};
});Module Loader Options
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
CommonJS
AMD, CommonJS, ES6
Can also load other assets like CSS
ES6 modules, others with work
Promises smaller bundle sizes, "tree shaking"
Similar to Webpack
Less complicated setup
Problem 3
I want to use JavaScript modules that other people have written.
Package Managers
Package Manager Options
Downloads source files to your HDD
Mainly CommonJS
Powerful tooling
Focuses on ES6 modules
Uses SystemJS module loader
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
Typed superset of JavaScript
Developed by Microsoft
Used by Angular 2
Fast, opinionated alternative to Babel
Cleaner syntax, influenced ES6
Problem 5
My JavaScript bundle is very big.
Minification
Minifier Options
Battle tested, most widely used
Most bundlers include UglifyJS or make it easy to add
Not yet compatible with pure ES6
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
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
Simple testing without globals
Problem 7
More people have joined my team,
and they all use different styles.
Linting
Linter Options
Pluggable and configurable
237 Core rules, many more in plugins
CSS Linter
Similar architecture/setup to ESLint
Linting for TypeScript
Problem 8
CSS is awful.
OK, maybe not awful, but we can do better.
CSS Processing
CSS Processor Options
Original CSS preprocessor from Twitter
Similar to Less, generally more popular today
Originally written in Ruby, then C++, now Dart
Transform CSS with JavaScript
Large ecosystem of plugins
Autoprefixer, CSSNext, CSS Modules, StyleLint
Problem 9
I need to manage all this bundling, minifying, transpiling, processing css, testing, & linting.
Task Runners
Task Runner Options
Sequential operations, config heavy
Writes intermediate steps to disk
Uses streams instead of files, faster than grunt
Code-over-configuration
Simpler than grunt or gulp, still powerful
Chain scripts together, pass custom args, etc.
Very fast asset pipeline
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
CLI for Angular 2 apps
Ember.js command line utility
Aurelia CLI for creating projects, bundling, etc.
Scaffolding tool for various projects
Command-line tool for Polymer projects.
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:
Building a Modern Front-End Workflow
By Ian VanSchooten
Building a Modern Front-End Workflow
There's a lot to do when building a JavaScript app. Here we mention some of the problems encountered, the types of tooling that can solve those problems, and the most common options to choose from. Includes module systems, package managers, bundlers, minifiers, transpilers, linters, test frameworks, css processors, and task runners, as well as some CLI tooling which abstracts away many of these pieces.
