Blog Archives

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.

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) {
    [score];
  } else {
    [score += 10];
  }
} else {
  [score];
}

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