Backbone.js: An MV-Style JavaScript Library

Image for Backbone.js: An MV-Style JavaScript Library

Backbone.js: Writing Clean JavaScript Code from the Start

Backbone.js is a JavaScript framework that was designed with specific goals: to keep client-side JavaScript code clean and organized, and to make it easy for developers to connect that code with their site’s server-side applications. Thanks to its structure and fluidity, it’s a favorite in the world of JavaScript programming.

What makes it such an important addition to the technology landscape? To start, JavaScript is front-end development. It’s the ubiquitous script that makes everything in a website or web application interactive, responsive, and—with AJAX and JSON—it’s able to efficiently pull and manipulate data to load, refresh, and update all the elements within a page. Because of this, JavaScript logic is not without its complexities. It’s constantly modifying and interacting with HTML elements while working to synchronize the database and the user interface simultaneously, and the code can get tangled. When code gets tangled, your app becomes harder to change, update, or maintain.

Backbone.js was designed to solve this, and preempt some of the most common mistakes that happen in JavaScript development: duplications, overlapping JavaScript code and markup code, and long, messy files that are hard for other developers to read and work with.

Backbone.js accomplishes all of this by enforcing organized, neat code with its unique evolution on the MVC design pattern.

A QUICK LOOK AT MODEL VIEW CONTROLLER (MVC) DESIGN & JAVASCRIPT

What is the model view controller design? It’s an approach to development that is all about separation of code. Typically used in server-side development, it’s designed to break out components—database code, browser view code, and the scripts that bridge the two. This development paradigm is central to Backbone.js’s functionality.
Infographic showing how a model view controller design works

MVC-designed code is always broken into three sections—a process called decoupling. The MVC components include the:

  • Model: the code that stores and retrieves the application’s data. It sends updates to the View, and gets manipulated and updated by the Controller.
  • View: the code that displays the Model data onto whatever graphical interface is being used, like a tablet or a computer screen. It’s the user interaction component, and sends any user requests to the Controller for processing.
  • Controller: the code that bridges the Model and the View components, acting like a mediator between the two. It receives user input from the View (like a click or a mouse-over) and sends and receives an update from the Model, then returns that to the View.

Decoupling these components has a few benefits. First, it keeps everything in the code separate (e.g., JavaScript stays separate from markup) rather than housing it all in one long file. This eliminates duplication, a common JavaScript error, and makes runtime faster. Also, if you want more than one person to collaborate on that code, MVC keeps things clean and readable. It’s a pattern that programmers use in Ruby on Rails,Java, or C, and it’s lent its functionality well to solving potential JavaScript problems.

Backbone.js, however, isn’t quite MVC—it’s MVC-inspired, or MV*. Here’s a look at why.

BACKBONE.JS IS A COMPACT MVC JAVASCRIPT FRAMEWORK

Backbone.js is a lightweight JavaScript framework primarily used for developing single-page web applications (SPAs)—one-page web applications where all interaction happens within that page without requiring a full-page refresh, like Gmail. It’s lightweight because it only relies on one JavaScript library to run—Underscore.js—and at its most basic, usable format, Backbone.js’s code only occupies about 7.6 kb (v. 1.3.3), which means faster page loads.

That size really sets it apart vs. other MV* JavaScript frameworks like Ember.js and AngularJS. Angular weighs in at 157 kb (v. 1.5.8), while Ember is around 95 kb (v. 1.7.0). This is because Backbone.js is designed to provide the bare bones of a SPA, leaving it up to the developer to add on additional functionality as they see fit. Indeed when you consider that most people will most likely include jQuery as a soft dependency for RESTful persistence and DOM manipulation with Backbone.View, that file size is probably closer to 42 kb. It may also require additional third-party libraries or frameworks to give it the robustness of Angular, but it’s in the flexibility with which you can add on these additional features that the strength of Backbone.js truly lies.

BACKBONE.JS’S KEY DIFFERENTIATORS

Backbone.js has no Controller. More recent versions of Backbone don’t have a separate Controller component. The Controller functionality of bridging the Model and the View has been allocated into other components.

Backbone.js has six components. Most of the six components are built using JavaScript objects, the core of how JavaScript works. These components give developers the advantage of customization. With Backbone.js, you can take advantage of the components, but with flexibility—something developers describe as being “unopinionated.”

awesome job post

The components of Backbone.js:

  • Model—contains the business logic, validations, and data storage for an application. In Backbone.js, the model receives HTTP requests from events passed by the view via the router and then synchronizes that data from the database before sending the response back to the client.
  • View—organizes how your models and collections will be displayed. In Backbone.js the view does not directly render your HTML or CSS code. Instead it allows you to use your preferred JavaScript templating library, and only specifies how a given model or collection will display its data to the user. Each view can be updated independently when the model changes without having to reload the entire page.
  • Collection—an ordered set of models which can bind to events whenever a model in the collection is modified. Like an individual model, a collection fires events whenever a change occurs. Whenever a model is added or removed from a collection a change event is fired.
  • Event—a module that can be mixed into any object, giving it the ability to bind and trigger custom named events like user clicks or mouse overs. This allows almost any object in Backbone.js to listen to and dispatch events.
  • Routers—which create a navigational structure. A similar function to the traditional MVC controller, and where most of that former functionality now resides in Backbone.js
  • Sync—which drives most of the communication between the Backbone.js framework and any server-side technology, like the application’s database

Backbone.js’ built-in JavaScript APIs make it all possible. They streamline and automate much of what occurs between an application’s Model and View components, keeping a site’s user interface and database simultaneously updated without requiring any extra code. Basically, Backbone.js allows developers to write really minimalist JavaScript code—code that performs well for those writing it, and those interacting with the finished product.

Post a job on Upwork. It's free!
Carey Wodehouse

by - Freelance Content Marketer and Writer

Carey Wodehouse is a freelance content marketer and writer based in Richmond, VA who’s worked for clients ranging from online retailers and global market research… more