Hands-on Backbone.js Screencasts

I’ve been talking about this for what seems like an eternity in Internet time: earlier this week my 4 part screencast series on Backbone.js was released through PragProg! It’s a hands-on, no-fluff walk through of all the major parts of Backbone, building an application with a good structure, handling some common error scenarios, and much much more. 

From the PragProg site:

With a nearly endless stream of success stories, blog posts, add-ons and frameworks built on top of Backbone.js, you don’t need another set of marketing materials to tell you why you should be working with Backbone.js. What you need is a way to get started quickly – to get up to speed with Backbone’s components, learning how to orchestrate them to create rich, interactive applications in a browser. This series of screencasts from Backbone.js expert Derick Bailey, will teach you what you need to know in a straight-to-the-point, hands-on way to building single page applications for today’s modern web.

Backbone.js is a hot topic these days, and with good reason. It powers some of the web’s most well-known applications including the LinkedIn mobile app, the Wal-Mart mobile app, rdio’s music player for both the web and their desktop clients, the Disqus commenting widget and much, much more. This little library of simple abstractions has helped to create a new generation of interactive and rich applications for the web, and it’s time for you to learn it.

But this isn’t marketing material to try and sell you on why you should use Backbone instead of Ember, Angular, Batman (yes, there’s a JavaScript MVC framework called Batman) or anything else. This is a hands-on, down and dirty, straight-to-the point walkthrough of all of the core components of Backbone. It will show you the fundamentals of creating single page applications in one of today’s most powerful JavaScript libraries. It will get you up to speed on how to use all of the components of Backbone, alongside your own JavaScript code, to create a rich and interactive image gallery application. And it will show you many of the common pitfalls and errors that you’ll run into, and how to avoid and correct for those problems.


In this 4 part screencast series, Backbone.js expert Derick Bailey will walk you through a hands-on introduction to building an image gallery application with Backbone, from the ground up. You’ll learn how to take an existing HTML form and jQuery code base, and migrate that into a Backbone view. You’ll use models and collections to store the image information entered into the form, and display a list of images to choose from and view. You’ll build an image viewer from a list, and see how to take advantage of the browser’s forward and back buttons with routers. Server persistence of image data will let the application reload from where the user left off, and common error scenarios will be handled.

Head over to the PragProg site to see a 3 minute preview, or to buy the episodes.

Additional Resources

One thing to note about this series – I make some assumptions about what the viewer should know about JavaScript in general. Things like context, variable scoping, and more, are important to understand when building Backbone apps. I briefly cover some of these topics, but there’s only so much room for so much information. If you’re interested in learning more about the basics of Backbone, getting in introduction to writing test-driven JavaScript, or seeing some of the tools I use in more detail, check out my other screencasts at WatchMeCode.net.

If you’re looking for more information on Backbone specifically, additional screencasts (some free, some paid), books, blog posts, add-ons and frameworks, check out my list of Backbone resources at BackboneTraining.net/resources.


Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Derick Bailey

Derick Bailey is an entrepreneur, problem solver (and creator? :P ), software developer, screecaster, writer, blogger, speaker and technology leader in central Texas (north of Austin). He runs SignalLeaf.com - the amazingly awesome podcast audio hosting service that everyone should be using, and WatchMeCode.net where he throws down the JavaScript gauntlets to get you up to speed. He has been a professional software developer since the late 90's, and has been writing code since the late 80's. Find me on twitter: @derickbailey, @mutedsolutions, @backbonejsclass Find me on the web: SignalLeaf, WatchMeCode, Kendo UI blog, MarionetteJS, My Github profile, On Google+.
This entry was posted in Backbone, Javascript, Screencast, WatchMeCode. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • rogah

    Hi Derick, I’m struggling on how to get the best way to implement a filter criteria as the iTunes “New Smart Playlist…” feature using BackboneJS. The issue basically regards the need to implement some sort of tree hierarchy with criterias and collections, plus how to manage nested hierarchy views and events context. Would you have suggestions or any directions to provide? Any help will be very much appreciated.

    • http://mutedsolutions.com Derick Bailey

      i’m not familiar with the feature you’re referring to (i haven’t used itunes in a few years). your best bet would be to ask on either StackOverflow.com or on the Backbone mailing list.

      • rogah

        Thanks for answering so fast! I’ll post it on StackOveflow.com for sure.

  • Vlad

    Derick, do you happen to have a blog post about Marionette.Async ?