Backbone.js For Beginners: Best Tutorials, Videos, And Learning Materials

Frontend JavaScript Resources This post may contain affiliate links. If you buy something we get a small commission at no extra charge to you. (read more)

Among the many MVC-style JS frameworks, Backbone is considered the original. It’s been around since 2010 with an active community and various large-scale webapps that still operate on Backbone to this day.

Some devs differentiate Backbone as a library rather than a framework since it has a broad range of features with few limitations and much less specificity than something like Angular. Generally this covers models and views passing data based on user interactions.

backbone js presentation

But without specific development styles, the Backbone community has individually followed its own architectural methods—and these require time to learn. So where do you get started?

I’ve compiled the best Backbone learning resources you could ever need into this post including online tutorials, intro guides, books, videos, conference presentations, and online courses(if you’re willing to go that route).

Find whatever works best for your learning style and if you ever have trouble you can post a Stack question for further insight.

Prerequisite Content

The bare minimum for Backbone work is an understanding of JavaScript fundamentals. This includes variables & scopes, functions, loops, and preferably array manipulation.

It’s also helpful to understand MVC architecture which separates the data models, views, and interactive elements into separate components. Tuts+ has an intro guide on this subject if you need to brush up.

It can be argued that Backbone is not an MVC framework, but instead an MV* framework without controllers. Either way it’s worth understanding how data models work, how views work, and what controllers are just to incorporate your knowledge into future projects.

But everything related to Backbone is built on JavaScript. So to learn BB you’ll really want a fundamental-to-intermediate understanding of JavaScript concepts and coding styles.

frontend framework chart diagram

It’s also worth mentioning that Backbone requires Underscore.js which is a free open source library for functional programming helpers.

You don’t need to fully understand what this means to get started with Backbone. However it’s worth at least acknowledging the importance of Underscore and realizing that it’ll be a staple along with Backbone’s JS library.

Note that Underscore can be applied with almost any platform where it serves a real functional purpose. To learn more about Underscore I’d recommend this Tuts+ article made for complete beginners who don’t know where(or why) to start.

So with that out of the way, let’s see what kind of resources are available for devs who want to learn Backbone.js for web projects.

Online Tutorials

Available to anyone with Internet access, free online tutorials are undoubtedly the best place to start learning any tool or programming language. But it can be tough filtering which tutorials are worth your time.

A great place to start is the to-do list example hosted on TodoMVC. This is a website dedicated to all the MVC/MV* frameworks teaching developers the differences between them.

backbone todo list webapp

Beginner Backbone projects need to challenge the developer, but not so much that the dev gets frustrated and gives up. Many consider the to-do webapp to be the “hello, world!” equivalent of beginner tutorials. For a more complete to-do tut check out the part one and part two tutorial series posted for free on GitHub.

And if you need a simpler starting point check out Thomas Davis’ content hosted for free on GitHub. He wrote a lengthy noob intro to Backbone which explains all the files you need to include, setting up a basic view, and how to write your JS code to scale.

CodeProject has an eight-part series of intro Backbone tutorials which altogether offer a brilliant learning resource. You may not find a lot of actionable code, but you will learn how Backbone functions and how to build applications properly.

I’ll also recommend Backbone.js for Absolute Beginners written on Adrian Mejia’s website. It’s a four-part series and each part includes a table of contents to guide you along the way. Truly one of the best posts for beginners to grasp Backbone’s features.

Although I’m not personally a huge fan of TutorialsPoint, they do have a multi-part Backbone.js guide that might be worth checking out. Each part is very brief so I feel it’s difficult to take away real value from each chapter. But this can be useful if you’re intimidated and need a softer intro to the material.

learn backbonejs banner

Once you understand a little about the core BB fundamentals you should dive right in and start writing an application. If you don’t have any ideas this can be frustrating.

But get started with step-by-step tuts like this single-page todo web application.

Envato’s Tuts+ library also has more beginner stuff like getting started with BackBone or learning the fundamentals of building a scalable app. The site also offers more specific stuff like combining Backbone.js with Laravel or WordPress.

