Resources For, And How I Learned Backbone.js

I received an email from Mark Muskardin, today, asking me some questions centered around how I ramped up and learned backbone, and looking for some good resources, too. I’ve had similar questions a number of times in recent weeks, so with Mark’s permission, I’m posting his questions and my answers here.

Update: I’ve put together a more complete list of resources on my BackboneTraining.net site, and will keep that page up to date. Be sure to check that list for more links and additional resources.

1) How did you ramp up on Backbone?

Mostly trial and error, honestly. I would try something to see if it worked or not and dig into the Backbone source code to find out why it didn’t in most cases. I also spent a lot of time looking at the example backbone code I could find in blog posts, in the documentation, etc.

In the end, though, it was really the throw-away applications I built that had the most impact for me. I would spend a few hours a night thinking about another way to approach a specific scenario in backbone, and try it out. In the process of doing this and exploring the different aspects of backbone, I learned a lot about how it works and how i like to work with it. (FWIW: I think this pretty well describe my learning style)

I also have a strong background in building windows applications with a model-view-presenter structure, in a composite application style. Backbone fits easily into my prior experience in this realm, so a lot of what i have been trying out and learning is stuff that i knew how to do previously, just putting it in to play in a different language and runtime. I think this gave me a pretty good advantage in terms of “things to try” in my throw-away apps.

Lastly – I started spending time keeping up with the Backbone mailing list, and the Backbone questions on StackOverflow. Try to answer questions, and seeing the answers that others provide has helped me a lot. Not knowing an answer often leads me to dig deeper into something in order to learn, so that I can answer, too.

2) Are they are any tutorials you’d recommend?

I tend to prefer tutorials that not only tell you what and how, but also why. So it shouldn’t be a surprise that I’m listing a handful of screencasts that I thought were tremendously informative. Every one of them has taught me a number of little details and/or given me a few ideas to try out.

(in no particular order)

(Note: i’m also working on a very extensive screencast, but it won’t be available until probably late this year or early next year…)

There’s also the thoughtbook book: http://workshops.thoughtbot.com/backbone-js-on-rails. It’s a work in progress, but it’s worth keeping up with the progress. They’re doing a really cool thing with community involvement. I’ve been reviewing the book from time to time and offering suggestions for how to improve the book, now and then – as have a number of other people who have pre-purchased the book. There’s a lot of value in the book already, but it’s still in it’s early stages with much of it not being started yet.

Other than the screencasts and book, there’s a wealth of good backbone knowledge in blog posts, on the mailing list, and in the example apps in the documentation. Search around and keep your eyes open as new information is continuously popping up.

3) How do you test your Backbone apps?

For integration tests with the rest of my system, I use Cucumber. Most of the testing I’ve done with Backbone has been through Cucumber since I already have that in my Rails application. I set the tests to use the Selenium driver and run them as part of my normal Cucumber suite.

For unit testing (which I’ve been doing more of, recently) I use Jasmine and the Jasmine-jQuery plugin. My previous blog post addresses this, specifically to get my views under test with my view templates in place. (I’m considering writing a small series and/or e-book on testing backbone, though this is also covered in my screencast, so i may not be able to write an entire e-book on it any time soon.)

4) I saw that your created a Backbone plugin.  Does Backbone have a similar plugin/gem ecosystem that jQuery/Rails has?  How can I get started?

While it’s not as extensive as jquery or rails, there is a growing backbone plugin ecosystem. There’s also no automatic installation or package management like gems (or npm for node.js) or anything like that. Mostly, people just list their plugin in the backbone wiki, talk about it on their blog and on the backbone mailing list, too.

Before you start, you’ll need to understand object oriented javascript, if you don’t already. For this, I highly recommend the book “Javascript Patterns” by Stoyan Stefanov. Once you’ve got an understanding of how OOJS works, it becomes pretty easy to see how to extend backbone with your own code.

The real question, then, is not “how” but “what” or “why”… the two plugins i’ve written were built out of my own needs and desires to stop writing the same code over and over again. Backbone.ModelBinding is a collection of the patterns I was using for binding models to view elements, and grew from there. Backbone.Memento started as a quick hack to enable a cancel button on an edit form that I had, turned into a full memento pattern implementation, and started growing from there.

So, to get started… identify the common patterns in your own code, first. Extract those into something that a single project can use immediately. Then build and grow from there, as you see similar needs and variations in more and more projects.

Practice, Practice, Practice

The most important thing to take away from this, is that you won’t improve or really learn anything until you do it yourself. It’s great to talk theory all day long (and I love doing that), but without the experience that comes from practice – the art of doing for the sake of learning – it’s just an unproven theory. Get your hands dirty with some throw-away projects, see what works and what doesn’t, and begin to develop your own subtle and nuanced opinions and patterns based on this experience.


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, Education, Javascript, Test Automation, Unit Testing. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://hopelessart.com Pascal Precht

    Really nice article. Thanks!

  • Anonymous

    Thanks – useful! BTW this link (which is the one I wanted most :-) is a github 404: http://joeybeninghove.com/2011/08/16/backbone-screencast-introduction-views/

    • http://mutedsolutions.com Derick Bailey

      doh! thanks for the headsup on that broken link. fixed in the post. here’s the right one: http://joeybeninghove.com/2011/08/15/backbone-screencast-introduction-views/

      • Anonymous

        thanks for the quick response!

        BTW if it helps anyone, another heads-up for these backbone tutorials is the load order of the js files (caught me out first time): jquery, underscore, backbone, yourapp

  • http://joeybeninghove.com joey beninghove

    Sorry guys, the original link to the Backbone.js screencast has been restored: http://joeybeninghove.com/2011/08/16/backbone-screencast-introduction-views

    Sorry again for the confusion.

  • http://www.tinnedfruit.com Jim Newbery

    I found I really learned the most when I started testing my Backbone apps. I wrote a series of articles on unit testing Backbone with Jasmine and Sinon.JS which you might find useful.

  • Kaha

    Hey Derick, thank you for your articles. I was searching for some backbone tips, and I found this article which was written recently. Did you see it http://backbonetutorials.com/organizing-backbone-using-modules/ . Idea looks interesting :)

  • Vikikamath

    nice!

  • http://twitter.com/ggauravr Gaurav Ramesh

    comprehensive set of resources. Thanks .

  • TechNet

    This is what I wrote, in detail tutorial Backbone.js using coffeescript
    http://technetlk.blogspot.com.au/2012/09/laravel-backbonejs-coffeescript.html