Learn Backbone.js Completely

»jan. 14 Last Year 86

(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:

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:


    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:

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:

Leave a Reply

Current ye@r *