Tuts+ is one of my favorite resources for free content because every post is lengthy and detailed. If you like the above tutorials you might also enjoy this video tut covering Backbone and how it connects with the server environment.

Also I know this isn’t technically a tutorial but I feel this freebie by Manning Publishing is worth a read. They initially had a book slated for publication which ended up being cancelled. Some of the book was already written, so the author Samuel Breed authorized the first chapter to be released for free.

You’ll find a link to that PDF in the article and it’s a decent four-page intro to Backbone’s potential.

Those of you looking for structural content might try this three-part series written by Jack Franklin for the JavaScript Playground.

The tutorial is geared towards a general exploration of Backbone. There is a certain structure to the code, but it’s not a typical “build X app” type of post.

Here are all three parts if you want to give them a shot and see if you can glean any knowledge from Jack’s writing.

If you get confused in the process of any of these tutorials please consider visiting Stack Overflow for solutions. Backbone has a small but tight community and Stack answers can be surprisingly helpful.

Backbone Books

Free online tutorials are wonderful but they’re not always concise. You end up relying on strangers to help you understand detailed topics for free. This is great and obviously the best place to start—however books are typically the next step when you need to level up your skills.

Some devs prefer to start with books because they present learning materials in an orderly fashion. I can’t say if books are right for you. But I can offer the best choices for Backbone books and leave the ball in your court.

First is a free book called Developing Backbone.js Applications by Addy Osmani. If you prefer print you can pay for a physical copy, but this book was released for free by O’Reilly on a page of Addy’s personal website.

The free open source content will always remain free, although you can support the author by purchasing a print version if you desire. Anyone who wants to learn Backbone without spending money should check out this book.

But there are many other books worth considering. Most of them offer print and eBook options depending on your preferences.

A great beginner’s book is Instant Backbone.js Application Development first published in July 2013. It’s made specifically for developers that want to learn Backbone through practice rather than theory. You’ll learn how to build an application and how to properly structure your BB code.

Alternatively you could check out the many books coming from Packt Publishing. Their writers teach in a linear fashion starting from beginner concepts and getting more advanced.

For example their introductory book Backbone.js Essentials is short(150 pgs) and cheap($12-$25) with all the core fundamentals you need. Personally I’d recommend doing free tutorials instead of this particular book, however the other publications are much more in-depth and useful.

Backbone.js Cookbook is invaluable to BB developers still getting their chops with real-world projects. You’ll get dozens of code snippets termed “recipes” for solving common problems like data syncing, routers, and working with companion libraries like MustacheJS, RequireJS, Zepto, etc.

A similar book titled Backbone.js Blueprints teaches with real-world projects. You’ll construct seven different projects from scratch learning various methodologies of Backbone along the way. I’d consider this more of an intermediate book, although quick learners could pick this up as a beginner.

Intermediate BB developers might enjoy Backbone Patterns and Best Practices. This is perfect for learning about BB components like modules, widgets, and template patterns.

Advanced Backbone devs will be salivating to get their teeth into juicer material. Thankfully Packt just released a new book titled Mastering Backbone.js with tons of tips, best practices, and pragmatic knowledge that can be applied to large-scale Backbone projects. This includes module organization, two-way data binding, and RESTful API development. If you’re really looking to up your BB game this book is worth the money.

Ruby on Rails developers might also consider the Thoughtbot e-book Backbone on Rails. The book is only available in digital form and comes with free source code available on a private GitHub repo.

For more advanced content you might also consider another book from O’Reilly: Full Stack Web Development with Backbone.js by Patrick Mulder. However this book does have mixed reviews and might not be the best place to start without some foreknowledge.

It’s certainly not a bad choice. But some reviewers feel that it lacks a certain completeness, or a certain angle that helps everything “click” in the mind of a Backbone developer.

While it’s definitely meant to be an intro to fullstack with tools like Yeoman and RESTful API development, there’s still a lot you’ll need to teach yourself after finishing this book and moving on to build your own fullstack Backbone webapp.

Anyone who wants to get into RESTful development should really consider Mastering Backbone instead.

