Learn Backbone.js Completely

»jan. 14 2013 111

(More Than Just a Complete Backbone.js Tutorial)

Duration: 25 to 30 hours
Prerequisite: JavaScript knowledge of 5/10

Below, I provide you with a comprehensive study guide that I myself have used (indeed, I have refined it for this article) to learn Backbone.js properly. This study guide should take just about 30 hours to complete.

Become an Elite/Highly Paid Specialized Software Engineer (Frontend, Fullstack, etc.)

Within 8–10 Months, Earn MORE than the Avg. New CS Graduate Earns.

New Prices (Monthly Subscription):
Basic: $250/month, Pro: $350/month, Premium: $600/month

By the founder of JavaScriptIsSexy

After I learned Backbone.js, the first application I built was an eCommerce web application for a client—a startup. I built the entire app, including the shopping cart, with Backbone.js and Node.js.

  • Receive Updates

Backbone.js Is Friendly
Backbone.js is neither difficult to learn nor difficult to use, and the time you will spend learning to use this serviceable framework will be well worth it, for you will learn how to use one of the most popular front-end frameworks and learn how to build modern web applications on the front end. In addition, you will see your market value as a JavaScript developer rise, since Backbone.js developers are in high demand.

Before we Continue
I should note that Angular.js and Ember.js are robust and feature-rich front-end frameworks that offer more than Backbone.js, and they allow you to develop applications with less code than Backbone.js. Nonetheless, I still think developers should learn Backbone.js first, particularly because it is easier to learn and provides you with a solid understanding of what a JavaScript framework is and how a JavaScript framework functions.

I chose Backbone.js for the aforementioned eCommerce web application because I had only a few days to learn a JS framework and I needed a proven JS framework since I was developing a web application for a client. And at that time (around 2012) Backbone.js had the more thorough documentation and the most active community of all the front-end JavaScript frameworks. In addition, Backbone.js had the most impressive list of real websites and web applications built with the framework.

What is Backbone.js and Why You Should Learn It

If you have never used a JS front-end framework before, you will understand why nearly every modern web application uses a front-end JS framework.

  • Receive Updates

What is Backbone.js?
Backbone.js is a JavaScript front-end framework that provides the structure and organization for your application code, the event-based communication for your application, and the necessary interconnectedness for your data, application logic, and user interface (the HTML/CSS elements seen on the web page). Simply put, Backbone.js allows us to develop applications, the front-end in particular, much easier and better (more scalable, reusable, and modular code) than using just a bunch of related and unrelated JavaScript functions stacked on top of each other, a concept known as Vanilla JavaScript.

Why Learn Backbone.js
You should learn Backbone.js if:

You do not already use a front-end JavaScript framework and you intend to develop single-page web applications or complex JavaScript web applications.
  • You want to start programming JavaScript in a more organized, structured manner, eschewing the old way of having all of your JavaScript code mixed with HTML and without separation of concerns (that is, the logic, the data, and the presentation aren’t sufficiently decoupled).

Get The Two Backbone.js eBooks (one free one very cheap—$4.99)

  1. First, download a free copy of Addy Osmani’s Developing Backbone.js Applications

    Addy Osmani is a prolific writer who writes book-length blog posts and articles on web technologies and programming, particularly JavaScript. He has written on a myriad of JavaScript topics and just about all of his works are available online for free. However, since his book Developing Backbone.js Applications is only $15.81, I recommend you own a copy and keep it as a reference; you will need it. 

You can order it on Amazon.

  2. Instead of the Addy’s book, you can buy the book “Backbone Tutorials” at the link below:

    Note that most of this article focuses on the Developing Backbone.js Applications book, but you can use Backbone Tutorials; just follow along with the relevant topics, accordingly.

Roadmap to Mastering Backbone.js

