Sinatra, CoffeeScript, and Haml: swinging in 4 steps

I recently decided to ditch plain old JavaScript in a Sinatra [1] based application in favor of CoffeeScript [2]. The existing JavaScript wasn’t terribly complex; however, I was looking at having to add some AJAX based long polling and I couldn’t bring myself to do it in JavaScript [3]. Accordingly, I decided I’d use CoffeeScript [4], but, as it turns out, there were a few steps I had to put in place before I could enjoy some significant whitespace delimitation.

First, I installed Barista [5], which is a nifty Ruby gem that adds transparent CoffeeScript support to any Rack app. There were a few other gems available, however, I decided that Barista had the most mature documentation and the project still showed signs of life.

Once I added the Barista gem to my Gemfile and ran Bundler [6], I next had to require Barista in my Sinatra app; moreover, I had to register the Barista extension via Sinatra.register Barista::Integration::Sinatra. Note, that these steps need to be done after Haml [7] is loaded.

In order for Barista to work properly, you’ll need to have a JavaScript runtime handy – there are a number of options here, including therubyracer [8]; however, after a bit of research, I found some concerning notes regarding therubyracer’s memory consumption [9]. After a bit of surfing, I happened upon ExecJS [10], which states that Node will work just fine. Yeah!

Accordingly, since this application runs on Ubuntu, I got to use a nifty script that I happened to have written about a year ago: Ubuntu Equip [11]. In less than a minute, I had the latest and greatest version of Node running by running the command:

1

wget --no-check-certificate https://github.com/aglover/ubuntu-equip/raw/master/equip_node.sh [12] && bash equip_node.sh

Take note: this script sets a custom apt-get [13] repository; otherwise, if you don’t add this repository, you’ll end up with an ancient version of Node.

Finally, to actually start coding in CoffeeScript, all you have to do is use Haml’s handy inline :coffeescript filter:

1
2
3
4

:coffeescript
  $(document).ready ->
    opts = { lines: 13, ...}
    spinner = new Spinner(opts).spin(document.getElementById('spinner'))

That’s it! The steps required to get Sinatra, CoffeeScript, and Haml playing together are:

• Install Barista
• Configure Sinatra
• Install a JavaScript runtime engine
• Write some CoffeeScript

In short, Barista and Node [14] make Sinatra swing with CoffeeScript.