Video Tutorials

Visual learners prefer to see how things work rather than read how they work. Online tutorials and books are always helpful. But when just getting started with something like Backbone it can be incredibly frustrating to go at it alone with words on a page.

Instead try following some of these free video tutorials. They’re all hosted on YouTube for free by developers who just want to educate others.

First is this BB tutorial made for beginners who want to build single-page webapps. It runs over an hour long but if you follow it through to the end you should gain a much better understanding of Backbone.

backbone js tutorial code screenshot

I like this video tutorial a bit more because it’s lively and offers a neat table of contents in the video description. This makes it easier to jump around without sitting through the full 50+ minutes(unless you want to).

Another alternative is this 10-part series of free BB videos spanning 2+ hours of introductory material. Worth watching if you’re a beginner who prefers a little hand-holding when getting started.

backbone youtube playlist

If you’re looking to build real detailed applications you’ll eventually want to branch into other technologies. For example this tutorial playlist teaches Backbone+MongoDB for creating a custom blogroll webapp.

There’s also a great 30-min tut for a custom directory app with features like search-as-you-type and custom filters for directory listings.

custom directory app backbonejs

As you get more advanced with Backbone you’ll need to challenge yourself with projects outside your comfort zone. Adding other technologies into your dev stack gives you a chance to merge Backbone into a real workflow and find what fits best for you.

The website BackboneRails has its own video tutorial series teaching webapp development on top of Backbone and Rails.

There are definitely other great videos on YouTube if you know where to look. Many devs only use Backbone for maintenance nowadays, but intro videos are still out there if you’re willing to search.

Conference Talks & Presentations

I consider conference videos more like educational television. Sometimes they’re useful, and sometimes their applicable, but they’re not always tutorials because they don’t always teach you how to build something.

Nevertheless these are great to watch if you want to hear professional BB devs share their thoughts both philosophically and pragmatically.

To get started I recommend this half-hour Intro to Backbone.js presentation by Sidney Maestre. He covers the absolute basics of Backbone and why it fits well in modern web development.

Equally as valuable is this talk given by Jeremy Ashkenas, the creator of Backbone.js. I think it’s fair to assume the creator of Backbone probably has great insight into how it works and why it can help your development workflow.

backbone creator jeremy ashkenas

Jeremy’s talk lasts for ~1 hour but it’s worth watching, especially if you’re just getting into BB development. He explains the different aspects of Backbone and how they work together in JS-heavy webapps to create methodologies and workflows that(ideally) simplify your codebase.

You’ll see examples with real code snippets so this can be a powerful introductory video.

Jeremy Ashkenas has another Backbone presentation from JSConf Uruguay. JSConf hosts many conferences and their videos are always top-notch.

Note that this particular video starts out in Spanish for some reason, but it’s just a quick bit. The entire talk is in English so if you’re concerned just skip a few minutes ahead.

live backbone presentation conference

If you’re still looking for a good reason to even use Backbone then I recommend Sid Maestre’s talk from HTML5DevConf. He’s like a tech evangelist portraying the best reasons to learn Backbone for project work.

The Backbone community even started its own conference which ran every year, but has recently dropped off the radar.

The most recent BackboneConf took place in 2014 and every single presentation from that conference was uploaded to a YouTube playlist for free.

Some of the videos may be overly-complex for beginners. But all of them feature incredible speakers with excellent content. If you’re serious about getting into Backbone that playlist is definitely worth bookmarking.

It’s tough making the time for presentation videos when you’re antsy to get started writing code. And honestly if you have the urge to dive right in then do it and get started!

Just keep in mind that people paid to attend these conferences, and you have access to the videos online for free.

And seriously there are a lot of these talks uploaded to YouTube. Far too many for me to write about individually.

So along with the previous talks I’ve highlighted, here are some others you might consider watching:

Premium Courses

With so much free content online it seems foolish to pay money for educational materials. But the old adage “you get what you pay for” is often right on the money.

Not all online lessons are created equal. Some may be closer to your budget or offer a better learning experience depending on your personal preferences. I’ve outlined the most popular Backbone.js premium courses but feel free to look around in Google to see if anything else works for you.

