A review of Backbone.js Patterns and Best Practices

Engineering

Learn from our challenges and triumphs as our talented engineering team offers insights for discussion and sharing.

A review of Backbone.js Patterns and Best Practices

Engineering

“Philosophically, Backbone is an attempt to discover the minimal set of data-structuring (models and collections) and user interface (views and URLs) primitives that are generally useful when building web applications with JavaScript.”

 

The quote above is taken from the Backbone project page. As it mentions, Backbone is an extremely useful JavaScript library that allows you to add structure and modularity to your client-side application. At LiveRamp, using Backbone helps us to eliminate duplicate code, increase readability, and structure our data intuitively. Although we feel comfortable developing with Backbone, we are always looking to learn and grow as developers, so we decided to solidify our foundation and read Backbone.js Patterns and Best Practices, by Swarnendu De.

According to the author, “This book is for JavaScript developers who work with Backbone.js and want to learn the best design patterns to develop complex web applications.” He also mentions that basic knowledge of JavaScript and Backbone is essential to get the most out of the book, but it would also serve well as an introduction to Backbone for a beginner. At around 150 pages, we found it to be a quick, yet informative read.

This book does well to cover all the basic components of Backbone development, including views, models, collections, events, and more. It presents these topics in a way that makes them easy to understand by starting with the basics and then slowly building complexity. As mentioned in the title of the book, it also focuses on describing best practices of Backbone development to the reader. Some topics that it covers well are approaches to reusing code, proper memory management, and application performance considerations. One chapter of the book explains how best to organize your Backbone application, and covers everything from application architecture and directory structure to setting up and running your application. This chapter could particularly help a Backbone beginner get started.

Backbone.js Patterns and Best Practices does a great job at explaining foundational Backbone concepts, but what makes it really useful is that it will go on to recommend tools and frameworks that you can use to simplify syntax, abstract away complexities, or add functionality. We found that we were already using many of these extensively at LiveRamp, including:

  1. RequireJS (http://requirejs.org/)
    • “RequireJS is a JavaScript file and module loader… Using a modular script loader like RequireJS will improve the speed and quality of your code.”
  2. Marionette (http://marionettejs.com/)
    • “Marionette simplifies your Backbone application code with robust views and architecture solutions.”
    • Marionette provides us with useful views that help to cut down on backbone boilerplate, related events to manage actions in our application, a region manager for organizing view elements, and much more
  3. Stickit (http://nytimes.github.io/backbone.stickit/)
    • “Stickit is a Backbone data binding plugin that binds Model attributes to View elements with a myriad of options for fine-tuning a rich app experience.”
  4. Backbone-relational (http://backbonerelational.org/)
    • “Using Backbone-relational, we can configure relationships between our models, and sync the model and all of its related models… Backbone-relational.js provides one-to-one, one-to-many and many-to-one relations between models for Backbone”
    • Most of the data we pass to our application comes from a relational database, and Backbone-relational makes it easy to establish similar relations between the associated Backbone models and collections

We find these tools to be essential to the development of our applications at LiveRamp, so if you are developing with Backbone, or thinking about developing with Backbone, make sure to check out them out! Also, if you’re in the market for some Backbone learning material, Backbone.js Patterns and Best Practices is a great resource for  building foundational knowledge and learning good conventions for application development.