Yet Another Backbone.js Tutorial – Part 1 – Backbone.js Philosophy

A couple of house keeping notes

It’s been a while since our last post.  Gabe’s been hard at work in Australia, hacking on a number of things.  Rebecca & Brad have large, awesome projects in the works.  Meanwhile  I’ve switched jobs a couple of times :).  All the while, we’ve been coding like mad and learning a ton of interesting things.  While I can’t promise that we’ll “turn the posting faucet back on”, I can say that we’ll try to reduce the big draughts.  Now then, on to the show!

Backbone.js Philosophy (as I see it)

I’ve been getting pretty friendly with Backbone.js lately.  This 2-part post will teach you some backbone basics & show you how to create your own backbone.js app with multiple routes.

Before we begin, take a look at some of these other tutorials to get a sense of what we’re about to do.  I learned a LOT from them:

The most important thing to understand about a Backbone.js app is the separations of concerns.  Each of the parts below can do even more than what I’m describing, but here’s the minimum of what you need to know about them.

Models and Collections (an array of models)

  • knows how to speak to the data source (both restful resources and api calls).
  • can parse data before handed responses off to a view.

Views

  • knows how to display your models and collections.  You define the markup rules in the render method
  • handles events (clicks, changes to markup, changes to models) and changes the markup appropriately.
  • can initialize your js plugins that should be attached to markup.

Gabe had this to say about views:

“I see two ways to use backbone views:

1. A view can be bound directly to a model or collection.  Whenever that model/collection changes, the view would re-call it’s render method and redraw itself. In essence, the view’s job is to represent a model’s state in the DOM now.  Also keep in mind that the model doesn’t have to be something bound to your db.

2. A view can be more of a stateful widget that remembers some of its own state.  In this widget style, the view would keep track of some state and maybe decide what parts of itself it should show/hide depending on its state.

In conclusion, the two view philosophies are very similar:

- one is more modular
- one is more monolithic

The view can be an island OR it can be obsessed with something.

Thanks Gabe! :)

Controllers/Router

  • handle all of your ‘#’ routes.
  • the app is started by creating a new instance of this class.
  • your app only needs 1 controller/router

[5/7/2011 : Amendment]  A quick word about markup

In a Backbone app you’ll have markup that lives on your page (index.html) & markup that you’ll need to generate as new elements are added (This will become clearer when you see our tutorial app in action in the next post).  While Backbone gives you view.make() to create markup, you’ll want to use a templating library to help you out with more complicated stuff.  A fellow KAL member recently how I draw the line between what markup lives on the page and what markup lives in a template.

My Rule: If the markup has an ID, then it should live on the page.  By maintaing this idea, you can create your page layout in it’s empty state.  The Views that you create will attach to ID’ed elements to dynamically fill/update them as events occur.  Also, with Backbone, you don’t need to have markup that contain the object’s ID (“foo_1″, “foo_2″, “foo_3″, etc).  The object is bound to the markup (if you do it correctly) which removes the need to parse it out of the ID in the markup (or other well known chicanery that we’ve all done at one point or another :) ).  It’s often better to have your template markup use the ‘class’ attribute declaration since they’re best used when you’re representing models in a collection.  This also fits with the W3C’s HTML spec which says that an ID/Name “must be unique in a document“.

Consider my rule when constructing a table (the tutorial app will do this):  The table’s markup lives on the page with an ID (id=”MoviesTable”) without any rows.  We’ll generate/update the rows (class=”movie”) of the table on the fly via a template fueled by my View’s Collection.  The Collection is filled by the response from our movie API.

That’s a lot to digest

Stay tuned for Part 2 where we’ll build our app, “Comment on the Movies”.

Share
This entry was posted in Javascript and tagged , , , . Bookmark the permalink.

10 Responses to Yet Another Backbone.js Tutorial – Part 1 – Backbone.js Philosophy

  1. Thanks for the kind words!

    One correction I would make to Gabe’s, though, is this: you can mix views. Some views are obsessed with things, and some views are just organizational tools for other views, and some views are obsessed with things *and* keep some internal machinery for showing/hiding parts of those things as demanded by the user experience.

    I’ve been meaning to update my tutorial; I’ve learned a lot developing backbone apps professionally, and TheBackboneStore looks primitive to my experienced eye these days. But working for a startup and having two teenagers eats all my discretionary time…

  2. abel says:

    Hey Elf,

    Thanks for checking out the blog and chiming in. Your comment is definitely true, but for newbies approaching Backbone.js it’s easier to deal with them separately. Well, at least it was for me when Gabe gave me his thoughts.

    Also, even though your post is primitive by your current standards, it was SUPER helpful as I started putting together my proof of concept & my final product.

    Good luck with your with your startup and your kids, man. I’ll make sure to ping you when I complete ‘Part 2′. :)

  3. Oliverox says:

    Did you complete part 2?

  4. abel says:

    Hey Oliverox,

    Sorry for the lag on Part 2, but I’ve been insanely busy. Since I wrote Part 1…

    I got married.
    I’ve had to kick myself into overdrive to makeup for my time away from work.
    July 1st, Backbone got an major update (from 0.3.3 to 0.5.0!) that requires adjusting the tutorial app.

    Things are calming down a bit for me & I’m tweaking Part 2 to highlight what’s new in version 0.5.3. Rest assured, Part 2 is coming. :)

  5. DjebbZ says:

    Thank you for this helpful tutorial. I hope you had good holidays, so you now have time and energy to write the second part !

  6. Pingback: Yet Another Backbone.js Tutorial – Part 2 – Filling the index view | Kickass Labs

  7. Pingback: Quick Hits: Where’s my Backbone.js Tutorial? | Kickass Labs

  8. Houston says:

    I’ve been browsing online more than 2 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all web owners and bloggers made good content as you did, the internet will be much more useful than ever before.

  9. eremy West says:

    I’m a fairly experienced c# developer in website context and SPA didn’t compute until I studied and customized Elfs backbone store. It’s a great place to start.

  10. Great items from you, man. I’ve be aware your stuff previous
    to and you are simply extremely excellent. I actually like what you’ve
    got right here, really like wat you’re saying and the
    way in which through which you are saying it. You make it enjoyable and
    you continue to take care of to keep it sensible. I cant wait to read far more from you.
    That is really a great web site.

Comments are closed.