code school course backbonejs

People have varying opinions on Code School but I personally find their intro courses to be perfect for beginners. Anatomy of Backbone is a 2-3 hour course with seven different chapters.

  • Introduction
  • Models
  • Views
  • Models & Views
  • Collections
  • Collection Views
  • Router & History

The great thing about Code School is that you can signup for one premium account and get access to their entire library of material. So you’re not limited to this Backbone series—although it’s great if you actually want to learn Backbone.

And if you have any questions along the way you can chat with others in the Backbone.js course forums where you can ask questions or search previous posts for relevant answers.

backbonejs sitepoint premium course

SitePoint has a large premium section with video tutorials for developers. Their BB series titled Getting Started with Backbone.JS is somewhat recent and covers a lot for such a short period of time.

The total series runs ~3hrs and teaches practical advice regarding how to create an application on top of Backbone.js. You’ll learn the Handlebars.js templating engine and organizational techniques to separate your JS code based on models(data), views, and controllers.

It’s marked as an intermediate course but you may be able to pick it up as a complete beginner if you’re willing to Google answers to questions you don’t understand.

tutsplus backbone premium course

If you don’t know about Tuts+ let me be the first to introduce you to this fast-growing library of educational material. Most of their tutorials are free but Tuts+ does have a premium section for paid video courses.

Getting Started with Backbone is one such course and it’s a wonderful intro for beginners. This series does assume some knowledge of JavaScript and MVC methodologies, but you may be able to keep up and learn with a weaker foundation.

Every major Tuts+ premium course includes downloadable source code for each lesson. You can follow along in code while comparing your work to see if you did anything wrong.

Ruby devs can even move on from this beginner’s guide and jump into Backbone on Rails which is double the length and double the fun.

Pluralsight premium backbonejs learning

Pluralsight as a company is dedicated solely to premium content. Their courses are based on programming & IT which makes their Backbone Fundamentals course a great starting point for beginners.

The course has about 5 hours of video covering lots of intermediate topics like templating and connecting into a server.

The best thing about Pluralsight is the continually expanding library. They have quite a few related courses for Backbone developers that want to learn more than just the basics. Here are a few to check out:

One last premium alternative is the Udemy series Learn Backbone from Scratch. Udemy has very touch-and-go results where the content ultimately relies on the quality of the teacher.

backbonejs shiny logo udemy course

The benefit of this series is that it’s long. It runs over 5 hours with twelve different chapters/sections for study.

Naturally this is a premium series directed towards beginners but may still contain useful information to anyone that’s already started BB and just needs more direction. There’s a big focus on learning to build single-page web applications with Backbone as the structure. But you’ll also pick up pro dev techniques like code testing with Jasmine.js and modularization with Require.js.

These are the top premium video courses that I think are worth using. I certainly may have missed some, and if you know any that have helped you learn Backbone feel free to send a message and I’ll add it here.

Asking Questions

The learning process in web development is all about failing and figuring out why. Sometimes you’ll encounter problems that are so confusing that you’re unable to solve them yourself.

This is where online communities play a crucial role. I already linked to the Stack Overflow tag with Backbone.js questions, and I still recommend that as your #1 site for problem solving.

stack overflow backbone question

But aside from Stack where else can you go for support questions and debugging queries?

Unfortunately there aren’t many other populated online BB communities. There’s a Backbone Google Group but questions rarely get more than 2-3 replies.

Quora’s Backbone tag is another way to search for Backbone questions. Although Quora is a Q&A site like Stack Overflow, most questions are not technical in nature. So Quora is not likely to provide as much programming support as Stack.

The Reddit development community /r/webdev is heavily populated and highly trafficked by talented devs. Not everyone is a Backbone expert, but many have used the framework and may be willing to help you solve problems.

reddit r webdev community

Reddit has a specialized sub for /r/backbonejs but it’s almost a ghost town with an average of 3-5 posts per month and very few replies.

Aside from these options you’re only left with bulletin board forums. These forums were much more popular in the early-to-mid 2000s but have tapered off a lot since the rise of social media.

