Chapter 1. Reducing Boilerplate with Plugin Development
"When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful."
The previous excerpt from http://backbonejs.org precisely specifies the problem that Backbone.js solves. Backbone.js provides a way to simplify the JavaScript application structure, which was clearly a nightmare, even a few years ago. Today, we have moved a long way from tightly coupled jQuery-based applications to heavy frontend applications, and a major portion of the application logic now relies on the UI part. This means organizing the application structure is now one of the most significant aspects of application development, and should take care of the reusability, modularity, and testability of the components of an application.
Being an extremely lightweight library, Backbone.js, along with the utility library Underscore.js, provides a set of tools that help to organize your code and makes it easier to develop single-page web applications. Backbone delivers a minimalistic solution to separate the concerns of your application; features include RESTful operations, persistent strategies, models, views with logic, event-driven component communication, templating, and routing facilities. Its simplistic nature, excellent documentation, and a large community of developers make it easy to learn how to use this library.
However, to develop a robust system, we do not depend only on the basic functional components of the framework; we have to use many other libraries, plugins, and reusable add-ons to support the core system as well. While Backbone.js with its core components provides a way to structure your application at the base level, it is really not enough until we either develop our own or use other open source extensions, plugins, and useful patterns. In order to create solid, software architecture, we need to make the best use of existing components and follow proper design patterns. This is what we intend to deliver in this book.
This is not a general introduction book, and we expect our readers to have a basic understanding of the Backbone.js framework. If you are a beginner and looking for good resources to start with Backbone.js, we will recommend you to refer Appendix A, Books, Tutorials, and References, of this book, where we listed a number of useful resources to help you master Backbone.js.
We will start with an understanding of how we can re-use our code and reduce a boilerplate by developing custom extensions, plugins, and mixins. In the latter chapters, we will start discussing the common problems, tips, patterns, best practices, and open source plugins for each Backbone.js component. We will also see how we can use Backbone.js to structure and architect complex web applications, and understand the basics of unit testing in JavaScript-based applications. In addition, instead of developing a single application spanning all the chapters, we have tried to provide simple and complete examples on each topic separately throughout this book. In this chapter, we will learn a few important topics with examples. These topics and concepts will be used many times in rest of the chapters. They are as follows:
Basic components of Backbone.js: This consists of a brief discussion about the definitions of the Backbone components
Use of Underscore.js: This consists of a brief discussion about Underscore.js and the utility of using this library for JavaScript-based projects
Re-use code with extensions: This consists of reusing the Backbone code by moving common code blocks to parent-level classes
Backbone mixins: This consists of an explanation of what mixin is, and how and where to use mixins with Backbone
