Book Image

Backbone.js Patterns and Best Practices

By : Swarnendu De
Book Image

Backbone.js Patterns and Best Practices

By: Swarnendu De

Overview of this book

Table of Contents (19 chapters)
Backbone.js Patterns and Best Practices
About the Author
About the Reviewers
Precompiling Templates on the Server Side


Though Backbone.js provides a structure for JavaScript applications, developers need to take care of most of the design patterns and best practices themselves. Over the years, my JavaScript development team and I worked on multiple Backbone.js applications ranging from simple to extremely complex. We experienced different types of problems related to layout management, project architecture, modular development, and so on. Before I started writing this book, I spent a significant amount of time trying to figure out solutions for all the common problems associated with the development of Backbone.js applications. In this book, I have documented all my findings in detail.

Whether you are an intermediate- or advanced-level Backbone.js developer, this book will guide you through the best practices and patterns to handle different issues with each Backbone component. Whether this is by using your own solution or an existing Backbone plugin, you will get a clear idea of the best way to resolve any problem.

Instead of developing a single application spanning all the chapters, a simple and complete example on each topic is provided separately throughout this book. This is because it would be quite difficult to implement all the tips and patterns given in this book in a single application. Moreover, we preferred to provide immediate and compact solutions to problems, instead of including all the problems and solutions in a single large application. Within a short span, this book tries to cover all the important points you may need for the development of your Backbone.js application.

What this book covers

Chapter 1, Reducing Boilerplate with Plugin Development, starts with the basics of why reusing your code is important, and how we can achieve that by creating custom Backbone.js widgets and mixins.

Chapter 2, Working with Views, discusses the different points related to view rendering and layout management. Starting from partial updating of views, functionality of nested views or subviews for different processes of JavaScript template management and best practices, this chapter covers most of the problems a developer may face while working with views. We conclude by writing about the Marionette custom views and the Layout Manager plugin for complex app layout management.

Chapter 3, Working with Models, talks about different patterns while working with Backbone models, including data validation, model serialization to fetch data, and saving data to the server. We also analyze the relational data model for one-to-many and many-to-many relationships using Backbone's relational plugin.

Chapter 4, Working with Collections, covers a number of common problems that developers face while using Backbone collections. We explain how to apply basic and multiple sorting, how to apply filtering to a collection, and how to manage a collection while a mixed set of data is passed from the server.

Chapter 5, Routing Best Practices and Subrouting, covers a number of best practices you should follow while working with routers. We also discuss the benefits of using multiple routers or subrouters for complex and large-level applications.

Chapter 6, Working with Events, Sync, and Storage, begins by describing the importance of custom events to enhance an application's modularity and reusability. We also discuss using an application-level event manager to work as a centralized PubSub system, and the use of the Backbone.sync() method to create different data-persistent strategies.

Chapter 7, Organizing Backbone Applications – Structure, Optimize, and Deploy, is one of the most important chapters that a developer will find very useful if they are developing a complex Backbone application. It talks about the application directory structure, organizing and managing files with RequireJS, and the different architectural patterns that every JavaScript developer should follow to develop large-scale application architectures.

Chapter 8, Unit Test, Stub, Spy, and Mock Your App, talks about the benefits of unit testing your JavaScript application, and introduces you to the QUnit and SinonJS test frameworks.

Appendix A, Books, Tutorials, and References, lists a number of useful Backbone.js resources that you may find helpful.

Appendix B, Precompiling Templates on the Server Side, describes the benefits of precompiling JavaScript templates at server side with examples.

Appendix C, Organizing Templates with AMD and Require.js, discusses the process of storing and organizing JavaScript templates with the RequireJS, text!, and tpl! plugins.

What you need for this book

Most of the code in this book can be opened in a simple text editor (Notepad++ or Sublime Text). To run the code, you can use any web browser. For some code, you may need a local server (Apache or IIS) to be set up. For Node.js-related functionality, you need to set up a Node.js server.

Who this book is for

This book is for any developers who has a basic knowledge of Backbone.js and is looking for solutions to common Backbone.js problems, looking to enforce reusability in their code by removing boilerplate and developing custom plugins and extensions, and hoping to use the most effective patterns to develop large-scale web application architecture.

This book is not a general introduction to Backbone.js or JavaScript design patterns. There are lots of books, tutorials, and screencasts available that cover a general introduction in great detail. While this book will discuss the basics of the Backbone.js components in each chapter, the main priority will be to provide you with the concepts of developing a robust, high quality, and flexible code base.


In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We can include other contexts through the use of the include directive."

A block of code is set as follows:

var MainView = Backbone.View.extend({
  el : '#main',
  render : function(){
    this.$el.html(new BaseView().render().el);

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

var BaseView = Backbone.View.extend({
  template : '<h1><%= name %></h1>',
  render : function(){
    var html = _.template(this.template, {
      name : 'Swarnendu De'
    return this;    

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes appear in the text like this: "clicking on the Next button moves you to the next screen".


Warnings or important notes appear in a box like this.


Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to , and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.


Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from


Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.


You can contact us at if you are having a problem with any aspect of the book, and we will do our best to address it.