A while back I wrote a post on how to use the Sass version of Twitter's Bootstrap toolkit in your Rails 3.1 app. You had to clone a repo and copy a bunch of files over, blah, blah, blah. That's so last week.

Now there's a new, much better way to include all the Sass and Bootstrap goodness. Here's how it works:

1) Add the bootstrap-sass gem from Thomas McDonald to your Gemfile like so

gem 'bootstrap-sass'

2) Update your bundle

3) Add this line to your application.css

*= require bootstrap

4) High-five yourself

That's all it takes and you're up and running with the Bootstrap styles. What's that you say? You want the Bootstrap JS libraries also? No problem. Just add them to your application.js like this

//= require bootstrap

Or if you want to pick and choose which JS to include, like this

//= require bootstrap-scrollspy
//= require bootstrap-modal
//= require bootstrap-dropdown

Very nice.

There's a couple of simple things you can do to really make your Rails 3.1 app more responsive...

1. Precompile your assets in your production environment. I think this pretty much goes without saying, but if for some reason you're not doing this, then you should be.
2. If you are precompiling your assets, make sure you turn on digests. Digests are the long alphanumeric strings that you'll sometime see appended to the end of an asset url. They intelligently cache your static assets since the digest will change if the asset is changed. Digests are turned on by default in the production environment, but if you have a staging environment, you may need to explicitly enable them.
3. Also, precompiling your assets is pointless if your web server isn't serving them up. With the default Passenger configuration, Apache will serve up static assets without a problem, but if your're running on Nginx it may not work out of the box. Recompiling Nginx with the gzip_static module may be necessary.

Doing these three things should dramatically reduce page load times and give your app a much snappier feel.

New features were developed, tests were passing, and everything was running great in the local dev environment.

Then I deployed to the staging server.

WTF? None of the image assets were displaying. The user-uploaded images on S3 were fine, but nothing under assets/images was rendering. It was midnight with a client demo the next morning. I was ready to pull my hair out.

I checked the logs. No errors. The server seemed to be serving up image assets w/o a problem. The logs lied and I knew better.

My first thought; this is what I get for saying I didn't understand people's complaints about the asset pipeline. My second thought; precompile. I rm'd the public/assets directory and ran the precompile rake task. No dice. Still no images.

The staging server was running on Bluebox, so I had hit them up in the support chat. We both poked around and tried a few things, but nothing was working. Then finally one of the support guys found it.

In the staging environment file, this line needed to be changed since we were using Nginx:

config.action_dispatch.x_sendfile_header = "X-Sendfile" # Use 'X-Accel-Redirect' for nginx

Once that was changed and the app was restarted, everything worked as expected.

I was working on a client app with a very js-heavy front end and I thought it would be a perfect opportunity to take a dive into Backbone.js. Unfortunately it didn't start off as smoothly as I had hoped and since Google was of minimal help while wrestling with these problems, I thought I'd document my troubles in hopes that I might help someone in a similar situation.

I started off following this tutorial by James Yu. I first downloaded backbone.js and included it in the app. Then I set up my directory structure under /app/assets/javascripts/backbone. Finally I copied the basic controller/model/views from the tutorial and tweaked them to work with an existing Rails controller in the app.

I then loaded the page in the browser and saw this in the js console:

Uncaught TypeError: Cannot call method 'extend' of undefined
    App.Views
    (anonymous function)
Uncaught TypeError: Cannot call method 'init' of undefined
    (anonymous function)
    jQuery.extend._Deferred.deferred.resolveWith
    jQuery.extend.ready
    DOMContentLoaded

I soon realized that I was missing underscore.js, a dependency of Backbone. So I downloaded it and added it to the app.

Reloading the page gave me another similar-yet-different error in the js console:

Uncaught TypeError: Cannot call method 'extend' of undefined
    (anonymous function)

It was referring to the following line in my backbone notes controller:

#app/assets/javascripts/backbone/controllers/notes.js
App.Controllers.Notes = Backbone.Controller.extend({

Backbone.Controller was undefined. WTF? This came directly from the sample code, so it should work. Right? I guess not.

A little Googling and browsing of the Backbone docs told me that I should change Backbone.Controller to Backbone.Router. Without digging through the Backbone repo history, I can only assume that this is due to an API change that hasn't been reflected in the tutorial. Once that was done, the error disappeared.

After that I spent some time fighting with the Rails Asset Pipeline and loading the Backbone files in the correct order. Unfortunately my attempt to reproduce and document those issues was unsuccessful. I think the problem was mostly due to me explicitly requiring the Backbone files, but in the wrong order. For some reason I just don't like using require_tree on the root js directory, but whatever, it seems to work fine in this case.

Here's what my js directory ultimately looked like:

|~app/
| |~assets/
| | |+images/
| | |~javascripts/
| | | |~backbone/
| | | | |~controllers/
| | | | | `-notes.js
| | | | |~models/
| | | | | `-note.js
| | | | |~views/
| | | | | `-index.js
| | | | `-application.js
| | | |-application.js
| | | |-backbone.js
| | | |-underscore.js

And here's my application.js:

//= require jquery
//= require underscore-min.js
//= require backbone.js
//= require_tree .

Pretty simple.

I started this blog post expecting to document my troubles with the Asset Pipeline, but in the end there didn't seem to be any. It was late, maybe I was tired. Who knows? What I do know is that when I was searching for info on using Backbone with the Asset Pipeline, I didn't find much.

Next I'm planning to expand my views and introduce some sort of templating library. Keep an eye out for another post around that...