Getting Started with Backbone.js and Require.js

‹prev | My Chain | next›

With the first edition of Recipes with Backbone hot off the virtual press, I get started tonight with a little bit of follow up work. I am still not quite satisfied with the namespacing and packaging chapter for which I was responsible. There are two decent approaches, but I am holding out hope for a little better.

Tonight I plan to kick the tires on require.js. It looks as though the next version of Backbone.js is going to support Asynchronous Module Definition (AMD) compatible.

In the scripts directory of my application, I grab the necessary javascript libraries:

➜  scripts  wget http://code.jquery.com/jquery-1.7.1.js
➜  scripts  wget http://documentcloud.github.com/underscore/underscore.js
➜  scripts  wget https://github.com/jrburke/backbone/raw/optamd3/backbone.js
➜  scripts  wget http://requirejs.org/docs/release/1.0.2/comments/require.js

I am very careful here to grab the Backbone.js library from James Burke's "optamd3" branch. None of this will work with vanilla Backbone.js.

At this point, my directory layout looks like:

➜  backbone-requirejs-test  tree -I node_modules
.
├── app.js
├── index.html
├── scripts
│   ├── backbone.js
│   ├── jquery-1.7.1.js
│   ├── my-calendar.js
│   ├── require.js
│   └── underscore.js
└── styles

(app.js is just a simple, static express.js server).

The original HTML page is taken from some of the test code in Recipes with Backbone. In it, we have been loading the various Javascript files thusly:

    <script type="text/javascript" src="vendor/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="vendor/underscore-min.js"></script>
    <script type="text/javascript" src="vendor/backbone-min.js"></script>

    <script type="text/javascript" src="my-calendar.js"></script>
    <script type="text/javascript">
      $(function() {
        new MyCalendar($('#paginator'));
      });
    </script>

I believe that all of that can be replaced with a single <script> tag:

    <script data-main="scripts/main" src="scripts/require.js"></script>

The scripts/require.js is just require.js. To load in my application, I am specifying (via the data-main attribute) that require.js should look for the main source in script/main.js. So now, I need to actually create that file:

require.config({
  paths: {
    'jquery': 'jquery-1.7.1'
  }
});

require(['my-calendar'], function(calendar){
  calendar.initialize();
});

When I reference 'jquery' with require.js, it will try to load it as script/jquery.js. Since I have it saved as script/jquery-1.7.1.js, I need to provide the mapping. None of the other libraries that I downloaded have version numbers in the filename so they should load without assistance.

Next, I make my first require.js function call with require(['my-calendar']). As the name suggests, that requires a single library, my-calendar.js. It then makes the contents of that library available to the anonymous function as the first and only argument, which I name calendar. In that function, I tell the calendar object to initialize() itself.

As for the my-calendar library, which is responsible for initializing my Backbone application, I need to define() it. The define() function in require.js is very similar in format to the require() function. The first argument is a list of libraries to be loaded. The second argument is a function that will be called with as many arguments as there were libraries in the first argument.

In the case of my calendar object, I need 4 libraries to initialize it: jQuery, Backbone, a Paginator view, and a Router:

define(['jquery', 'backbone', 'paginator', 'router'],
  function($, Backbone, Paginator, Router) {
    return {
      initialize: function(){
        var paginator = new Paginator({el: $('#paginator')}).render();

        new Router({paginator: paginator});
        Backbone.history.start();
      }
    };
  }
);

In there, I need to grab my "Paginator" class, instantiate and render it. Then I can pass it along to my router to actually do stuff. Both the Paginator and Router are defined similarly. The Paginator looks like:

define(['backbone', 'underscore'], function(Backbone, _) {

  _.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
  };

  return Backbone.View.extend({
    _page: 0,
    template: _.template('<span class="prev">Previous</span> {{page}} <span class="next">Next</span>'),
    events: {
      'click .prev': 'previous',
      'click .next': 'next'
    },
    initialize: function() {
      _.bindAll(this, 'previous', 'next', 'render');
    },
    render: function() {
      console.log("[render]");
      $(this.el).html(this.template({page: this._page}));
      return this;
    },
    previous: function() {
      this.trigger('previous');
    },
    next: function() {
      this.trigger('next');
    },
    move: function(by) {
      this._page = this._page + by;
      return this;
    },
    page: function(page) {
      if (typeof(page) != "undefined") this._page = parseInt(page, 10);
      return this._page;
    }
  });
});

Amazingly, that all works. When I load up my redirection sample code, I actually see the redirection application with working pagination:

There may be something to this require.js stuff after all.


Day #122