All the links below open in a new tab, so that you can read the articles and quickly come back and follow the study guide.

  1. If you already know JavaScript well, and you feel invincible when you sit to code in JavaScript, carry on with step 2 below.

    If you don’t know JavaScript well enough to develop a full, interactive quiz application with just JavaScript (no jQuery), you should learn JavaScript Properly.

    If you know enough JavaScript and want to proceed, but you feel you need a JavaScript refresher, read these 3 articles (in the order they are listed):
    JavaScript Objects in Detail

    JavaScript Variable Scope and Hoisting Explained

    — (Must Read
) Understand JavaScript Closures With Ease

  2. Read the following 4 blog posts for the conceptual understanding of Model, View, Router, and Collections:
    What is a model?
    What is a view?
    What is a router?
    What is a collection?
  3. Read the entire tutorial at the link below (note that it is a bit old, but still valid) and study and understand it carefully, but don’t try to build the app just yet:
    Backbone.js Wine Cellar Tutorial — Part 1: Getting Started
  4. Read Developing Backbone.js Applications from the beginning (Prelude) to the Backbone Basics chapter.
  5. Read these 2 blog posts:
    The Responsibilities Of The Various Pieces Of Backbone.js
    3 Stages Of A Backbone Application’s Startup
  6. You should be able to build the simple Backbone.js application you studied in section 3 above. Return to that tutorial and build the application.
  7. Return to Developing Backbone.js Applications and read the Exercise 1 chapter (and build the application), then read the chapter titled Common Problems & Solutions followed by the chapter Exercise 2 (and build the application in exercise 2).
  8. Read the Modular Development chapter and build whichever application(s) you want to build from this chapter. You needn’t build all of the example applications.
  9. Follow these two tutorials (these are a bit old too, but still accurate):
Backbone.js Wine Cellar Tutorial — Part 2: CRUD
Backbone.js Lessons Learned and Improved Sample App
 (This is a MUST READ)
  10. These are 4 MUST READ articles:
    — (Learn how to communicate among views and subviews)
    References, Routing, And The Event Aggregator: Coordinating Views In Backbone.js
    Revisiting The Backbone Event Aggregator: Lessons Learned
    — (Managing Page Transitions In Backbone Apps)
    Learn How to transition between views and how to properly dispose of views
Zombies! RUN!
    Why Should I Use Backbone.Marionette Instead Of … ?

That’s It! (Almost)

At this juncture, you have learned enough to build any Backbone.js application: you have gone from absolute beginner to attainment in under 30 hours, if you stayed the course.

But to really understand and retain what you have learned, you must build a real, single-page web application.

11. If you are involved with backend as well as front-end development, you should read either my post Learn Node.js Completely and with Confidence or Learn Meteor.js Properly. After you learn either, you will be able to build complete modern web applications.

12. With a complete understanding of Node.js and Backbone.js (or with Meteor.js), you will be ready to build any type of web application. You can also build a startup at this juncture, if you are intrepid.

If on the other hand you only develop on the front end, you should learn Angular.js or Ember.js, if you want a high-paying front-end developer job. Also, consider Facebook’s React.js (a new front-end framework), which some large Silicon Valley firms and other companies are using today.

But before you head off on your adventure, build the NodeApp web application at the link below; this exercise provides a real-world exercise in Node.js/Backbone.js web application development:

Important Extras

  1. Read the following chapters in Developing Backbone.js Applications to further advance your knowledge on the Backbone.js ecosystem:
    — Backbone Extensions
    — Backbone Boilerplate And Grunt-BBB
    — Mobile Applications
    — Unit Testing
  2. Learn Handlebars Templating Engine
    Handlebars templating engine is much more robust and feature rich than the simple template engine bundled with Backbone.js (The template used in Backbone.js by default is from the Underscore.js library, and Underscore.js is Backbone.js’s lone dependency).
    Read my post, Handlebars.js Tutorial: Learn Everything About Handlebars.js JavaScript Templating.

The Backbone.js Documentation is Great; You Will Use it Often

Once you start developing on your own, you will find yourself making frequent stops to the Backbone.js documentation. This will likely be the website you visit most often, when you need help figuring out how to do any myriad of things while developing a Backbone.js application. Here is the link:

