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


    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');
  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.
    <script src="bundle.js"></script>

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");
  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

23 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

    • david May 1, 2014 at 2:50 pm #

      This is the funniest and simplest description of browserify I have seen.

    • Leonard June 19, 2015 at 11:34 am #


  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.


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

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


    • Patrick May 3, 2014 at 12:55 pm #

      where exactly do you put the bundler.require(…) – in e.g. main.js ?
      wouldn’t there be an option to shim the underscore dependency through package.json?

    • Sean December 21, 2014 at 12:21 pm #

      This is incorrect. Browserify is intelligent enough (just like npm) to know when there are identical modules in the dependency graph and will only pull in one copy. The duplication occurs when you are requiring different VERSIONS of the same library which can easily be avoided with proper versioning in your package.json file.

  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

  6. prefabrique maison au liban April 27, 2014 at 1:22 pm #

    Hi there just wanted to give you a quick heads up.

    The words in your article seem to be running off
    the screen in Opera. I’m not sure if this is a format issue or something to do with browser compatibility but I figured I’d post to let you know.
    The design look great though! Hope you get the issue solved soon.


  7. Patrick May 3, 2014 at 12:52 pm #

    Interesting, I was just working on a yeoman generator for this setup.

    Current status is here:

    The directories for app/views, app/models, … must be manually linked into an app/node_modules folder for the best experience

  8. 46GregoryD May 5, 2014 at 2:03 am #

    Hi, it’s hard to find in google, i found it on 38 spot, you should build some high quality backlinks, i know what can help you, just search in google for – edaya traffic increase

  9. le vin et les rêves pdf May 8, 2014 at 6:02 pm #

    hey there and thank you for your info – I have definitely picked up anything new from right here.
    I did however expertise a few technical issues using
    this site, since I experienced to reload the
    site many times previous to I could get it to load
    correctly. I had been wondering if your hosting is
    OK? Not that I am complaining, but slow loading
    instances times will sometimes affect your placement in
    google and can damage your quality score if advertising and
    marketing with Adwords. Anyway I am adding this RSS to my e-mail
    and can look out for much more of your respective fascinating content.
    Make sure you update this again soon.

  10. 33MaximusJ May 11, 2014 at 7:32 am #

    Hi, it’s hard to find in google, i found it on 36 spot, you should build some high quality backlinks, i know what can help you, just search in google for – edaya traffic increase

  11. 80JustinW May 21, 2014 at 5:34 pm #

    I noticed that is hard to find in google, do you know that you can increase clicks dramatically by adding 5 stars review below your website in google search results? For more info just search in google – Juuri13 wp SEO advice

  12. lness as well as fashion, practically a thing of which is a modern day ladies or maybe gentleman. Lena johnson contributes articles testimonials in addition to content articles regarding different matters one example is style along with culture. Regularly vacationing coming from Nyc to help.

    • Matt December 11, 2014 at 7:53 am #

      Babelfish just ain’t what it used beings :)

  13. Bromfort mc Snor March 2, 2015 at 6:18 am #

    The example runs fine, except that the jQuery functions aren’t working. It seems that jQuery is loaded, since the $ object is populated with something, but I can’t call jQuery functions on $.

  14. BWBackboneJs April 25, 2015 at 7:37 am #

    Christophe, as usually great blog post on the web development and Backbone.js! For people interested in discovering projects built in Backbone.js – just visit Backbone.js websites gallery

  15. William May 29, 2015 at 3:24 pm #

    Good stuff. Will most likely switch from require.js because of this article.

  16. antrenman malzemeleri November 18, 2015 at 2:44 am #

    kalite,fiyat uygunlugu ve imalattan.profesyonel ekip eşliğinden güvenilir işler yapılmaktadır

  17. sohbet December 8, 2015 at 5:24 pm #

    duka adamdir.


  1. Best of JavaScript, HTML & CSS – Week of January 6, 2014 - Modern Web - March 20, 2015

    […] Christophe Coenraets takes his Employee Directory sample app and replaces RequireJS with Browserify. Browserify Sample Application: with Backbone, jQuery, Handlebars, and Cordova […]

Leave a Reply