Slide 1
Slide 1 text
A rose by any other name
would smell as sweet
Juliet, Romeo and Juliet, Act II, Scene II
Slide 2
Slide 2 text
Terin Stock
@terinjokes
terinstock.com
Slide 3
Slide 3 text
Gulp
Browserify
npm
Slide 4
Slide 4 text
Task Runners?
Let you run pre-defined tasks, and usually with some
amount of chaining and parallelism
Have no concept of dependencies, other than those
that you define
They are not JavaScript bundlers
Slide 5
Slide 5 text
Task Runners?
gulp.task('css', function() {
return gulp.src('client/templates/*.less')
.pipe(less())
.pipe(minifiyCSS())
.pipe(gulp.dest('build/css'));
});
Slide 6
Slide 6 text
JavaScript Bundlers
Understands
Your App
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Browserify CLI
$> browserify app/index.js > dist/app.js
$> browserify app/index.js | uglifyjs --compress
--mangle - > dist/app.min.js
$> browserify –e app/index.js –o dist/app.js
Slide 10
Slide 10 text
Browserify API
var browserify = require('browserify');
var bundle = browserify({
// configuration options
});
b.add('./app/index.js');
b.bundle() // return a Node.js stream
.pipe(process.stdout);
See also: Browserify Handbook
Slide 11
Slide 11 text
Node Streams
Allow us to pipe() together small
components, much like pipes on a Unix shell
allow us to stitch together small programs.
See also: Streams Handbook
Slide 12
Slide 12 text
Core Concepts
Slide 13
Slide 13 text
Entry
Slide 14
Slide 14 text
Concept: Entry
The beginning of your
application, the module
that’s loaded first in
your browser.
index.js
component.js utility.js
react lodash
Slide 15
Slide 15 text
Outfile
Slide 16
Slide 16 text
Outfile
The bundle formed
after finding all the
modules in the tree.
index.js
app.js
Slide 17
Slide 17 text
Transforms
Slide 18
Slide 18 text
Transforms
Flexibility load in files
that aren’t JavaScript as
dependencies.
index.coffee
index.js
coffeeify
Slide 19
Slide 19 text
Plugins
Slide 20
Slide 20 text
Plugins
Allows for Browserify
itself to be extended if
transforms aren’t
powerful enough.
Slide 21
Slide 21 text
Everything is a Stream
Browserify is built atop a labeled pipeline,
configurable a runtime, that is a stream.
From entry to output, files are represented as rows
streamed on this pipeline.
This pipeline is also how plugins can modify
Browserify behavior.
Slide 22
Slide 22 text
Entry
Output
Loaders
Plugins
Entry
Outfiles
Transforms
Plugins
Webpack vs Browserify
Slide 23
Slide 23 text
No differences then?
Not quite…
Slide 24
Slide 24 text
Convention
Or
Configuration
Slide 25
Slide 25 text
$> browserify –e app/index.js –o dist/app.js -d
$> webpack app/index.js dist/app.js -d
Slide 26
Slide 26 text
ESLint is a pluggable linter for JavaScript
Standard is built on ESLint but is opinionated
Slide 27
Slide 27 text
What if…?
There was an opinionated way
of using Webpack.
Slide 28
Slide 28 text
I was going to tell you
I built a prototype of
this idea here, but life
got in the way and I
didn’t finish.
[ ]
Slide 29
Slide 29 text
The Future?
Slide 30
Slide 30 text
So Romeo would, were he
not Romeo call’d.
Juliet, Romeo and Juliet, Act II, Scene II
Slide 31
Slide 31 text
Terin Stock
@terinjokes
terinstock.com