We've been acquired by Pluralsight!
| Find out more
  • Playing with BackboneJS

Playing with BackboneJS

You can watch this production over at Pluralsight.com. We're currently migrating all of our productions and should have them all rolled over by January 1, 2014.

Pin It

In this production we build a single page application with BackboneJS that breaks the bonds of the "silly demo". No more Todo lists - we're building an Open Source MongoDB document explorer! A perfect Use Case for a Single Page app powered by BackboneJS. It also allows us to use Javascript in every part of our application: client, server (using Node), and database! And we're doing it all on Windows 8 with WebMatrix 2.


We plugged in MarionetteJS in Episode 10, and pushed the code as a branch to Github which you can view here

Episode 10 is Free

You can watch it up at Vimeo - we remove all the work that we've done to date and plug in MarionetteJS.

A Simple Start

This is a different kind of production for us at Tekpub. We're building out an application that we need to use and we're Open Sourcing it as well. We use MongoDB quite often - and many times have wanted to work with a MongoDB explorer much like the RavenDB explorer built using Silverlight.

But who needs Silverlight when you have Backbone and HTML5?

As you can imagine - there are many moving parts to building such an app - but we take our time and start slow. Instead of a linear progression through the intricacies of BackboneJS, we're going to use repetition:

  • Creating a view,
  • Applying a model or collection
  • Adjusting our Router
  • Refactoring the code to keep it clean

App Building

We can't stress it enough: this production is about building an app. It starts off explaining concepts, but quickly gets into the crazy-making aspects of working an app with Javascript. We'll refactor, change our minds, yell at our computers and in the end make something beautiful.

The Code

We encourage you to follow along in your favorite IDE/Editor. We've created a starter site that you can use straight away on Windows (with WebMatrix 2) or on a Mac using whatever you like. The entire screencast will be focused on Windows development - but feel free to use a Mac if you like.


What is BackboneJS? Who Cares?

In this, the first episode, we take a look at what BackboneJS can do and talk about why you might want to use it. We explore the difference between Backbone and other frameworks like Ember, Angular and Knockout, and finally we get the starter site off the ground.

A Simple View

In this episode we get to the code: creating a simple view for our breadcrumb navigation, and wiring up a simple event. Once again, we do some very, very basic tasks in this episode as we're starting out slowly given that Backbone can become quite complex rather quickly.

The List View

In this episode we start to move things along a bit faster as we tackle one of the basic patterns in Backbone: creating a list view. We need to list out our Mongo databases, but before we do that we need to understand how lists work.


Every view needs some data - but how do you hook it all up? In this episode Rob works with collections and their models and wires them up to the views, focusing on doing it "the Backbone way". We also take some time to do some light refactoring.


In this episode things start to get a bit more complex. There are a few moving parts we have to deal with as we shift to dealing with data - and pretty quickly I fail completely as I start to plugin the add and delete events. Once that's sorted, I fail again when it comes to validations. Learning through failure - that's what this episode is all about.

Refactor 1

In this episode Rob stops and looks at the code so far in an effort to abstract away repeated patterns. We take a look at other frameworks and how they do things, and see what we can do to streamline our codebase and also make it more flexible.


In this episode we kick up the complexity and venture into the realm of Software Architects. Up to this point, we were laying out a simple Master/Detail page - now we need to add Navigation, Orchestration, and State - and it would be nice if we didn't shoot ourselves in the foot in the process!

Going Around Backbone, Part 1

Every abstraction has its limits - Backbone is no exception. In this episode we plugin the Ace Editor, an open source code editor that powers Cloud9 IDE. The editor is rather overbearing, and (as far as Rob can tell) it doesn't want to be contained in another framework so we'll need a work around. In addition, we need the concept of MongoDocuments to our project - and we take care of that at high speed.

Going Around Backbone, Part 2

In this episode Rob finishes things up by bending the Ace Editor into the Backbone structure. Initially it looked like we wouldn't be able to pub the editor into a View, but in this episode we figure out a way! Along the way we clean up the navigation code and wrap things up a pretty bow. This is the final development episode - the next episode we'll migrate over the MarionetteJS with Derick Bailey.

Plugging in MarionetteJS

In this free episode here on Tekpub, Derick Bailey joins us and helps Rob remove his homespun abstraction in favor of using MarionetteJS. Marionette is Derick's Open Source project that is, basically, the last 3 years of Derick's experience working with Backbone (daily), wrapped up in a thin layer of abstraction!


The code for this project is up at our Github repo