@bendrucker

♥

1. Why you need a module loader

2. Intro to Browserify

3. Live code

WARNING

Strong opinions ahead

Why do I need a module loader?

1

Straw Poll

Bower

Bower Features

• Package manager for the client side

• Download packages from a git repository

• Handle semantic versioning

• Download dependencies

Vomit All Problems Onto User

Dependency Graph

AppA B C

D E F G H

ABCDEFGH

<script> tags

Concatenating your files is <script> tags with fewer HTTP requests

Why We Need a Module Loader

• We want to build our apps without manually specifying every script in order

• We want dependencies without conflict vomit

• There are 146,330 packages on npm and it would be nice to use them

1

Intro to

2

Browserify understands Node’s require algorithm and builds a single script

that can run in the browser

module.exports = require('angular') .module('myApp', [ require('angular-resource'), require('angular-messages') ]) .name

// node_modules/angular-resource/index.js

require('./angular-resource') module.exports = 'ngResource'

browserify -e app.js > dist/app.js

We want to build our apps without manually specifying

every script in order

✓

npm install --save angular dog-names

Access to 146,330 packages on npm

✓

node_modules is nested• node_modules/• angular-credit-cards/• node_modules/• ap/• creditcards/• node_modules/• camel-case/• creditcards-types/• fast-luhn/

Dependencies without

conflict vomit

✓

https://twitter.com/nrehwaldt/status/579589215043870720

Code

3

Thank You!

@bendrucker bendrucker.me

github.com/bendrucker