Yet Another Backbone.js Tutorial – Part 2 – Pre-Reqs & The Spec

Please checkout Part 1 where I explain the philosophy behind Backbone.js

It’s time to build our Backbone.js app, “Comment on the Movies”.  This tutorial will, ideally, give you something interesting to build.  Take a look at the finished app (so far) on Heroku & feel free to pull it from GitHub.  In addition, I’ve updated the code to use Backbone.js 0.5.3, Underscore 1.2.2, Mustache 0.3 & jQuery 1.7.1.  Let’s do this!

*Before we get started, check out one more resource: Charlie Robbins (Co-Founder of Nodejitsu) wrote an awesome article about Scaling Isomorphic Javascript Code.  In the writeup, he describes popular methodologies in retrieving data and presenting it to the user.  It’s a great read.  The image below from that article:

Backbone.js interactions: Model-View-ViewModel

Prerequisites:  Rotten Tomatoes API Account, Ruby, Sinatra, & Haml

Rotten Tomatoes API Account

The app we’re writing is called “Comment On The Movies”.  The RottenTomatoes API is full of well formed data (which is more than I can say about the New York Times movie api calls).  Real data is always more interesting than building dummy datasets ourselves.

The Rotten Tomatoes API registration is free, quick & painless.  Get your api_key & come back to this tutorial.

We’ll also be using the R.T. assets.  R.T. makes their images available to developers to use in their apps and we’ll be taking advantage.

Ruby (Project Site)

Realistically, if you’re reading this webpage, you probably already have it installed (even if you don’t use it) :D.  I chose Ruby here because I 9-5 in Ruby and I really enjoy it.  You can use ANY server side scripting language here (PHP, Asp.NET, JSP), but you need to use something. You don’t want to simply expose your R.T. API App Key to the world.  By using a server side language, you can create a proxy page that protects your API App Key.  Here’s how this app will work:

  1. Your Backbone app makes an AJAX call with R.T. API parameters to the proxy page
  2. The proxy page appends your API_KEY & makes the call to a R.T. servers
  3. The proxy page receives the response and returns it to your Backbone app
  4. The Backbone app updates it’s UI.

Sinatra (Project Site)

Since we only need an index page and a proxy, Sinatra is a perfect option here.  A full Rails app would be WAY too much.

Haml (Project Site)

I enjoy haml.  It’s really easy to create markup with it.

The “Comment on the Movies” Spec

Here’s what the app needs to accomplish:
**Items in orange will be implemented in future tutorial posts**

  • Users should be able to switch between the various lists of R.T. data:
    • Box Office (default view on page load)
    • In Theaters
    • Opening
    • Upcoming
  • The “Movies Table” should display:
    • Title
    • Year
    • MPAA Rating (R, PG-13, etc)
    • Runtime
    • Release Date (default sort)
    • Critic’s Score
      • If it’s ‘certified fresh’ that should be indicated.
    • Number of comments
  • Clicking on a table column title should sort the current set of movies in the table.
  • Clicking on a movie’s row should take you to a “detailed” view of the film.  The “detailed” view should display:
    • Links [all links that lead us away from the site should open in a new window] to…
      • Showtimes
      • Awards (if any)
      • Trailers
      • Abridged Cast
      • IMDB records
  • Comments
    • Add a new comment
    • Edit an existing comment
    • Delete a comment
    • Require that the review indicates if the comment is BEFORE or AFTER you’ve seen the movie
    • Comments should persists across browser restarts
  • The app needs to be crawl-able by Google.
  • It needs to be well tested

Make your Backbone App Google Crawl-able via hashbang URLs

Hashbanging (/#!) your URLs let’s the Google crawling bot know that there’s AJAXed content on this page.  Fortunately, it’s really easy in Backbone.js as you can see in the live demo

In The Next Post…

I’ll explain how I implemented the app thus far.  That’ll include the filling the index view & the hashbang technique mentioned above.

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

3 Responses to Yet Another Backbone.js Tutorial – Part 2 – Pre-Reqs & The Spec

  1. Matthew says:

    These have been great so far, keep them coming. I’m getting quite excited about learning Backbone and this seems to have great potential to help. Thanks.

  2. abel says:

    I’m glad this helps, Matthew. I’m going to do my best to get the explanation up quickly (hopefully this weekend) & start diving into new parts of the spec soon 🙂

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

Comments are closed.