Learn Backbone.js Completely

January 14 Last Year

(More Than Just a Complete Backbone.js Tutorial)

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

I provide you with a roadmap that I myself have used (indeed, I have refined it for this article) to learn Backbone.js thoroughly. It should take just about 30 hours to complete this short, but thorough course.


After I learned Backbone.js, the first application I built was the following eCommerce web application for a client—a startup. I built the entire app, including the shopping cart, with Backbone.js and Node.js:
https://buildandprice.superfocus.com/

Don’t Be Afraid, 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 properly build modern, single-page web applications and simultaneously see your market value as a JS developer rise. Moreover, you will build JS applications considerably faster than you ever have.

Before we Continue
Consider for a moment why you have chosen to learn Backbone.js out of all the major front-end JavaScript frameworks (Backbone.js, Derby.js, Meteor.js, Knockout.js, Ember.js, Angular.js, and Spine.js). If you have chosen to learn Backbone.js because it is the most popular JavaScript framework (which it is…well, watch out for Meteor.js meteoric rise lately), then you might want to read this in depth article by Addy Osmani,
 Journey Through The JavaScript MVC Jungle, and carefully consider all the criteria for selecting the best JS framework for your particular needs.

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 the time, which was just a few months ago, Backbone.js had the more thorough documentation and the most active community of all the JS MV* (some are MVC and others are MV-”Whatever”) frameworks. In addition, Backbone.js has the most impressive list of real websites and web applications built with the framework. It is the most proven of the noted JS frameworks, as of this writing.

What is Backbone.js and Why Learn It?

You will not regret learning Backbone.js, because if you have never used a JS front-end framework before, you will have much pleasure developing applications with Backbone.js.

What is Backbone.js?
Backbone.js is a JavaScript client-side (front-end) framework that helps to organize your code and makes it easier for you to develop single-page web applications. Simply put, it makes the task of developing JavaScript applications considerably easier for you.

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 (where the logic, the data—model—and the presentation are sufficiently decoupled).

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

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

    Addy Osmani is a prolific, yet altruistic, writer who writes book-length blog posts and articles on web technologies and programming, particularly JavaScript, and he offers said writings free online. 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 of it and keep it as a reference, for you will need it. 

You can preorder it on Amazon.

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

    https://leanpub.com/backbonetutorials

    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

Note that all the links below open in a new tab so that you can read the articles and quickly come back and follow the roadmap.

  1. If you already know JavaScript very 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 development as well as front end, you should read my post, Learn Node.js Completely, if you don’t already know Node.js

12. With a complete understanding of Node.js and Backbone.js, you are ready to build any type of web application. You can go ahead and build a startup at this juncture, if you are intrepid.

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:
http://dailyjs.com/web-app.html

If on the other hand you only develop on the front end, you should still learn Node.js, for if you manage to Backbone.js, you can easily learn Node.js.

Very 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 a Lot

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:
http://backbonejs.org/

Thanks for your time; please come back soon. Email me here: javascriptissexy at gmail email, or use the contact form.

87 Comments

  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!

  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

      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

          @Nancy
          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.

  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
    http://www.codebeerstartups.com/category/backbone-js/

  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.

    • @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

    Richard,

    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

    Thanks

    • Amaury,
      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?

    Thanks.

  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

    Hi,

    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.

    • 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!

    • 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.:

    http://www.wowebook.info/book/developing-backbone-js-applications-2/

    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
    place.

  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?

    http://www.codebeerstartups.com/2012/12/a-complete-guide-for-learning-backbone-js/

    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:

    events.js:72
    throw er; // Unhandled ‘error’ event
    ^
    Error: failed to connect to [localhost:27017]

    It seems this line of code has problem:
    mongoose.connect(‘mongodb://localhost/library_database’);

    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. Spot on with this write-up, I truly believe that this
    amazing site needs far more attention. I’ll probably be returning to read more,
    thanks for the advice!

  38. 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.

  39. 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 :P

    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.

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. Node Js | Pearltrees
  19. Top 5 Things I Learned The Week of November 11 | Jake Rutter - Front-End Developer and Designer, CSS, JavaScript and jQuery, PHP, Wordpress, Expression Engine, Magento
  20. Backbone.js is a JavaScript client-side (… ~ Isabelle Lepez

Leave a Comment