Tad Thorley

Simple SpineJS and Ruby on Rails Integration

I’ve recently been learning an MVC javascript framework called Spine. It is similar to backbone (hence the name), but I’ve found it to be a bit more rails friendly and closer to what I’m familiar with. The source is also written in coffeescript, which I think has a better syntax.

What’s the first step when learning something new? “Hello World!” of course! I’ll take you step by step through a simple application using Rails and Spine. The source code is on github.

First, create your rails (3.1) application:

rails new hello-spine

Next you’ll want to download spine.js and copy the lib directory into vendor/assets/javascripts/spine of your new rails application (the directories won’t exist, you’ll have to create them).

Now you’ll need to configure Rails to use Spine. Edit the application.js file in app/assets/javascripts to include a line to require spine (spine.js in the spine directory). I love coffeescript, so I renamed the file to application.js.coffee and this is what it should look like:

#= require jquery
#= require jquery_ujs
#= require spine/spine
#= require_tree .

Rails needs to supply the basic HTML that Spine hooks into, so you’ll need to generate a controller for it

rails generate controller Hello index

and set it as the root route. Your config/routes.rb file should look like this:

HelloSpine::Application.routes.draw do
  get "hello/index"
  root :to => "hello#index"
end

Now for the Spine part. Because this is so simple, there are no views or templates; there is no routing logic. The only logic you’ll need is a Spine.Controller that you can put straight in to your application.js.coffee file (for more complex applications you’d want to separate controllers, models, and views into separate directories and include them from there). The first step is to create your new class and expose it by assigning it to the javascript “window” object. Your file should look like this:

#= require jquery
#= require jquery_ujs
#= require spine/spine
#= require_self
#= require_tree .

class App extends Spine.Controller
  constructor: ->
    super


window.App = App

Note also the “require_self” line right after requiring spine.

Next edit views/hello/index.html.erb to provide a div for your Spine app to work with. Followed by some javascript to create your Spine app and pass it the div as it’s base DOM element. Your file could look something like this:

<div id="hello"></div>

<script type="text/javascript" charset="utf-8">
  jQuery(function() { 
    new App({el: $("#hello")});
  });
</script>

The last step is to have your controller append the greeting to it’s base element. The addition of one more line to application.js.coffee should do it:

...

class App extends Spine.Controller
  constructor: ->
    super
    @append("<p>Hello from Spine!</p>")

...

Start up your rails app to see the message:

rails server

So what’s the next step? Alex MacCaw, the author of Spine has done a great series of screencasts and the spine gem for rails makes it easy to use spine with rails.

Apple’s Three Laws of Developers

yourhead:

1. A developer may not injure Apple or, through inaction, allow Apple to come to harm.
2. A developer must obey any orders given to it by Apple, except where such orders would conflict with the First Law.
3. A developer must protect its own existence as long as such protection does not conflict with the First or Second Law.

— I. Developer

RT @blowmage: Having a hard time thinking of something more coupled than rails’ database rake tasks. http://bit.ly/hP6Sb6

Filling up the tub for my son to take a bath and ask him to check the water level for me. He returns: “it’s still loading” #geekparenting