Two sites you might consider are the JavaScript forums on DevShed and WebDeveloper.

But at this time your best bet for free code help is posting a question on Stack Overflow.

Alternate Links

To make this compilation truly complete I want to include some other learning resources that don’t particularly fit with the other sections, but still deserve a mention in this article.

I’ll start by introducing Hackr.io. This is a curation site organized into learning tracks like Rails, Photoshop, and Backbone.js.

hackr io backbone curated tutorials

Their list of Backbone.js tutorials is user-curated and contains tags to help you sort between free and paid content, or videos and articles. At this time the list is short but it’s also open for submission if you stumble onto(or write) any quality BB tutorials.

I also found a cool jQuery mobile tutorial with full reliance on Backbone. It’s written by Ben Nolan and published on his personal blog.

The cool thing here is that Ben uploaded the final app to his site as a live demo for the tutorial. This way you can follow along, learn as you go, and compare your final result.

And if there are any Rails developers reading this post that want to connect RoR with BB I highly recommend James Yu’s three-part tutorial made for Backbone newbies.

Everything you’ll learn is based on the classic BB structure, the article originally being published in 2011. But it’s especially valuable for anyone that loves Rails and wants to try mixing RoR on the backend with BB on the frontend.

And to top it all off, here are a handful of articles and tutorials discussing more ideas on the workflow of Backbone.js applied to modern web development.

Optional Learning: MarionetteJS

Before wrapping up I feel obligated to briefly mention the beauty of Marionette.js.

It’s a free open source framework built on top of Backbone. It provides pre-built solutions for code architecture so you don’t need to do much high-level thinking with code management. You just write the code.

I’d like to do a separate post dedicated to MarionetteJS content, but I think it’s worth briefly mentioning some Marionette resources for Backbone developers.

marionettejs backbonejs logos

There’s a case to be made for using Marionette.js in large-scale BB projects. The goal is to simplify the architecture of BB with the many great features of Marionette:

  • Helps avoid memory leaks and empty views
  • Page object definitions to better manage the DOM
  • Common Marionette initializers which run pre-rendering
  • A view lifecycle for initialization, display, content updates, and termination

This is far from a complete list of features and you’ll find other blog posts discussing Marionette further in detail. It’s not really needed until you firmly understand how BB works and why Marionette can make it better.

One of the lead contributors Sam Saccone gave a talk about the making of Marionette. It doesn’t teach the inner workings but it provides some history and explains what Marionette aims to solve.

A much more detailed presentation is this talk by James Smith. He explains the differences between the distribution of code in Backbone vs Marionette, how they compare, and how to use Marionette in a real dev workflow.

james smith talk backbonejs custom

If you already feel confident with Backbone then Marionette is worth looking into.

There’s a beginners guide called Getting Started with Backbone Marionette written by Raymundo Armendariz in 2014. It teaches how Marionette improves Backbone’s existing structure and how you might alter your workflow accordingly.

There’s also the book Marionette.js: A Gentle Introduction written by David Sulc. It’s updated frequently with the most recent update being 1 month prior to the writing of this article.

David Suc has a few other Marionette.js books which you can see on his LeanPub page.

But free materials are the most preferred choices, and thanks to the Internet we have a seemingly endless stream of free articles & tutorials.

For some free material on Marionette.js check out these links:

Just remember that Marionette works best with knowledge of Backbone. I would not recommend jumping right into MarionetteJS without foundational Backbone knowledge.

So with that said, pick whatever suits your fancy and get busy slamming keys.

The best way to learn is through direct practice and by building things you want to build. Throughout the process you’ll make mistakes, learn, and grow as a developer.

If I’ve missed any quality Backbone content please feel free to contact the site and let me know. Over time I’ll try to amend this article to add links and other resources, hopefully making this post the ultimate collection of Backbone.js learning resources on the web.

Tags:

Author: Jaime Morrison

Jaime is a jr. designer interested in mobile UI/UX research and frontend web development with JavaScript frameworks. He covers general news and useful resources in the web design space.