Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Frontend 
workflow
Gulp 4 and the like
By /Damien Seguin @dmnsgn
FRENCH Creative Developer at UNIT9,
Rockstar
/GitHub Twitter
What are the common components of our current workflow?
What is new in Gulp 4?
Are task-runner still relevant? What to exp...
What are the common
components in our current
workflow?
Package manager
Module system/syntax
Module loader/bundler
Task ru...
Package Manager
Handles dependencies
Package: a set of files that are bundled together
and can be installed and removed as...
Two main competitors
Bower: "A package manager for the web"
: "npm is the package manager for JavaScript"
but also JSPM
Bower
$ bower install underscore#1.0.3
$ bower install backbone # with underscore as a dependency
Unable to find a suitabl...
$ npm install underscore@1.0.3
$ npm install backbone # with underscore as a dependency
.
└── node_modules
├── backbone
│ ...
JSPM
Dynamically loads ES6 modules in browsers and NodeJSSystemJS:
: list of packages and their endpointRegistry
$ jspm in...
Other attempts
JamJS
DuoJS
VoloJS
Component
Ender
...
Module system/syntax
Defines a way of writing modular code
No built-in support in JS for modules
ES6 to the rescue
ES5 Global
AMD
CommonJS
ES6 modules
ES5
Module pattern (MusicPlayer.js)
var MusicPlayerModule = (function() {
var currentTrack = undefined;
return {
play: fun...
AMD
Module (MusicPlayer.js)
define('MusicPlayerModule', ['ajax'], function (requester) {
var currentTrack = undefined;
ret...
CommonJS
Module (MusicPlayer.js)
var requester = require('../utils/ajax.js');
var currentTrack = undefined;
exports.play =...
ES6
Module (MusicPlayer.js)
import requester from '../utils/ajax.js';
let currentTrack = undefined;
export function play(t...
Module loader/bundler
Ship modules to the browser
Modules Implementation status: in development
Interpreted? More Compiled...
RequireJS
Browserify
Webpack
JSPM & SystemJS ( )
Rollup
ES6 Module Loader
> Bullet point comparison
RequireJS
Pros
Syntax: mostly AMD (CommonJS support not ideal)-
Works in the browser directly-
RequireJS optimizer to bund...
Browserify
Pros
Syntax: CommonJS (+ deAMDify & debowerify)-
Backed up by the huge npm community-
Client-side and server-si...
Webpack
Pros
Syntax: CommonJS and AMD-
Doesn't try to be compatible with node.js at all costs-
Client-side and server-side...
JSPM featuring SystemJS
Pros
Syntax:- ES6, CommonJS, AMD...
Compliant with the ES6 modules specification and future-friend...
Rollup
Pros
Syntax:- ES6, CommonJS, AMD...
... but can only optimize ES6 modules-
- live-code inclusion aka tree-shaking
-...
Rollup tree shaking
utils.js
var foo = {};
foo.a = 1;
var bar = {};
bar.b = 2;
export { foo, bar };
main.js
import { foo, ...
Task runner / Build system
Automate
grunt
gulp
Grunt
Gulp
Other attempts
Broccoli
Brunch
FlyJS
...
State of affairs
Task Runner Usage
Gulp 44%
Grunt 28%
Others 9%
No task runner 20%
Source: The State of Front-End Tooling ...
What is new in Gulp 4?
What is Gulp?
Changes in Gulp 4
What is Gulp?
Gulp Stream
Gulp API
Gulp CLI
Gulp: The streaming build system.
Grunt: multiple file read/write (requires src and dest)
Gulp: streams src.pipe(b).pipe(c...
Gulp API
.src() and .dest()
gulp.src([`${config.src}/images/**/*`, `!${config.src}/images/{sprite,sprite/**}`])
A 'glob' i...
Gulp API
.task() and .watch()
gulp.task('images', function() {
return gulp.src([`${config.src}/images/**/*`, `!${config.sr...
Gulp CLI
$ gulp <task> <othertask>
$ npm install gulp-cli -g
gulp --gulpfile <gulpfile path> # will manually set path of g...
Changes in Gulp 4
$ npm install -g gulpjs/gulp-cli#4.0
package.json
"devDependencies": {
"gulp": "github:gulpjs/gulp#4.0",...
Slight API changes
gulp.src()
gulp.dest()
gulp.watch()
gulp.task() (new syntax) 3 arguments
gulp.parallel()
gulp.series()
...
gulp.series() and gulp.parallel()
using run-sequence (Gulp 3)
runSequence(
['markup', 'styles', 'scripts', 'images'],
['se...
New task system
Gulp 3
gulp.task('serve', ['markup', 'styles', 'scripts'], function(done) {
return browserSync.init({}, do...
Gulp 4 (one argument syntax)
gulpfile.js
CLI
var gulp = require('gulp');
var del = require('del');
gulp.task(function clea...
Reusable modules
clean.js
gulpfile.js
import 'del' from 'del';
export function clean() {
return del([`./dist/**`, `!./dist...
Are task-runner still relevant?
What to expect in 2016?
npm scripts to replace task-runner
JS fatigue
 scripts
Should we stop using build tools like Gulp?
How to use npm scripts
Are npm scripts the solution?
Should we stop using build tools like Gulp?
Plugins often an existing NodeJS package
Rely on global dependencies (grunt-cl...
How to use   scripts
$ npm start # default script
$ npm run script-name # custom script
package.json
{
"devDependencies": ...
Are npm scripts the solution?
pros
Fast configuration and build
All config in one place: package.json
No extra global depe...
2016
JavaScript fatigue
Doctor's prescription
JS fatigue
A new JS framework a day
Too many tools
2015: JavaScript tool X was useful
2016: Make X easier to install/setup...
Why it is not a problem if you keep the UX in mind
by- The Controversial State of JavaScript Tooling Nicolás
Bevacqua (@po...
Piece of advice (my two-penn'orth)
Pick styleguides
Pick the right scaffold
Stick with it (at least this year)
Stay curiou...
Frontend JS workflow - Gulp 4 and the like
Upcoming SlideShare
Loading in …5
×

Frontend JS workflow - Gulp 4 and the like

1,453 views

Published on

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

Published in: Internet
  • Be the first to comment

Frontend JS workflow - Gulp 4 and the like

  1. 1. Frontend  workflow Gulp 4 and the like By /Damien Seguin @dmnsgn
  2. 2. FRENCH Creative Developer at UNIT9, Rockstar /GitHub Twitter
  3. 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. 4. What are the common components in our current workflow? Package manager Module system/syntax Module loader/bundler Task runner / Build system
  5. 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. 6. Two main competitors Bower: "A package manager for the web" : "npm is the package manager for JavaScript" but also JSPM
  7. 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. 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. 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. 10. Other attempts JamJS DuoJS VoloJS Component Ender ...
  11. 11. Module system/syntax Defines a way of writing modular code No built-in support in JS for modules ES6 to the rescue
  12. 12. ES5 Global AMD CommonJS ES6 modules
  13. 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. 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. 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. 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. 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. 18. RequireJS Browserify Webpack JSPM & SystemJS ( ) Rollup ES6 Module Loader > Bullet point comparison
  19. 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. 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. 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. 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. 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. 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. 25. Task runner / Build system Automate
  26. 26. grunt gulp
  27. 27. Grunt
  28. 28. Gulp
  29. 29. Other attempts Broccoli Brunch FlyJS ...
  30. 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. 31. What is new in Gulp 4? What is Gulp? Changes in Gulp 4
  32. 32. What is Gulp? Gulp Stream Gulp API Gulp CLI
  33. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 43. Are task-runner still relevant? What to expect in 2016? npm scripts to replace task-runner JS fatigue
  44. 44.  scripts Should we stop using build tools like Gulp? How to use npm scripts Are npm scripts the solution?
  45. 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. 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. 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. 48. 2016 JavaScript fatigue Doctor's prescription
  49. 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. 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. 51. Piece of advice (my two-penn'orth) Pick styleguides Pick the right scaffold Stick with it (at least this year) Stay curious though

×