(More Than Just a Complete Backbone.js Tutorial)
Duration: 25 to 30 hours
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.[sc:mongodb-book]
Table of Contents
Backbone.js Is Friendly
Before we Continue
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.
What is Backbone.js?
Why Learn Backbone.js
You should learn Backbone.js if:
Get The Two Backbone.js eBooks (one free one very cheap—$4.99)
- First, download a free copy of Addy Osmani’s Developing Backbone.js Applications
- 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.
- 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?
- 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
- Read Developing Backbone.js Applications from the beginning (Prelude) to the Backbone Basics chapter.
- Read these 2 blog posts:
— The Responsibilities Of The Various Pieces Of Backbone.js
— 3 Stages Of A Backbone Application’s Startup
- 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.
- 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)
- 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 viewsZombies! 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:
- 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
- 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).
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.
A much anticipated post, that does not fall short of helpful at all. Keep up the good work, and continue writing (more often)! Thanks!
Thanks, Devan. I am encouraged to write more because visitors like you are learning from the blog posts.
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!
Thanks much for pointing this out, Stephen, I have fixed the broken links.
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.
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.
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.
Hi,Nancy how to use backbone.js in our PHP module…
thanks a lot for putting this up! 🙂
Pingback: Web Development | Annotary
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.
I tried to write down a very basic series of posts regarding backbone js. Will love to have your feedback
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.
Thanks much, David. That was an embarrassing mistake, considering how many of Addy’s articles I have read. I just fixed it.
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 🙂
What is a collection? <– link is broken.
Thanks, David. I just fixed the broken link.
Pingback: Django, Coffeescript, and Backbone.js | Ryan Mendieta
YES. Thanks for all the tips and resources. Exactly what I needed.
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.
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.
Pingback: Backbone And WordPress Resources | Peter R Knight
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?
Pedro, this eBook (it is free) has some great examples:
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.
quick question, how where you able to use node in production, is the host a VPS or something?
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?
Thanks very much for bringing this to my attention, MikeS. You are correct, the name of the chapter did change, and I have updated the post accordingly.
Link if the Step 1 is not working
Thanks, Vijay. I just fixed it.
Backbone 1.0 just came out!
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.
Pingback: Backbone.js | Pearltrees
Pingback: Building a single page app with Backbone.js, underscore.js and jQuery | &yet | the blog | CupScript
thanks a lot
You are welcome, Dolop. 🙂
Want to follow posts.
This is a great walk through and introduction to Backbone.js thank you for linking to the other blog posts also.
Hi. I can’t access the links to examples in section 5. Do you have any alternatives ?
I was able to access the links in section 5. Do you mean this section:
Read these 2 blog posts:
— The Responsibilities Of The Various Pieces Of Backbone.js
— 3 Stages Of A Backbone Application’s Startup
Yes, I meant this section. Actually, I can access the links today too.
Maybe there we some problems yesterday.
Pingback: Developing Java web applications with Backbone.js
Hey it seems Christopher Coenraet’s tutorial in section 3 doesn’t exist anymore (URL not found)
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.
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?”.
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.
Pingback: Best Learning Resources for Meteor.js | XNFA ZEN
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
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 🙁
Pingback: Underscore.js and Backbone.js Learning Resources : WPMayor
Pingback: Underscore.js and Backbone.js Learning Resources
Applause to the effort taken !! thanks..
Thank you, Ankish.
This is my first time visit at here and i am genuinely pleassant to read everthing at alone
Thank you very much Richard…
i’m agree with you about this article :
” More Than Just a Complete Backbone.js Tutorial) “
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.
Pingback: Backbone | Pearltrees
Do you have any thoughts on this online tutorial?
Thanks for your great website!
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.
Your tutorial is not for beginners. You are advertising book actually. Thanks
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.
Interesting question. I spent a lot of time on the research when I compiled the list. In the future, I will update the sources often to keep them fresh.
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…
Oh I just got it work.
In a terminal tab, ‘mongod’ to start db.
In another terminal tab, ‘node server.js’ to start server.
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.
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.
backbonetutorials.com is down. 🙁
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.
Pingback: Working Progress - August 2
Pingback: Working Progress - October
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!
Hey all of the ‘losttechies’ blog posts aren’t loading. Is that something with them or your links?
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.
Hey Richard I just built a quiz app with backbone. Would u recommend learning meteor or node next? Thanks in advance!
How is the progress with the courses coming along? I’m anxious to get started
Pingback: My very first backbone app | adelaine ho
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
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.
Currently I am learning Codeigniter. But I have worked on Classic ASP. Core PHP etc.
Thanks in Advance.
Hello, are you planning write (or do you have) any tutorial about ReactJS?
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”
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?
Links are broken for understanding of Model, View, Router, and Collections. Could you please fix it.
http://backbonetutorials.com/ links are broken. Could you please fix it.
I found it very interesting and enjoyed reading all of it…keep it up, lovely job.