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

13 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.

  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

    • 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?

  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.

    Kudos

  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: https://www.npmjs.org/package/generator-backbone-browserify

    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 networkview.ru 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 networkview.ru 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 networkview.ru 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

Leave a Reply

css.php