occasionally useful ruby, ubuntu, etc

A brief introduction to Ruby, Sinatra, and Haml

Ruby and Sinatra make it ludicrously easy to make a webapp, but getting started, as with any new language or framework, can be daunting. By the end of this part, you'll have a simple template that talks back to you!

I'm not going to go over how to install Ruby here (it's probably been done numerous times around the web), but here's a quick checklist:
1) Install Ruby (http://www.ruby-lang.org/en/downloads/)
2) If running Ruby 1.8.6 or 1.8.7 (check with ruby -v), install Rubygems. For more info on Rubygems, check out http://docs.rubygems.org/read/book/1 . Ruby 1.9 and above come with Rubygems built in.
3) Install the Sinatra and Haml rubygems (see http://docs.rubygems.org/read/chapter/2#page5, but the command on Linux is sudo gem install sinatra haml to install both at the same time)

As a sanity check when you're done, run "irb" (interactive Ruby), and type each of the following commands (in order). None of them should return errors.

1. require 'rubygems'
2. require 'sinatra'
3. require 'haml'

Okay, now on with the good stuff.

First Steps

Create a project directory, like first_app or something. Create a file with the .rb extension, like hello.rb. Open it up in your favorite (simple?) text editor (notepad++, gedit, TextMate).

Write the following:

Let's take a step by step to figure out exactly what's going on in this file. (list numbers correspond to line numbers)

1. "require" simply loads up a library. If it's already been loaded once, "require" will check to make sure it already loaded it and then do nothing. "require"ing rubygems loads up that library into memory so we can load other gems, like...sinatra. (Like Perl, Ruby has a number of "magic globals". The load path, where require looks, is an array in $:). Also, notice single-line comments are denoted by #. Ruby doesn't really have multiline comments amazingly, but there is a hacky substitute...
2. Now that we have rubygems loaded, we can load sinatra! Rubygems works by modifying that $: variable I mentioned above. By loading the sinatra gem, the libraries full capabilities are now ready -- and most importantly, new methods are available in the main scope.
4. Ah, 'get' is our first method call, which we get after loading sinatra. We're passing in one argument to it, "/hello", as well as a block. Blocks have some tricky aspects to them, but think of them as simply a way of passing a chunk of code around (see closure and Pragmatic Programmers for more info). Note that calling methods without the (optional) parentheses is generally considered against best practice, except in very simple cases, like this one.
5. As you may have guessed, this is a string. But what is it doing? The last line of any block or method is implicitly the return value. When sinatra asks this block "what's your value", the block will hand up whatever's on the last line. Of course, you can (and sometimes have to) be more explicit by prefixing your return value with the return keyword, like Java.

If you're confused about what method calls generally look like, here's a little snippet I prepared.

Okay, let's run this thing. In your terminal, run `ruby hello.rb`. The terminal will tell you where to point your browser: http://localhost:4567/. Go there -- you should see "Hello, world!"

Okay, the basics are out of the way. Let's get to the cookbook-style programs. (be sure to note the filename, in the corner of the gist)

Render a haml template and pass data to it

Render a layout

Layouts minimize redundant code across multiple views.

Adding javascript, css, images

Plop those files into a /public subdirectory and you should be able to reference them like /my_css.css in your views. See here: Sinatra Intro.

Posting a form and using that data

Preserving session information, like logins

The Sinatra FAQ is pretty good about this one: http://www.sinatrarb.com/faq.html#sessions

I'm cutting this off a bit short, but hopefully this is enough to get you started.

EDIT: cont'd.

Basic HTML/HAML stuff

A basic "sign in" application with link bar

See this little app I made at github. Click the Download Source button on that page, and/or browse around online.