Browserify Sample Application: with Backbone, jQuery, Handlebars, and Cordova

Browserify is a tool that lets you bundle node.js modules and consume them in the browser. In other words, it allows you to write browser-based applications using node.js-style requires.

Quick Tour

  1. Install browserify
    npm install -g browserify

    or

    sudo npm install -g browserify
  2. Write a module
    // greetings.js
    module.exports = function(name) {
        return 'Hello ' + name + '!';
    }
    
  3. Use the module
    // app.js
    var greetings = require('./greetings');
    alert(greetings('Christophe'));
    
  4. Create the bundle
    browserify app.js -o bundle.js

    browserify recursively analyzes all the require() calls in your app and builds bundle.js with all the dependencies.
  5. Add bundle.js to your index.html file and run the application.
    <html>
    <body>
    
    <script src="bundle.js"></script>
    </body>
    </html>
    

More details:

  • You can “require” core node modules (crypto, querystring, url, etc.), community modules published on npm, and your own application modules.
  • Browserify requires you to build your application (using the “browserify” command line tool) before you can run/test it. But watchify or beefy can make that build process transparent during development by watching for source file changes, and building your application behind the scenes.
  • Browserify supports source maps to let you debug your application using individual JavaScript files.
  • Browserify provides an extensibility mechanism through “transforms”. A browserify transform lets you transform the source code of modules at build time before it’s injected in the bundle. For example, in the Employee Directory app, I use the hbsfy transform to transform Handlebars HTML templates into precompiled template functions.

Employee Directory Sample Application

As an example, I took my existing Employee Directory sample application and replaced the Require.js module implementation with Browserify. The application also uses jQuery Backbone, and Handlebars templates.

You can run a hosted version of the application here

The code is available here. Here are some quick highlights:

Employee Directory uses jQuery, Backbone, underscore, and Handlebars templates. These modules are installed as follows:

npm install jquery
npm install backbone
npm install underscore
npm install handlebars 
As usual, you can specify your application’s dependencies in package.json, and install them with a single “npm install”.

In your app, you can then require modules as usual. For example:

var underscore = require('underscore');

There are a couple of things that are different when requiring jQuery and Backbone in this manner:

  1. jQuery needs the window object
  2. Backbone’s jQuery reference needs to be set

Here is an example:

var $ = require('jquery')(window);
var Backbone = require('backbone');
Backbone.$ = $;

Handlebars templates

I use the hbsfy transform to transform Handlebars templates into precompiled template functions.

  1. Install the hbsfy transform
    npm install hbsfy
  2. Use the templates as follows:
    template = require("templates/Employee.hbs");
    $('body).html(template(employee));
    
  3. Specify the hbsfy transform when building the app:
    browserify -t hbsfy app.js -o bundle.js

Source Code

The complete source code for the application is available here. You can run it in the browser or on a mobile device as a Cordova/PhoneGap app.

To run the application in a browser:

  1. Make sure browserify is installed:
    npm install -g browserify
  2. Download and unzip the source code, then “cd” to the application root folder.
  3. Install the dependencies (based on package.json):
    npm install
  4. Build the application:
    browserify -t hbsfy app.js -o bundle.js
  5. Open index.html

You can run a hosted version of the application here

5 Responses to Browserify Sample Application: with Backbone, jQuery, Handlebars, and Cordova

  1. tom January 14, 2014 at 12:21 pm #

    yo dawg, i heard you like javascript so we wrote some javascript that lets you write javascript on the server, and then we wrote some javascript to let you use that javascript on the browser like regular javascript

  2. Greg January 29, 2014 at 9:21 am #

    Hey repo code is broken as is, logged an issue.

  3. Dan March 5, 2014 at 12:33 pm #

    FYI, Backbone lists the Underscore module as a dependency and pulls it in under its own node_modules folder. By npm installing and requiring Underscore again, you’ll end up with two copies of underscore in your complied file.

    To avoid the duplication, you could not explicitly install underscore, and just use the one that comes with backbone.

    require(‘backbone/node_modules/underscore’)

    That’s ugly, but you could alias it back to just ‘underscore’ using:

    bundler.require(‘backbone/node_modules/underscore’, { expose: ‘underscore’ });

    See: https://github.com/substack/node-browserify#brequirefile-opts

  4. ChristianoK April 11, 2014 at 4:39 am #

    It’s hard to find your website in google, you should build some quality backlinks, i know how to help your website to rank, just search in google for – k2 seo services

  5. TommyE April 14, 2014 at 3:48 pm #

    Guys you should try dzaine money making system – brings me some good cash, just search it in google

Leave a Reply