Post on 23-Jan-2018
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