Talk at MCRFred about Frontend JS workflow (Package manager, module system/syntax, module loader/bundler, task runner), Gulp4, npm scripts, JS fatigue.

1. Frontend
workflow
Gulp 4 and the like
By /Damien Seguin @dmnsgn

2. FRENCH Creative Developer at UNIT9,
Rockstar
/GitHub Twitter

3. What are the common components of our current workflow?
What is new in Gulp 4?
Are task-runner still relevant? What to expect in 2016?

4. What are the common
components in our current
workflow?
Package manager
Module system/syntax
Module loader/bundler
Task runner / Build system

5. Package Manager
Handles dependencies
Package: a set of files that are bundled together
and can be installed and removed as a group.
Centralisation (one database/registry to pull data from)
Installation/uninstallation (one command to execute)
Upgrade (versionning)
Link Dependencies (avoid dependency hell)

6. Two main competitors
Bower: "A package manager for the web"
: "npm is the package manager for JavaScript"
but also JSPM

7. Bower
$ bower install underscore#1.0.3
$ bower install backbone # with underscore as a dependency
Unable to find a suitable version for underscore, please choose one:
1) underscore#1.0.3 which resolved to 1.0.3 and is required by bowerexample
2) underscore#>=1.7.0 which resolved to 1.8.3 and is required by backbone#1.2.3
.
└── bower_components
├── backbone
└── underscore
$ npm install -g bower

8. $ npm install underscore@1.0.3
$ npm install backbone # with underscore as a dependency
.
└── node_modules
├── backbone
│ └── node_modules
│ └── underscore
└── underscore
$ npm uninstall underscore
$ npm dedupe
underscore@1.8.3
node_modules/backbone/node_modules/underscore -> node_modules/underscore
npm and front-end packaging
npm as a front-end package manager by @kewah
npm is only for CommonJS!
npm is only for server-side JavaScript!

9. JSPM
Dynamically loads ES6 modules in browsers and NodeJSSystemJS:
: list of packages and their endpointRegistry
$ jspm install npm:react
$ jspm install github:angular/bower-angular
$ jspm install react
"react": "npm:react",
.
├── config.js
├── jspm_packages
└── package.json

10. Other attempts
JamJS
DuoJS
VoloJS
Component
Ender
...

11. Module system/syntax
Defines a way of writing modular code
No built-in support in JS for modules
ES6 to the rescue

12. ES5 Global
AMD
CommonJS
ES6 modules

13. ES5
Module pattern (MusicPlayer.js)
var MusicPlayerModule = (function() {
var currentTrack = undefined;
return {
play: function(track) {
currentTrack = ajax.getTrackObject();
},
getTitle: function() {
return currentTrack.title;
}
};
})();
Usage
<script src="scripts/MusicPlayer.js"></script>
// Get track and play it
var trackId = 'EOUyefhfeaku';
MusicPlayerModule.play(trackId);
// Get module state: currentTrack
MusicPlayerModule.getTitle();

14. AMD
Module (MusicPlayer.js)
define('MusicPlayerModule', ['ajax'], function (requester) {
var currentTrack = undefined;
return {
play: function(track) {
currentTrack = requester.getTrackObject();
},
getTitle: function() {
return currentTrack.title;
}
};
});
Import (main.js)
define('main', ['MusicPlayerModule'], function (MusicPlayer) {
var trackId = 'EOUyefhfeaku';
MusicPlayer.play(trackId);
MusicPlayer.getTitle();
});

15. CommonJS
Module (MusicPlayer.js)
var requester = require('../utils/ajax.js');
var currentTrack = undefined;
exports.play = function(track) {
currentTrack = requester.getTrackObject();
};
exports.getTitle = function() {
return currentTrack.title;
}
Import (main.js)
const MusicPlayer = require('./MusicPlayer.js');
var trackId = 'EOUyefhfeaku';
MusicPlayer.play(trackId);
MusicPlayer.getTitle();

16. ES6
Module (MusicPlayer.js)
import requester from '../utils/ajax.js';
let currentTrack = undefined;
export function play(track) {
currentTrack = requester.getTrackObject();
}
export function getTitle() {
return currentTrack.title;
}
Import (main.js)
import { play, getTitle } from './MusicPlayer.js';
var trackId = 'EOUyefhfeaku';
play(trackId);
getTitle();

17. Module loader/bundler
Ship modules to the browser
Modules Implementation status: in development
Interpreted? More Compiled/Transpiled
Bundle to a single JS file

