A rose by any other name…

Browserify's core concepts, based on "Webpack: Core Concepts" by Sean Larkin. Presented at NodeSource: Webpack Edition meetup.

Transcript

1. A rose by any other name would smell as sweet Juliet, Romeo and Juliet, Act II, Scene II
2. Terin Stock @terinjokes terinstock.com
3. Gulp Browserify npm
4. 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
5. Task Runners? gulp.task('css', function() { return gulp.src('client/templates/*.less') .pipe(less()) .pipe(minifiyCSS()) .pipe(gulp.dest('build/css')); });
6. JavaScript Bundlers Understands Your App
9. 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
10. 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
11. 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
12. Core Concepts
13. Entry
14. Concept: Entry The beginning of your application, the module that’s loaded first in your browser. index.js component.js utility.js react lodash
15. Outfile
16. Outfile The bundle formed after finding all the modules in the tree. index.js app.js
17. Transforms
18. Transforms Flexibility load in files that aren’t JavaScript as dependencies. index.coffee index.js coffeeify
19. Plugins
20. Plugins Allows for Browserify itself to be extended if transforms aren’t powerful enough.
21. 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.
22. Entry Output Loaders Plugins Entry Outfiles Transforms Plugins Webpack vs Browserify
23. No differences then? Not quite…
24. Convention Or Configuration
25. $> browserify –e app/index.js –o dist/app.js -d $> webpack app/index.js dist/app.js -d
26. ESLint is a pluggable linter for JavaScript Standard is built on ESLint but is opinionated
27. What if…? There was an opinionated way of using Webpack.
28. 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. [ ]
29. The Future?
30. So Romeo would, were he not Romeo call’d. Juliet, Romeo and Juliet, Act II, Scene II
31. Terin Stock @terinjokes terinstock.com