Demystify Backbone.js Series

Links of interest:

Web Frameworks

Web frameworks exist to support the development of dynamic web applications by abstracting away the details for common activities.

Code Modularity

Many follow the MVC architectural pattern which keeps code modular and promotes separation of concerns. The model (M) contains the data and the logic surrounding it. The view (V) is the output representation of information. The controller (C) accepts user input and translates it into intent for the model or view.

Some popular front-end frameworks are Backbone, Angular, and React. Each framework/library takes a different approach. All are abstractions of the JavaScript language, but the amount to which they look and feel like JavaScript differs greatly.

Web frameworks may seem like these magical black boxes of code, wrapped in a handy API that makes them easy to use. A majority of developers stay at the API level — meaning they learn the syntax required to get the job done and call it a day.

If you’re like me, perhaps you’re able to appreciate a good magic trick here and there, but you’re left feeling curious and/or unsatisfied with an itch to understand what the hell happened!

Backbone.js Under the Hood

Backbone was my first introduction to an MVC framework and I have a deep appreciation for its relative simplicity and light-weight nature.

What’s awesome about it is that if you have a solid understanding of JavaScript fundamentals, you can easily understand how the framework operates. You’ll be able to jump into the Backbone.js source code (which is beautifully annotated) and grasp the inner workings of the framework.

Don’t be deterred by this notion of vast complexity under the hood (as I was initially). The Backbone.js source code is likely more approachable than you might think. In fact, you could probably write your own mini-implementation of Backbone.js no sweat!

If that’s something that interests you, read on! That’s what we’ll do here together :)

Backbone.js Components

These are the core components of the Backbone.js framework:

  • BAREBONE.js Models
  • BAREBONE.js Collections
  • BAREBONE.js Event System
  • BAREBONE.js Views (view-controller)
  • BAREBONE.js extend method

Barebone Backbone.js framework

Throughout this post, we will cover the basic functionality of Backbone.js (models, collections, and views). Together we will construct pieces of a mini-framework called BAREBONE.js (a barebone reimplementation of Backbone.js). You can view the annotated source for BAREBONE.js here. It’s only about 120 lines of code!

Use it to create an RSVP application

In this blog series, together we will construct an RSVP application using the framework code that we write together (view app here). The annotated source code for the project can be found here.

You will get insight into MVC framework architecture and understand the inner workings of Backbone.js, meanwhile reviewing core features of the JavaScript language and solidifying your understanding and implementation of JS fundamentals.

Goals and takeaways

Demystify Backbone.js

  • shed light on what’s going under the hood (it’s not magic)
  • understand how the components of the framework work together

Takeaway: Understanding Backbone.js and other frameworks is more approachable than one might think!

Review JavaScript Fundamentals

  • scopes & closures
  • this keyword
  • instantiation
  • subclassing
  • event system

Takeaway: If you understand these, you can write your own MVC framework!

BAREBONE.js source code:

Posts in this series:

Are you ready to dive in?

We will start off by creating a closure to avoid polluting the global scope by wrapping the framework code in an IIFE (immediately invoked function expression) and placing the BAREBONE object on the window object.

Function Scope and IFFEs

JavaScript (the current version ES5) doesn’t have block scope, it only has function scope. So in order to create private variables (not in the global scope) we need to declare them in a function. Any variables declared in a function are only accessible within that function’s scope.

Since we are only using the function for its scope, there’s no need to name it and invoke it at a later point. We can simply create an anonymous function and immediately invoke it, hence the term IIFE (immediately invoked function expression).

We’ll put all of our classes (Events, Model, Collection, View) on the ‘BAREBONE’ namespace which we will stick on the window object. We do this so that we can access it from the global scope. The BAREBONE object will be the only variable from the entire library that we can access from the global scope.

/* BAREBONE.js source code */
(function() {
  var BAREBONE = {};
  BAREBONE.Events = function(attributes) { ... };
BAREBONE.Model = function(attributes) { ... };
BAREBONE.Collection = function(models) { ... };
BAREBONE.View = function(options) { ... };

Cool, so now let’s take a closer look at BAREBONE.js Models.

Next: BAREBONE.js Models!

Next we will explore BAREBONE.js Models and how they allow us to store our data and the logic that surrounds it.

Like what you read? Give Katrina Uychaco a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.