Backbone.js - A Getting Started Guide

I’ve been learning Backbone.js and wanted to make a video that might help others that are in the process of learning it too. You can watch the video here on Youtube http://youtu.be/ig-zWy0moAw

Table of Contents

  • Introduction: 0:00
  • What we're working on: 1:55
  • Making it work with vanilla jQuery: 3:30
  • How to think of Backbone Views: 5:11
  • Slight intro to CoffeeScript: 7:46
  • Creating our first Backbone View: 10:51
  • How to use Backbone Events: 18:27
  • Overview of what we have so far: 24:49
  • Adding a Backbone Model: 25:50
  • Looking at the updated code: 33:39
  • Moving a model to a Backbone Collection: 36:09
  • How the code works now and refactoring: 42:29
  • Talking about Routers: 46:50
  • How I like to pull everything together: 49:52

Why I Created the Video

I found Backbone to be a rather complicated library. Most tutorials explain what Models, Collections, Views, and Routers are, but they don’t seem to explain when and where to use them.

In my application I didn’t want to create a "live" site where any small change made on the page resulted in updating the database. All I wanted was better way to structure and write my JS code. As a result, most tutorials weren’t as relevant to me when trying to add various Backbone objects into my JS.

How I think Backbone should be learned

What helped me the most is only picking one part of Backbone and learning how adapt it to how I’ve always coded. From there, I would see how another part of Backbone was useful and tied into what I was using and I steadily being incorporating more and more components.

That’s why I made the video. I wanted to make an example of taking a relatively common problem and step by step implement Backbone where it made sense.

Demo

Check out this Pen!