How To Learn Backbone.js

During the past weekend, it feels like I’ve tried almost every resource to learn Backbone.js. I learn brand new topics best by listening to someone explain it, so I started out by going to a Meetup on Thursday night where there was a Backbone.js expert who was supposed to teach us Backbone.js. Let’s just say it’s great that that guy is not a teacher…


The problem is that Backbone.js does not have it’s own web server, so it has to be used in a combination with other web server frameworks. At the Meetup, the Backbone.js expert was teaching us using Brunch.io. So not only did I have to learn Backbone.js, but also how to work with Brunch.io, CoffeeScript, and a weird template language. Without much explanation on any of these, I walked away pretty disheartened and ready to try out other learning resources.

Here are some reviews of the resources I’ve tried:

Peepcode

The Peepcode Backbone.js video walk-through was well worth the $12. I was able to follow along, understand the general Backbone.js concepts and actually build the app described in the video. The Peepcode tutorial uses Sinatra, which I’ve used before, and is in Javascript, which I know enough of, so I was really able to focus on the actual Backbone.js part of the project.

The part I didn’t like about the Peepcode tutorial was that the Backbone Model / View / Router / Collection wasn’t broken out into different files. All the Javascript stayed in the same file, which made it seem like Backbone.js is less structured than it really is.

Still, this is a really great video for an initial introduction to Backbone.

Rails + Backbone.js Railscast

While Sinatra is a nice light-weight web framework using Ruby, most of the time I’m building with Rails. That is why I was super excited to find the Rails + Backbone.js Railscast. I watched both parts, and they were amazing – again, well worth the money!

The nice thing about the backbone-on-rails gem is that it really structures your Backbone.js code into very neat folders (can you tell I’m an organization freak?). The Railscast was using CoffeeScript, which I haven’t used before, but was totally sold on by the end of it! Don’t think I can go back to plain Javascript to be honest. Bonus: Here is a great Railscast on CoffeeScript.

Anatomy of Backbone.js At CodeSchool

I’ve been going through the Anatomy of Backbone.js CodeSchool course exercises throughout the weekend. One thing that I found from this and my previous CodeSchool experiences, is that you really need to know the context for their courses. Once I understood the structure of Backbone.js from Peepcode, doing CodeSchool exercises was great for reinforcement and practice of the material.

Otherwise, you will be doing the exercises, but as soon as you finish the course, you will have no idea where to start on your own. Mostly, because they don’t even mention that you need a web server to run Backbone.js. They just jump right into the coding part of it.

The other negative part of the CodeSchool courses is that you can’t skip around levels. Some exercises are buggy or hard to understand, but you have to finish all of them before going on to the next level. I got stuck on an exercise because of a small technicality – I had to put my code into two documents, but didn’t notice the second tab – and that was it,  there was nothing I could do to move on except tweet about the issue to them and wait a day for them to reply before moving on.

However, if you can understand the context first and get past some frustration, the exercises are great practice.

Building Your Own App

Of course it’s all fun to do Backbone.js exercises, but the ultimate way to learn to start using it in your own real-life applications! I played around Backbone.js (using Rails) yesterday, as I tried to build a Hacker News / Reddit for Backbone.js resources. Here is what I have so far. I’m probably not going to continue building that specific app, but I really enjoyed using Backbone.js enough to keep using it in my future projects 🙂

So to summarize, if you’re learning Backbone.js, make sure to seek out resources that not only give you an overview of Backbone.js, but also use it with the web framework you already use and are comfortable with.

What resources do you recommend for learning Backbone.js?

Enjoy the article? Join over 14,500+ Swift developers and enthusiasts who get my weekly updates.

  • Would you like to review my interactive, online Backbone.js + CoffeeScript book for inclusion in your post? It’s a great way to learn Backbone, you edit and run code right in the book!

    http://www.scriptybooks.com/books/backbone-coffeescript

    • Hi Chris,

      While your book looks really informative, it is now how I personally learn. I really enjoyed the other resources b/c they had someone talk me through the code while I wrote it out and played with it in my own text editor.

      Best of luck,
      Natasha

      • Thanks Natasha,

        Great to get your input on this stuff: I wonder if I should embed short little focused screencasts with narration alongside the examples in my book. What do you think of that idea?

        Chris

      • Sounds great. Take a look at the resources above and see how they did it.

  • Ben

    Now that you are settled in at manilla, we can pair on some backbone stories! I think it’s a great way to learn 🙂

  • where’s the source?

  • Prateek Joshi

    hey m building an app using BackboneJS and RequireJS. m facing difficulties implementing models.. Can u share some examples which cover complete MVC along with RequireJS? Earlier i have used Backbone and Require but i have worked only with views and templates and not with models.. so not getting exact idea about how to implement it..If u can share some stuff, it would be of great help.

  • Hi Natasha. Thanks for the article. The best Backbone resource for me thus far has been Google and getting my hands dirty. Here’s an article I put together so people can get their hands dirty too, written for the most prevalent operating system today:

    Developing modern web applications on Windows with Vagrant