JavaScript Build System Battle Royale!!!!

JavaScript Build System Battle

Royale!!!!@davidwesst

Prairie Dev Con 2017 – Winnipeg, MB

Tournament Background

• What is the problem?

• JavaScript always has a lot of flavors of everything

• What we are going to do?

• Review 5 JS build systems and see which ones stand out, and which one is the conference champion

What is a JavaScript Build System

• A tool that takes web platform code (HTML, JavaScript, CSS) and turns it into an optimized program by executing a series of steps defined by the development team

Challenge

• 1 "Small" Web Project

• HTML

• ES6 JavaScript

• Sass

• Must "complete" the development story

• Source maps

• Serve & Watch for changes

Fighter Qualification

• Must be cross-platform

• Must support the "web platform"

• Must be configurable by developer (I.e. tasks, rules, etc...)

• Tool repository or product must be "active"

• I.e. commits still happening to the repo

• Updates still happening to the product

Fighter Classes

• Two Classes

• Task Runners

• Bundlers

Our Fighters

Broccoli

Class Task Runner

Version 1.12

Current Version

1.12

URL http://broccolijs.com/

Open Source

YES

Grunt

Class Task Runner

Version 1.01

Current Version

1.01

URL https://gruntjs.com/

Open Source

YES

Gulp

Class Task Runner

Version 3.91

Current Version

3.91

URL http://gulpjs.com/

Open Source

YES

NPM / Vanilla Node

Class Task Runner

Version 4.x

Current Version

5.03

URLhttps://www.npmjs.com/

Open Source

YES

Webpack

Class Bundler

Version 2.5.1

Current Version

2.6.1 / 3.0.0.rc0

URL https://webpack.js.org/

Open Source

YES

Did Not Qualify

Scoring Criteria

Me

• API Simplicity

• Support / Documentation

• Plugin Library

• Project Impact

• Performance

Audience

• Show of hands and feedback

FIGHT!

http://bit.ly/prdc2017

Fight Breakdown

• JavaScript

• ESLint

• Babel Transpilation

• Generate Source Maps

• CSS

• Transpile Sass to CSS

• Generate Source Maps

• HTML

• Copy files

• e.g. -- npm run build:gulp

Build

Fight Breakdown

• Start Development Web Server

• Watch for Changes

• e.g. -- npm run serve:gulp

Serve

Fight Results

Broccoli

• Very abstracted away from tasks

• Okay documentation

• Strong plugin

• Requires broccoli

• Great performance

Grunt

• Configuration API

• Good

• Large Plugin Library

• Requires Gruntfile

• Good performarce

Gulp

• Straightforward API, with JavaScript

• Solid documentation

• Very strong plugin library

• Requires gulpfile.js

• Good performarce

NPM / Vanilla Node

• Pure JavaScript

• Very good, although depends on the plugins

• Massive Plugin Library

• Requires package.json and script files

• Good performarce

Webpack

• Configuration File

• Good documentation, but needs further refinement

• Very large “plugin” library

• Requires webpack.config.js

• Good performarce

…and the winner is<insert drumroll here>

Winner

Runner Up

Q & A

Thanks

• David Wesst

• @davidwesst

• westerndevs.com

• davidwesst.com