(More Than Just a Complete Backbone.js Tutorial)
Duration: 25 to 30 hours
Prerequisite: JavaScript knowledge of 5/10
NOTICE: This post was updated March 2 with an additional book
In this post, 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.
Topics in This Post
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)
- 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.
Get
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.
- 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 - 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 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
- 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).
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/
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.
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.
@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.
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.
thanks a lot for putting this up!
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
http://www.codebeerstartups.com/category/backbone-js/
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 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
What is a collection? <– link is broken.
Thanks, David. I just fixed the broken link.
Truly programming is nothing but it’s a logic, if you obtain grip on it after that you are the master else not anything.
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.
YES. Thanks for all the tips and resources. Exactly what I needed.
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.
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.
Pedro, this eBook (it is free) has some great examples:
https://leanpub.com/backbonetutorials
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.
Hi Richard,
quick question, how where you able to use node in production, is the host a VPS or something?
Yep.
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.
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”.
Thanks, Vijay. I just fixed it.
Backbone 1.0 just came out!
http://ashkenas.com/backbonejs-1.0/
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.
thanks a lot
You are welcome, Dolop.
Just Thanks.谢谢！
Want to follow posts.
Brilliant website.
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 ?
HI Iryna,
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.
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.
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.