18. RequireJS
Browserify
Webpack
JSPM & SystemJS ( )
Rollup
ES6 Module Loader
> Bullet point comparison

19. RequireJS
Pros
Syntax: mostly AMD (CommonJS support not ideal)-
Works in the browser directly-
RequireJS optimizer to bundle/minify-
Cons
Not suited for server side/client application-
Some cryptic error messages-

20. Browserify
Pros
Syntax: CommonJS (+ deAMDify & debowerify)-
Backed up by the huge npm community-
Client-side and server-side modules-
Shim Node.js modules-
(deAMDify translate AMD modules to Node-
style modules automatically)
- List of transforms
Cons
Need a tool to watch and bundle ( )- watchify
Tightly bound to Node.js ecosystem-

21. Webpack
Pros
Syntax: CommonJS and AMD-
Doesn't try to be compatible with node.js at all costs-
Client-side and server-side modules-
(UglifyJsPlugin)- List of plugins
Cons
Configuration over convention-
More features in its core (less modular) but also a pro-
> browserify for webpack users

22. JSPM featuring SystemJS
Pros
Syntax:- ES6, CommonJS, AMD...
Compliant with the ES6 modules specification and future-friendly-
No bundling needed (like RequireJS) = no watcher-
Bundling optional-
(similar to Webpack loaders plugins)- List of plugins
Cons
Needs better performances-
...but doesn't matter in dev since bundling is not needed-

23. Rollup
Pros
Syntax:- ES6, CommonJS, AMD...
... but can only optimize ES6 modules-
- live-code inclusion aka tree-shaking
- List of plugins
Cons
Yet another module bundler-
...but will probably be integrated into- SystemJS
> rollup-starter-project

24. Rollup tree shaking
utils.js
var foo = {};
foo.a = 1;
var bar = {};
bar.b = 2;
export { foo, bar };
main.js
import { foo, bar } from './utils.js';
console.log( foo.a );
bundle.js
'use strict';
var foo = {};
foo.a = 1;
console.log( foo.a );

25. Task runner / Build system
Automate

26. grunt
gulp

27. Grunt

28. Gulp

29. Other attempts
Broccoli
Brunch
FlyJS
...

30. State of affairs
Task Runner Usage
Gulp 44%
Grunt 28%
Others 9%
No task runner 20%
Source: The State of Front-End Tooling – 2015

31. What is new in Gulp 4?
What is Gulp?
Changes in Gulp 4

32. What is Gulp?
Gulp Stream
Gulp API
Gulp CLI

33. Gulp: The streaming build system.
Grunt: multiple file read/write (requires src and dest)
Gulp: streams src.pipe(b).pipe(c).pipe(d)

34. Gulp API
.src() and .dest()
gulp.src([`${config.src}/images/**/*`, `!${config.src}/images/{sprite,sprite/**}`])
A 'glob' is a pattern that allow us to select or exclude a set of files.
=> returns a stream that we can 'pipe'
.pipe(imagemin())
=> transforms the files from the stream (minify them)
.pipe(gulp.dest(`${config.dist}/images`));
=> writes the minified files to the system
gulp.src([`${config.src}/images/**/*`, `!${config.src}/images/{sprite,sprite/**}`])
.pipe(imagemin())
.pipe(gulp.dest(`${config.dist}/images`));

