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)
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
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 );
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
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.