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!