35. Gulp API
.task() and .watch()
gulp.task('images', function() {
return gulp.src([`${config.src}/images/**/*`, `!${config.src}/images/{sprite,sprite/**}`
.pipe(imagemin())
.pipe(gulp.dest(`${config.dist}/images`));
});
=> programmatic API for task dependencies and .watch()
gulp.task('serve', ['images', 'takeABreak', 'smile'], function() {
// Serve once the images, takeABreak and smile tasks have completed
...
});
gulp.watch(`${config.src}/images/**/*`, ['images']);
=> ... and more importantly to the CLI
$ gulp images

36. Gulp CLI
$ gulp <task> <othertask>
$ npm install gulp-cli -g
gulp --gulpfile <gulpfile path> # will manually set path of gulpfile.
gulp --cwd <dir path> # will manually set the CWD.
gulp --tasks # will display the task dependency tree for the loaded gulpfile.
gulp --verify # will verify plugins in package.json against the plugins blacklist
Full list of arguments

37. Changes in Gulp 4
$ npm install -g gulpjs/gulp-cli#4.0
package.json
"devDependencies": {
"gulp": "github:gulpjs/gulp#4.0",
...
}
Slight API changes
New task system
See dmnsgn/gulp-frontend-boilerplate

38. Slight API changes
gulp.src()
gulp.dest()
gulp.watch()
gulp.task() (new syntax) 3 arguments
gulp.parallel()
gulp.series()
+ gulp.symlink(), gulp.lastRun(), gulp.tree(), gulp.registry()

39. gulp.series() and gulp.parallel()
using run-sequence (Gulp 3)
runSequence(
['markup', 'styles', 'scripts', 'images'],
['serve', 'watch'],
callback
);
index.js (Gulp 4)
gulp.series(
gulp.parallel(markup, 'styles', 'scripts', 'images'),
gulp.parallel(serve, watch)
)

40. New task system
Gulp 3
gulp.task('serve', ['markup', 'styles', 'scripts'], function(done) {
return browserSync.init({}, done);
});
Gulp 4 (two arguments syntax)
images.js
export function optimizeImages() { ... }
export function generateSpritesheet() { ... }
export function generateFavicons() { ... }
gulpfile.js
import { optimizeImages, generateSpritesheet, generateFavicons } from './images';
...
gulp.task(
'images',
gulp.parallel(optimizeImages, generateSpritesheet, generateFavicons)
);

41. Gulp 4 (one argument syntax)
gulpfile.js
CLI
var gulp = require('gulp');
var del = require('del');
gulp.task(function clean() {
return del([`./dist/**`, `!./dist`,`!./dist/static/**`];
});
$ gulp clean

42. Reusable modules
clean.js
gulpfile.js
import 'del' from 'del';
export function clean() {
return del([`./dist/**`, `!./dist`,`!./dist/static/**`]);
}
import { clean } from './clean';
...
gulp.task(clean);

43. Are task-runner still relevant?
What to expect in 2016?
npm scripts to replace task-runner
JS fatigue

44. scripts
Should we stop using build tools like Gulp?
How to use npm scripts
Are npm scripts the solution?

45. Should we stop using build tools like Gulp?
Plugins often an existing NodeJS package
Rely on global dependencies (grunt-cli, gulp-cli, broccoli-cli...)
Most tasks can be achieved using basic terminal commands
wrapper around

46. How to use scripts
$ npm start # default script
$ npm run script-name # custom script
package.json
{
"devDependencies": {
"babelify": "^6.1.x",
"browser-sync": "^2.7.x",
"browserify": "^10.2.x",
"npm-run-all": "^1.5.0",
...
},
"scripts": {
"dev": "npm-run-all --parallel dev:scripts dev:styles serve",
"build": "npm-run-all --parallel build:scripts build:styles rimraf dist/*.map",
"clean": "rimraf dist/{*.css,*.js,*.map}",
"serve": "browser-sync start --server 'dist' --files 'dist/*.css, dist/*.html, dist/*.js' --n
"dev:scripts": "watchify -d src/scripts/main.js -t [babelify] -o dist/main.js",
"dev:styles": "stylus src/styles/main.styl -w -o dist/ -m",
"build:scripts": "browserify -d src/scripts/main.js -t [babelify] -o dist/main.js && uglifyjs
"build:styles": "stylus src/styles/main.styl -o dist/ -c"
}
}

47. Are npm scripts the solution?
pros
Fast configuration and build
All config in one place: package.json
No extra global dependency
...& cons
Readability of the commands
Compatibility between UNIX and Windows systems

48. 2016
JavaScript fatigue
Doctor's prescription

49. JS fatigue
A new JS framework a day
Too many tools
2015: JavaScript tool X was useful
2016: Make X easier to install/setup/use for all new
users. Minimize dependency & configuration hell.
— Addy Osmani (@addyosmani) January 8, 2016
Controversial articles (some probably missing the point)
- Stop pushing the web forward
- Javascript Fatigue
- State of the Union.js
- Solar system of JS

50. Why it is not a problem if you keep the UX in mind
by- The Controversial State of JavaScript Tooling Nicolás
Bevacqua (@ponyfoo)
by- Why I love working with the web Remy Sharp (@rem)
by- If we stand still, we go backwards Jake Archibald
(@jaffathecake)
Just because it's there, doesn't mean you must
learn it and use it. [...] No one can be an expert in
the whole web. [...] The great thing about the web
is it doesn't hit 1.0 and stop, it's continual.

51. Piece of advice (my two-penn'orth)
Pick styleguides
Pick the right scaffold
Stick with it (at least this year)
Stay curious though