Be good. Sleep well. And enjoy coding.


  1. Devan Beitel

    A much anticipated post, that does not fall short of helpful at all. Keep up the good work, and continue writing (more often)! Thanks!

    • Richard Bovell (Author)

      Thanks, Devan. I am encouraged to write more because visitors like you are learning from the blog posts.

  2. Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a little bit, but instead of that, this is fantastic blog. A fantastic read. I’ll definitely be back.

  3. Stephen C

    Thanks for the great resource. Much appreciated! I’m still not through it all, but I did notice that the links on “4. Read these 2 blog posts:” return a 404 in Chrome upon the initial click-through. Yet the pages will subsequently render if I hit enter inside the Omnibox. Just an FYI. Thanks again!

    • Richard Bovell (Author)

      Thanks much for pointing this out, Stephen, I have fixed the broken links.

      • Nancy

        Great post!
        Where is the tutorial for Step #5?
        You should be able to build the simple Backbone.js application you studied in section 4 above. Return to that tutorial and build the application.

        • Richard Bovell (Author)

          Glad to hear you find the post useful. The tutorial for step #4 is actually in step #2. I had the wrong step number: I had the tutorial step as step #4, so I just changed it to step#2.

          Thanks for bringing this to my attention.

          • Nancy

            Thank you, Richard.
            I am gaining a good understanding of Backbone.js. I had my doubts, but this roadmap is great.
            I am trying to build my app as I go along, due to time constraints, but I hope I soon find out how to wrap a collection within a collection.

            Thank you.

          • Bala

            Hi,Nancy how to use backbone.js in our PHP module…

  4. noder

    thanks a lot for putting this up! :)

  5. I just want to tell you that I am just very new to weblog and absolutely savored you’re web blog. Probably I’m likely to bookmark your site . You certainly have remarkable articles and reviews. With thanks for sharing with us your website.

  6. I tried to write down a very basic series of posts regarding backbone js. Will love to have your feedback

  7. David

    Addy’s family name is Osmani, not Osami. You got it wrong every time ;). Anyway, great post. Feel free to delete this comment, it’s only to avoid frustration among readers that try to find Addy Osami to no avail.

  8. Alex

    I’m just working through your “learn javascript properly” series, and plan to do this once I’m done with that, I hope that by the time I’ve worked through them both that you can have the “learn handlebars.js” post ready.

    I’m very excited, thank you so much for these series.

    • Richard Bovell (Author)

      @Alex, I have completed about 70% of the Handlebars.js tutorial since 4 days ago, but I had some pressing issues to attend to over the last few days and I did not get to complete it.

      I plan to complete it by tomorrow, though :)

  9. David

    What is a collection? <– link is broken.

  10. Thanks for this. I’ve been half-heartedly attempting to learn javascript (and eventually node.js) for the past few months. Having a guide and pointers to resources is phenomenally helpful.

  11. YES. Thanks for all the tips and resources. Exactly what I needed.

  12. Amaury


    After I learned Javascript which of these technologies will be the most important to learn and in what other should I learn them?

    > Node.js
    > Knockout.js
    > Backbone.js
    > JQUERY
    > Coffescript
    > TypeScript
    > Bootstrap


    • Richard Bovell (Author)

      First, if you follow the Learn JS Properly course, you will see that you will learn jQuery at the same time as you are learning JS.

      1. I recommend you learn JS properly (it includes jQuery), then read the “Effective JavaScript” book (it is one of the books I recommend in the Advanced JS roadmap). And it is easy to read: it is comprised of 68 excellent JS tips.

      2. Then learn Twitter Bootstrap.

      3. Now, it is very tricky to recommend a JS framework, because there are so many good ones to choose from and they are as similar as they are different. For now, I would say learn Backbone.js, because it is relatively easy to use, it is lightweight (not a big behemoth), there are many Backbone.js resources, and it is the most popular. No need to learn knockout.js plus backbone.js.

      4. Then learn Node.js, and you are good to go. You can skip the rest, they are not necessary; most are alternatives to what you would have learned already.

  13. Pedro

    This tutorial is great, but I’m stuck in the render and templating part of the Views. Is there any resources with a great explanation about this specifics parts?


  14. Thanks for the sensible critique. Me & my neighbor were just preparing to do some research about this. We got a grab a book from our area library but I think I learned more clear from this post. I’m very glad to see such great info being shared freely out there.

  15. Anthony

    Hi Richard,

    quick question, how where you able to use node in production, is the host a VPS or something?

  16. MikeS

    In step 4 you reference the Internals chapter of Addy’s book, but there’s no such chapter. (Did a name get changed?) Should that now be the Backbone Basics chapter?

  17. Vijay


    Link if the Step 1 is not working

    If you don’t know JavaScript well enough to develop a full, interactive quiz application with just JavaScript (no jQuery), “you should learn JavaScript properly”.

  18. JP

    Thanks for your excellent tutorials.

    I was going through the Backbone tutorial, and noticed that the wine cellar example on steps 3 and 6 doesn’t work with Backbone 1.0. It might be worthwhile to mention this if someone follows the example closely with the latest libraries.

    Rendering wineListView fixed it.

    • Richard Bovell (Author)

      Thanks for the notice, JP. I will update this article and I will make a note of that. In fact, I may try to contact the author of the tutorial, and possibly recommend a different tutorial.

  19. dolop

    thanks a lot

  20. Chenguangpeng

    Just Thanks.谢谢!

  21. Jacques

    Want to follow posts.
    Brilliant website.

  22. This is a great walk through and introduction to Backbone.js thank you for linking to the other blog posts also.

  23. Iryna

    Hi. I can’t access the links to examples in section 5. Do you have any alternatives ?

  24. dillan

    Hey it seems Christopher Coenraet’s tutorial in section 3 doesn’t exist anymore (URL not found)

  25. Thanks, Richard. There were some links in here I hadn’t seen before that I’m sure will come in handy down the road. My approach to learning Backbone has been a bit different, and has occurred mostly via experience with Chaplin. And when written in CoffeeScript everything starts to fit easily.

    Here’s an article I wrote that will allow your readers to get Backbone 1.0+ set-up quickly under Windows: http://www.habdas.org/developing-modern-web-applications-on-windows-vagrant/

    And thanks again for the resources!

    • Richard Bovell (Author)

      I had a cursory look at your post and it is touches on some technologies and topics that I haven’t touched here, so it is a good article for readers of this blog to read. Thanks for sharing.

    • Anthony

      Vagrant is great, I started using it at work to set up different environments, I liked it so much I partitioned off part of my windows machine to run Linux on it, love linux!
      I have a question though, what do you guys prefere to use, Chef or puppet?

  26. BVSat

    I’ve done my fair share of fiddling with Backbone. One thing I found very frustrating with backbone is that its like you are given the raw ingredients and you have to figure out a way to make an awesome stew out of it. Well, recipes in a cookbook exist because you don’t have to reinvent the wheel everytime. With backbone, every developer, everytime has to go through the same pain of figuring out how to get it to work in their app. There are no best practices, what works, what doesn’t, what problems one might encounter…so its a lot of trial and error and having to do it everytime for every developer out there is a waste of time. Let me pose a simple question and lets see if we have any straightforward answers – “how do you handle associations through a restful API on the backend with backbone?”.

  27. Jason Williams

    The thing is you can’t rush great wine. Sure, there are countless great Backbone.js Tutorials and even better Backbone.js Books, but you still have to slow down and learn the fundamentals.

    That’s what we signed up for…That’s the craft.

  28. Brendan

    You can download the first backbone book that you recommended here for free, as well as tons of other great programming books.:


    I use it all the time

    • Anthony

      I wish you didn’t just put that link out there for someone to blow the whistle on them, I’ve been using that site for years, Oh well it’s just a matter of time before it get’s shut down now :(

  29. ankish

    Applause to the effort taken !! thanks..

  30. This is my first time visit at here and i am genuinely pleassant to read everthing at alone

  31. aida

    Thank you very much Richard…
    i’m agree with you about this article :
    ” More Than Just a Complete Backbone.js Tutorial) “

  32. I just came across this site today in my quest to build my own small business. I know it will help. Thanks for putting this up. Now i want to learn javascript properly :)

    • Wonderful. Go for it, Adetunji. But don’t give up, even when it seems impossible :). Just keep trying; you will figure it out eventually, even if it takes many days.

      Programmers are used to taking time to figure out some stuff.

  33. Dom

    Do you have any thoughts on this online tutorial?


    Thanks for your great website!

    • Anthony

      Looks like Jeffery Way’s tutorial on tuts+
      so it’s pretty decent starter( I just skimmed the code, but the one on Nettuts+, he shows you how to add a backend with Laravel)

    • I am not familiar with the tutorial you linked to, but I suggest you choose and use whichever one works best for you. This looks like a new tutorial.

  34. Foysal

    Your tutorial is not for beginners. You are advertising book actually. Thanks

  35. yougen

    Hi, really great road map for learning backbone. I also learned Node based on your post. I really want to know how you could know so much resources? Since in the post, you also give some useful blog and articles. Could you share how you know these great and wonderful resources? Really appreciate.

  36. Yuichi

    I got this error:

    throw er; // Unhandled ‘error’ event
    Error: failed to connect to [localhost:27017]

    It seems this line of code has problem:

    I’m searching for solution on Stackoverflow but haven’t found yet…

    • Yuichi

      Oh I just got it work.
      In a terminal tab, ‘mongod’ to start db.
      In another terminal tab, ‘node server.js’ to start server.

  37. Karl

    While I know you’re not personally responsible for this, you may have a bit more leverage on getting something done about it.
    Trying to construct this http://addyosmani.github.io/backbone-fundamentals/#exercise-1-todos—your-first-backbone.js-app has some problems… base.css and bg.png links are broken… sorta frustrating trying to learn from broken examples.

  38. Tanuj Pant

    Came here to learn Backbone two days back and ended up honing basic javascript skills through your articles on js variable scope and hoisting, closures, callback funtions etc. Then found myself one year late for the reddit group but still going with the schedule (think i’ll create my own and then go with it). Got the books for the Backbone. Need to gobble down Backbone fast for a one page app but not without my fundamentals 😛

    All of that was me, one ques for you: Why did you stop writing?
    Can’t find anything this year’s in your recent posts. Don’t stop man. You Are Good.

  39. Miles

    backbonetutorials.com is down. :(

  40. krastley

    Thanks for great resources. I work with JS a lot recently but I’m new in the world of MV* frameworks. I found your roadmap very useful.

  41. Corey

    Hi Richard I think the sites in step 5 are down: — The Responsibilities Of The Various Pieces Of Backbone.js
    — 3 Stages Of A Backbone Application’s Startup

    Are there any alternative readings? Thanks in advance!

  42. Dylan

    Hey all of the ‘losttechies’ blog posts aren’t loading. Is that something with them or your links?

  43. Corey

    Hi Richard, I’ve been following your blog for a few weeks now, and am having trouble understanding Exercise 2 of Addy’s book. Specifically the part starting with “creating the back end”. Do we have to know node.js before I can fully understand this part? There’s a lot of commands in the code that I’m unfamiliar with, and the book doesn’t really explain some commands in full detail.

  44. Ting

    Hey Richard I just built a quiz app with backbone. Would u recommend learning meteor or node next? Thanks in advance!

  45. Muhammad Abdusamad

    How is the progress with the courses coming along? I’m anxious to get started

  46. Ashish Sajwan

    Guyz lets discuss all backbone.js related questions here : chat.stackoverflow.com/rooms/84541/backbonejs-mvc lets build this char room & get answers really quick from active developers

  47. basiclaser

    By the time this tutorial leads the user to start writing code, the winecellar tutorial completely omits how to set up a server to serve as an API.

  48. VIP

    Hi Richard,

    I am a Guys who nows Normal Javascript Very well. Codes small apps in Jquery. Do lot of custom javascript coding. But I am a Old school Self taught guy who learnt all the technologies on my own. I just know the concept of MVC. Don’t do lot of coding at the moment as I am Entrepreneur. What is the best way to learn angular and backbone?

    Currently I am learning Codeigniter. But I have worked on Classic ASP. Core PHP etc.

    Do suggest.

    Thanks in Advance.

  49. Kelly

    Hello, are you planning write (or do you have) any tutorial about ReactJS?

  50. winecellarsucks

    the wine cellar tutorial is an enormous disaster, the author has no idea of what teaching is: “i’ll give you the code and that’s it. Btw if you dont know how to set the server up, is you f***ing problem. Cheers”

  51. Vishwas Chouhan

    Hey thanks for this valuable resource.
    Is it still worth it to learn backbone.js in 2016 or should I learn some other new technology?
    If yes, is this track still as useful?
    Please reply.

  52. Rajesh Kumar

    Links are broken for understanding of Model, View, Router, and Collections. Could you please fix it.

  53. Rajesh Kumar

    http://backbonetutorials.com/ links are broken. Could you please fix it.

Trackbacks for this post

  1. How to Learn JavaScript Properly | JavaScript is Sexy
  2. Pilgrimage to JavaScript Glory: Noob to Expert | JavaScript is Sexy
  3. Learn Node.js Completely and with Confidence | JavaScript is Sexy
  4. Web Development | Annotary
  5. Django, Coffeescript, and Backbone.js | Ryan Mendieta
  6. Backbone And WordPress Resources | Peter R Knight
  7. Backbone.js | Pearltrees
  8. Building a single page app with Backbone.js, underscore.js and jQuery | &yet | the blog | CupScript
  9. Developing Java web applications with Backbone.js
  10. 學習 JavaScript
  11. Searching for a good javascript framework for a Rails App | HolaRails
  12. Javascript seems to be the future… | Dev Freddy
  13. Best Learning Resources for Meteor.js | XNFA ZEN
  14. Underscore.js and Backbone.js Learning Resources : WPMayor
  15. Underscore.js and Backbone.js Learning Resources
  16. Learn Backbone.js Completely | JavaScript is Sexy | Hugo Mineiro Portfolio
  17. Backbone | Pearltrees
  18. Working Progress - August 2
  19. 如何正确学习JavaScript | 应酷爱网页设计
  20. sexy.com | JavaScript is Sexy
  21. Working Progress - October
  22. 如何正确学习JavaScript | 产品汪-技术百科
  23. 如何正确学习Javascript | 17khba
  24. [译] 如何恰当地学习 JavaScript — 好JSER
  25. My very first backbone app | adelaine ho
  26. 如何正确学习JavaScript – web研究院
  27. 「译」如何正确学习JavaScript - YelloWish
  28. 「译」如何正确学习JavaScript | 大前端
  29. Javascript Rapid Prototype Tools - learn it. - Sandy Nichols Web DesignSandy Nichols Web Design
  30. 如何正确学习JavaScript | 前端控

Leave a Reply to Vishwas Chouhan Cancel Reply

Current ye@r *