Learn Backbone.js Completely

(More Than Just a Complete Backbone.js Tutorial)

Duration: 25 to 30 hoursPrerequisite: 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.

Over 40 exercises and more than three dozen
projects and applications
(Watching and/or reading JavaScript [JS] tutorials alone won't help you advance your programming career; you need to build real JS projects and applications as you learn. These exercises, projects, and applications are the most important part of your JS training. They will advance your JS confidence and skills and your overall programming and software engineering skills.)

Every concept covered in depth and with clarity (if you don't understand something, we will
update
the course accordingly to add more clarity)

By JavascriptIsSexy: Support the website while you simultaneously save yourself thousands of dollars

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.

Can a Single JavaScript Course Make You Richer?

This Single JavaScript Course Can Get You a Bigger Salary(4 courses in 1—available as a single course for the first time)

Becoming a JavaScript Expert

Learn almost the entire
JavaScript language, advanced JavaScript programming, software engineering for web programmers, and more

21 comprehensive major subjects and over 200 of the most important concepts covered (plus a bonus advanced course)

Over 40 exercises and more than three dozen
projects and applications
(Watching and/or reading JavaScript [JS] tutorials alone won't help you advance your programming career; you need to build real JS projects and applications as you learn. These exercises, projects, and applications are the most important part of your JS training. They will advance your JS confidence and skills and your overall programming and software engineering skills.)

Every concept covered in depth and with clarity (if you don't understand something, we will
update
the course accordingly to add more clarity)

By JavascriptIsSexy: Support the website while you simultaneously save yourself thousands of dollars

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)

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.

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.

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

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.

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

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

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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?

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?”.

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.

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.

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.

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.

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”