Backbone.js Patterns and Best Practices: Improve your Backbone.js skills with this step-by-step guide to patterns and best practice. It will help you reduce boilerplate in your code and provide plenty of open source plugin solutions to common problems along the way.

Backbone views are the tools that provide a logical structure to the HTML markup of your application. Views represent the data of Backbone models or collections via JavaScript templates. For any change in the associated model or collection, you do not need to redraw the complete page, only update the relevant view—that's it. A basic view can be defined this way:

var UserView = Backbone.View.extend({
  render: function () {
    var html = "Backbone.js rocks!";
    this.$el.html(html);
    return this;
  }
});

// create an instance
var userView = new UserView();
$('#container').append(userView.render().el);

Here we created a simple HTML markup, placed it inside this view's element, and showed the view in the DOM. Let's understand the concept further by looking at all the steps.

Partial view updating is a common feature request that many developers ask for. The requirement is to re-render part of a view without rendering the complete view. This is pretty significant, mostly when there is a complex view with lots of data and only a small portion needs to be altered. Re-rendering the complete view for every small change can be a performance hit. The solution to this, on the other hand, is quite simple. In the following example, if the address attribute changes, then only the address part of the view's DOM will be updated, and the complete view will not be re-rendered:

...

template : _.template('<p><% name %></p><p><%= address %></p>'),

initialize: function() {
  this.listenTo(this.model, 'change:address', this.showChangedAddress);
},

showChangedAddress: function () {
  // we are using the same main view template here though 
  // another subtemplate for only the address part can 
  // anyway be used here...

A nested view or subview is basically a child view. The necessity of a subview arises when we have a complex view and we want to separate a part of it for the sake of simplicity, better event-handling, and a better model-view relationship.

To give you an example, assume that we have a collection of similar data and we need to display a list item for each type of data. In this case, it is always preferable to have separate views and models that give an option to control the behavior of the view attached to each model. When you click on an item, you may need to use the data for that item for further processing. If the item is a subview, we can get the data readily from the model attached to it. We will explain this concept in the example that follows.

We have seen UserItemView in Chapter 1, Reducing Boilerplate with Plugin Development, which uses the User model. Now, let's introduce a collection of user data that will be displayed as a list:

var User = Backbone.Model...

Templates are an integral part of Backbone application development. With Backbone, Underscore.js comes up with its inbuilt micro template engine, though we can use other popular template engines such as Handlebars, Mustache, or Jade too. In the following section, we will cover some interesting patterns with templates that will help you to manage the templates in large applications and enhance their performance.

<script type="text/template" id="tpl_user_details">
  <h3> <%= name %> </h3>
  <p><%= about %></p>
</script>

Whenever an attribute of the attached model changes, we refresh the view to display the updated data. A change event listener is attached to the model inside the initialize() method of the view as follows:

this.listenTo(this.model, 'change', this.render);

However, there are options that can handle this data binding automatically and you do not need to take care of it for every model-view relationship. This principle is more aligned towards the MVVM design pattern than the Backbone's MV* pattern, and you will find it in frameworks such as Knockout.js and Meteor.js.

For Backbone, there are multiple plugins such as Backbone.Stickit (http://nytimes.github.io/backbone.stickit/), Backbone.ModelBinder (https://github.com/theironcook/Backbone.ModelBinder), and Rivets.js (http://www.rivetsjs.com/). These plugins provide a similar data binding feature. We are not going to discuss each plugin here; however, the implementation process is simple and similar...

Marionette (http://marionettejs.com/) is a composite application library for Backbone.js. Developed by Derick Bailey, it is a collection of common patterns and solutions to Backbone problems. It is a great library and lots of developers use it for their Backbone-based applications.

One important thing about Marionette is that it offers several separate packages for views, regions, and so on, and allows you to use any of them freely without requiring the complete library. In this section, we will explore Marionette's ItemView, the CollectionView, and the CompositeView functionalities. These views solve a number of problems we discussed in the previous sections.

When you work with multiple views in an application, it often becomes difficult to manage activities such as multiple view rendering, adding animation to an element, or replacing a view with another view. Let's look into a great extension, LayoutManager (https://github.com/tbranyen/backbone.layoutmanager), which provides a logical foundation to assemble layouts and views within the application.

Marionette too provides a similar functionality with its RegionManager, but we chose to discuss the LayoutManager plugin here because not everyone uses Marionette and this plugin can work independently with your Backbone app. If you are already using Marionette, I advise you to verify whether RegionManager solves your needs or not. Alternatively, you can use the LayoutManager plugin along with Marionette.

The LayoutManager extension provides solutions to a number of pain points such as:

In this chapter, we have gone through a number of important problems most Backbone developers come across, and learned multiple solutions to solve them. First, we discussed the partial view rendering and nested views. Any Backbone application needs to deal with nested views and if we can maintain their initialization, DOM reflow, and cleanup properly, it will greatly enhance the performance of the whole application.

We spoke about different template-handling methods, saw a number of solutions to load precompiled templates from external files, organized templates within applications, and understood how helper functions can eliminate evaluation of JavaScript codes inside templates and help us to create cleaner templates.

Finally, we learned about some of the very important extensions: Marionette's ItemView, CollectionView, CompositeView, and LayoutManager. All of these extensions provide great flexibility by taking out a lot of boilerplate code and managing your views by a great deal...