Girl with Computer

I’ve mentioned before that I’m a bit of a Sinatra (http://sinatrarb.com) fan. Recently, at the Interlock hackerspace, I’ve been learning javascript from a friend/mentor. We’ve talked about the best ways to teach programming, and decided a fun way to start would be with javascript games. I really enjoy javascript so far. We started off using a text editor (gedit) and browser (firefox) to develop a simple tic tac toe game. This was a good way to start. As soon as I went home for the night, I (switched to vim, initialized a git repo), moved the app over to Sinatra, and deployed with Heroku. My restructuring took about 5 minutes, deployment took 5 seconds. Here is what I did.

Restructuring the Application

Initially, I had a directory which included a .js, .html, and .css file. To restructure my app for Sinatra, I changed my ~/projects/tictactoe directory to look like this:

|– config.ru
|– public
| |– css
| | `– style.css
| `– js
| |– tictactoe.js
|– tictactoe.rb
`– views
`– layout.erb

Breaking down Sinatra

config.ru – I mentioned earlier that I deployed with Heroku (more on that in another post, but basically Heroku is a very simple, git-driven way to deploy rack applications– and you can use it for free). The config.ru file tells Heroku that this is a rack application. The contents of the file? Simple. “Sinatra::Application” That’s all I need.
public – Your javascript and your CSS live here. Have as many as you want, and you simply link to your javascript and your css is your .erb files in your views directory, just as you would in the index.html of a site. Nothing fancy there.
views – choose the templating language of your choice, and use it here. I use erb because I’m most familiar with it, but haml is exceedingly popular as well. Anything in layout.erb will show up on *every* page. Since my tic-tac-toe application is only one page, I only need one layout. I’ll talk about what happens if you have more pages in the next section.**
tictactoe.rb – this is where the magic happens. Right now, this is all this file contains:

require 'rubygems'
require 'sinatra'

get '/' do
erb :layout
end

require tells my app the dependencies it needs and loads them for me. get ‘/tiktaktoh’ gets that route for me. do initiates the block that I’m about to pass which contains erb :layout, meaning my layout.erb file will be my ‘view’ for this route. And, end closes my block. I have routed my application to the index page of my url. Check it.

Why the heck did I do *THAT*?

First, I can easily expand this. I can make jsgames.heroku.com and have ‘/tiktaktoh’ route to my tiktaktoh layout, which would reference my stylesheet and my javascript for tiktaktoh. I can also make ‘/bingo’ do the same thing. I can easily create a separate bingo.js and bingo.erb file to create that project completely separate. This is perfect for learning and keeping my code organized. All of this is easily handled through Sinatra’s routing capabilities in one easy file — maybe I’d call it games.rb instead of tiktaktoh.rb, and it might look like this:

require 'rubygems'
require 'sinatra'

get '/tiktaktoh' do
erb :tiktaktoh
end

get '/bingo' do
erb :bingo
end

jsgames.heroku.com/tiktaktoh would go to my tic-tac-toe app, and so on.

**I mentioned earlier that I will still have a layout.erb that will be my default layout, but I will only keep things I want on *all pages* there (like header tags) and then I will insert the ruby (erb) code <%=yield%> in layout.erb wherever I want the layout specific to each game to show up (bingo.erb or tiktaktoh.erb). If my bingo.erb and tiktaktoh.erb layouts are drastically different, I might limit my layout.erb file to header tags. Then, I would simply insert <%=yield%> between my opening and closing html tags. My bingo.erb and tiktaktoh.erb would then include all of the formatting necessary to make my games look pretty.

And second, after I set this up, I deployed with heroku in a quick and easy step, but that’s for another blog post.

Conclusion

I now have a well-organized, expandable, git-supervised and deployable project directory. And although it might seem like overkill for starters, I love how easy it is to develop locally and then deploy with a single command for free, and we can start with ajax requests whenever we want, when we get there.

You can follow my slow and steady progress at http://github.com/ashumz/tiktaktoh My thoughts are to turn this experience into a nice tutorial on beginning javascript for (new) rubyists.

Currently Computing:
Me: HELLO AWESOME! What’s your name?
Awesome: Bowline, a ruby/js GUI framework