Until now, templates have been declared as script tags in the index.html file. While this is a good approach for small projects, it is not a good idea to put all your templates directly in the HTML file.

With Browserify, you can extract all your template files into individual files, with the advantage of modularization and a cleaner index.html file. Another benefit of modularizing templates is that you can pre-compile all the templates, saving resources in your users' browsers.

With Browserify, you can modularize almost any template format: jade, Handlebars, Underscore, and so on. It uses a transformation process described in Figure 4.5. If you have worked with other bundler tools such as webpack, transformations are analogous to pre-processors.

Figure 4.5 The transformation process

Templates are in plain text; the text is passed to a function that compiles it into a JavaScript function that Browserify can process as a regular JavaScript file. To apply the necessary transformation to the templates, you will need to install a transformation plugin:

$ npm install --save-dev jstify

The transformation process take place when you instruct webpack to use jstify at compilation time:

$ browserify main.js -t [ jstify --engine underscore ] -o ../../.tmp/js/app.js

Templates are easy to modularize; just extract the text in the script tags and put it in a new file:

// apps/contacts/templates/contactListLayout.tpl
<div class="actions-bar-container"></div>
<div class="list-container"></div>
<div class="footer text-muted">
  © 2015. <a href="#">Mastering Backbone.js</a> by <a href="https://twitter.com/abieealejandro" target="_blank">Abiee Alejandro</a>
</div>

The contactListLayout.tpl now contains the text of the layout template for the contact list. In the ContactListLayout view you can import the template as a regular JavaScript file but do not forget to include the tpl extension:

// apps/contacts/views/contactListLayout.js
'use strict';

var Layout = require('../../../common').Layout;
var template = require('../templates/contactListLayout.tpl');

class ContactListLayout extends Layout {
  constructor(options) {
    super(options);
    this.template = template;
    this.regions = {
      actions: '.actions-bar-container',
      list: '.list-container'
    };
  }

  get className() {
    return 'row page-container';
  }
}

module.exports = ContactListLayout;

When you import the template, you will use a function. Because our common views support both CSS selectors and pre-compiled templates it should work properly:

// common.js
render() {
  // Get JSON representation of the model
  var data = this.serializeData();
  var renderedHtml;

  // If template is a function assume that is a compiled
  // template, if not assume that is a CSS selector where
  // the template is defined and is compatible with
  // underscore templates
  if (_.isFunction(this.template)) {
    renderedHtml = this.template(data);
  } else if (_.isString(this.template)) {
    var compiledTemplate = this.compileTemplate();
    renderedHtml = compiledTemplate(data);
  }

  this.$el.html(renderedHtml);

  // Call onRender callback if is available
  if (this.onRender) {
    this.onRender();
  }

  return this;
}

Now you have a fully modularized project where each piece of code is in a small file; one advantage of this is that you can focus on small chunks of code instead and avoid the overhead of large files.