Blog Archives

A One-Day Sprint with Backbone.js – Backbone Solitaire

Today we took a break from the regularly scheduled sprints. The idea was to focus on a topic you wanted to spend more time with, and to come up with an app idea you could implement quickly. This was a good exercise in project management, along with testing how much of a skill you could put into an app on your own.

I decided to build a simple solitaire game using the Backbone.js MVC framework I talk about in my Hack Reactor Week 3 blog post, along with CoffeeScript. I already had working deck-shuffling code that I could use from the blackjack game we built, so I figured it wouldn’t take too long to translate that into a new card game. I was definitely mistaken about this.

I started the project with a whiteboard session to draw up the game layout and initial deal of all the cards. This would help break up the app into smaller chunks that could be translated in the different models and views. I then sketched out all of the individual modules and organized them into their Backbone components. I ended up creating the following models and collections: Card, Deck, Column, GameBoard, and Game. I also created corresponding views for each of these modules.


Rough styling of my solitaire views. Only the column and deck models have live data at this time.


Building a Backbone app from scratch was the biggest challenge of my day today. Laying out all of these models, collections, and views, and then making sure they can all talk to each other took much longer than I anticipated. Backbone takes a pretty big commitment of code before you can start to see your data rendered to the screen. I also spend lots of time in the Chrome JavaScript console to make sure all of my model data was in the correct place for each object.

After spending too much time diving into the details of Backbone, CJ came over to my workstation to see how things were coming along. I didn’t have much on the screen at this point, so he advised me to focus on the most simple task I could and completely get that model and view completed as my first deliverable. I decided to focus on the initial deal of the 28 cards in the main game board. This required focusing further on each individual column, and building a column model to grab the corresponding cards from the deck collection. I made some good progress once I was focused on this particular module.

Before I knew it, everyone was leaving for dinner break and I had just moved on to building the view for the 24 remaining cards in the deck after the initial board setup. This is when I realized that the project was going to take me quite a bit more time to complete, and I had been too ambitious in my project planning from the start. I should have chosen a much simpler concept, rather than a card game with complicated logic and drag-and-drop functionality. I will definitely remember this lesson when it comes to planning future projects.

My main takeaways from today:

  • Focus on the most simple version of a project.
  • A first build of an app is best accomplished by removing all features
  • Focus on small deliverables so you always have working code to commit every few hours or every day

Today was the first time we had been released on our own, to create a project from scratch. I was pleased with what I learned about Backbone.js, but I need to be less ambitious with my one-day goals at this point in my career. Hopefully I can find some time to work on this project more in the future!

I pushed my initial code to GitHub if you want to check it out, but it is most definitely a work in progress.

Read more

Backbone and CoffeeScript: Hack Reactor Week 3 in Review

On my day off this week, I decided to bike the Golden Gate bridge over to Sausalito. The views were incredible:


Time is really flying by now, and the weeks at Hack Reactor are starting to blur together. Week 3 was primarily focused on MVC (model-view-controller) architecture, and how to use Backbone.js to organize your application. MVC is used to separate different parts of your code into logical modules, and then to define how those models can interact with one another.

When laying out your code, the model consists of all of your data, along with the functions and logic used to control and manipulate that data. The view consists of the code used to display the model data on the screen. The controller is what handles user inputs, and it relays those inputs back to the model.

Backbone.js is a JavaScript framework that is used for developing single-page web applications. It is based on some components of MVC architecture, but substitutes a presenter for the controller. In Backbone, the Model class usually represents a single instance of an object. These models are then organized into Collections, where further logic can be applied to the entire group. View classes are used to display the data from the models on the screen, and View can also be organized into View Collections.

Our first dive into using Backbone was to create a simple browser music player called MyTunes. Unfortunately (fortunately for some?) the only mp3′s we were provided were old Aaliyah songs. The parameters were to have a library view of all available songs, and a playlist for organizing and playing these songs. Each song had its own Backbone Model class, and songs were grouped together into Model Collections.

The song models had events attached to them, which would trigger specific behaviors like “play”, “enqueue” in a playlist, “end of song” and so on. Each one of these triggered events would change the model data, and our views would listen for these changes, then update the display and music player function accordingly.

Once we were satisfied with the behavior and styling of our music player, we ventured into experimenting with the Backbone Router class. This allows your single-page app to have unique URLs for specific user navigation points, and also to allow the use of browser navigation controls like the Back button. We decided to give each song it’s own unique URL, which allows you to navigate to a specific song very quickly. I’ll definitely be using the Router extensively in future projects.


Only the Best, Only Aaliyah – ummm yeah…

The next Backbone project was designed to explore this framework further with a more complicated project that required deeper nesting of models and views, and more event listeners. Our task was to design an in-browser blackjack game using Backbone and CoffeeScript. We were all just starting to get familiar with the basics of Backbone, and now we had to write all of our code using this new language called CoffeScript that compiles down to JavaScript. The pace of learning is relentless at Hack Reactor!

My first hour with CoffeeScript was filled with a lot of “why are we using this” and “I will never use this again in the future”. CoffeScript is just JavaScript, but with a much more concise syntax that resembles something like Ruby or Python. There seems to be lots of controversy surrounding CoffeScript online. Some developers won’t use it, while others are strongly in favor of it, and this is a good example of the main points from both sides of the debate.

After two solid days of using CoffeScript, where do I stand? I have to say that I warmed up to it and after about 3-4 hours of working with the compiler, I began to prefer writing using its “syntactical sugar”. In fact, during our end of week assessment, I found myself writing in CoffeeScript by accident in a section where it wasn’t required!

Here is a sample of some CoffeeScript, and what the identical, compiled JavaScript looks like:

//This is the CoffeScript, just 5 lines!
if hasAce
      newScore = [score, score + 10]
      if @isDealer and @models[0].attributes.value == 1 then return [score]
      if newScore[1] > 21 then [score] else [score += 10]
    else [score]

//This is the compiled JS at 14 lines, with lots of brackets
var newScore;
if (hasAce) {
  newScore = [score, score + 10];
  if (this.isDealer && this.models[0].attributes.value === 1) {
    return [score];
  if (newScore[1] > 21) {
  } else {
    [score += 10];
} else {

How to get your computer set up to write in CoffeeScript
Interested in trying CoffeScript? I would suggest playing around with the Try CoffeScript tab on the .org website.

Once you have spent a few minutes there, go ahead and install CoffeScript on your machine. Step two is to get your text editor set up for CoffeScript syntax highlighting. Then, you can start compiling the .coffee files into .js files that your browser can read. You need to simply run this line of code from your terminal to start the compiler and continually update the compiled .js files as you edit your code:
coffee --output compiled --map --watch --compile .

My blackjack project is still a work in progress, but the basic functionality is all completed. The biggest challenge was to handle aces (1 or 11 depending on the situation), along with handling a dealer natural blackjack on the first two cards without revealing the dealer’s down card. My next steps are to implement more advanced features like splitting and re-splitting, doubling down, along with jQuery animations and styling.

We wrapped up the week with an intro to Node.js, which I will go into in further detail next week. We then took a Hack Reactor field trip to play laser tag out in Concord, which was a great way to end the week.

Read more