Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
190 lines (119 sloc) 4.36 KB

Browserify Goodness

What is Browserify?

Browserify is a tool for building client-side application using node patterns and practices.

It is good.

Why use Browserify?

  • It is good.
  • The module require syntax in node is simple and effective - browserify is the best implementation of that in the browser.
  • You can leverage the awesome node package ecosystem powered by npm.
  • It makes you think <small> and rage against frameworks.

Super Simple Demo


var key = require('keymaster');

key('up', function() {
    console.log('you pressed up'); 


    "dependencies": {
        "keymaster": "1.0.x"


npm install
browserify demo.js > demo-bundle.js

Improving the Development Flow

Some helpful development tools exist that make working with a browserify friendly project a more enjoyable experience:

Both tools aim to make round tripping dev in a browserify environment more pleasant. I'll be demoing bde because I got found there was some things that browservefy didn't make easy and bde was pretty easy to write.

Using BDE


sudo npm install -g bde

Head to your project, and start bde:


By default, this will start a server on port 8080 but you can start it on a different port by supplying it as the first argument:

bde 8090

Browserify is Smart

So you should be too.

V2 of Browserify introduced static-analysis of your code, and only includes those parts of an imported package that you have used.

This should impact how you build your browserify friendly packages.

Package Example

- testpackage
|-- index.js (core functionality)
|-- extension1.js
|-- extension2.js

In the example structure above, the index.js file contains only core functionality for your module and the extension files (extension1.js and extension1.js include extra stuff).

// just include the extension stuff we need
var ext = require('testpackage/extension1');

Concrete Example

NOTE: All of this stuff is alpha!

We all know that Modernizr is awesome, and while it does offer customized builds I find the process clunky. So I started having a go at writing an alternative:

var transform = require('feature/css/transform');

// check if transforms are available
if (transform) {
    // if they are you can use the transform return value (which is in fact a function)
    // to get the value and modify the transform value
    transform(testElement, 'scale(2.0, 2.0)');

Even though the feature package contains lots of other stuff (well will eventually), you only pay for what you use.

Browserify supports UMD

Since V2, Browserify has become more modular and less opinionated. Writing your libraries using the "Browserify approach" does not stop it being used in other environments.

Build your library with the --standalone option to package a UMDjs compatible build:

browserify index.js --standalone blah > blah.js

Understanding Browserify Transforms

V2 introduced the concept of transforms. The transform pipeline gives developers the opportunity to integrate other languages (and general coolness) into their build process.


  • coffeeify
  • brfs
  • stylify

Browserify Isn't Perfect

There are definitely limitations within browserify, but for the most part it's great. One thing that I often try is to specify a dynamic include. Consider the following example (which is something I was trying to do in decker):

function useTheme(theme) {
    require ('./themes/' + theme);


An Example Project

A good example of most of the things I've talked about is the project running this slide deck:

Makes use of:

Use bde if you want to play around and get quick feedback.