Ruby on Rails Notes » haml

Javascript in Haml

Melvin Ram — Thu, 07 May 2009 00:43:20 +0000

One thing that is not obvious with HAML is how to add javascript. In the past, haml didn’t really like javascript that much but the latest version of haml on github makes it very simple. It’s done using the :javascript filter. Here’s an example:

:javascript
  jQuery(function(){
    tog("#forgot_password_clicker", "#login_form");
    tog("#forgot_password_clicker", "#forgot_form", forgot_text);
  });

You can also mix in ruby variables by using the standard way of interpolating ruby with strings through: #{ }. Here’s an example of how it all works in a full page with a ruby variable mixed in:

!!! XML
!!!
%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
  %head
    %meta{'http-equiv' => "content-type", :content => "text/html;charset=UTF-8"}

  %body
    - @some_ruby_variable = "something goes here."
    :javascript
      #{@some_ruby_variable}
      jQuery(function(){
        tog("#forgot_password_clicker", "#login_form");
        tog("#forgot_password_clicker", "#forgot_form", forgot_text);
      });

This makes this HTML:

Response to "Thoughts on Haml"

Melvin Ram — Sat, 02 May 2009 01:32:53 +0000

James Britt wrote up a blog post talking about his experience with HAML, the alternative to ERB. His basic position (from what I gathered) was that it’s for noobies and that no one has explained to him why or how HAML makes real world code better… either than saying “wait, it’ll start looking beautiful soon enough and you won’t go back.” This is my detailed, somewhat-reasoned response.

I like HAML because it’s clean and easy to read. Cleaner & easier to read than ERb… and yes, I’ll back that up with code:

http://pastie.org/private/n8ipfrkxlremo4jwtxiww

Converting the ERB file to HAML took less than 4 minutes, mostly hitting the delete key.

A 39 line code becomes 31 lines… and that’s not even the big win. Now if you don’t think the HAML code chuck is visually easier to digest than the ERB version, that’s fine. Stay with ERB.

I find HAML code is easier to maintain & write… and it has nothing to do with a lack of knowledge of html or anything else.

How is it easier to write and maintain?

First, there is the overt clarity when it comes to sass (css) & haml code.

## haml file
.container
  .header
    %h1 Site Name
    %ul
      %li= link_to ...
      %li= link_to ...
      %li= link_to ...
  .content
    stuff
  .footer

## sass (css) file for this

.container
  background-color: black

  .header
    background-color: white

    h1
      font-family: Funky
      font-size: 3em
    ul
      li
        a:link, a:visited
        a:hover
  .content
  .footer

Do you see the pairing? I LOVE that! I find it clean & easy to read.

Secondly, it’s very ruby like.

This:

<% if @subscription.state == 'trial' %>
  Trial expiration date:
  <%= @subscription.next_renewal_at.to_s(:long_day) %>

<% else %>
  <% if @subscription.amount > 0 %>
    Next charge date:
    <%= @subscription.next_renewal_at.to_s(:long_day) %>
    

    Next charge amount:
    <%= number_to_currency @subscription.amount %>
    

    Current payment method:
    <%= @subscription.paypal? ? 'PayPal' : "#{@subscription.card_number} / #{@subscription.card_expiration}" %>
  <% end %>
<% end %>

becomes:

- if @subscription.state == 'trial'
  %label Trial expiration date:
  = @subscription.next_renewal_at.to_s(:long_day)

- else
  - if @subscription.amount > 0
    %label Next charge date:
    = @subscription.next_renewal_at.to_s(:long_day)
    %br/
    %label Next charge amount:
    = number_to_currency @subscription.amount
    %br/
    %label Current payment method:
    = @subscription.paypal? ? 'PayPal' : "#{@subscription.card_number} / #{@subscription.card_expiration}"

Which looks & feels more like ruby? For me, the choice is clearly the second one. It literally removes anything that doesn’t communicate what the code should do.

Anyway, to each his own.

Splitting HAML code into multiple lines

Melvin Ram — Fri, 23 Jan 2009 19:15:59 +0000

If you’re using HAML and have a really long piece of code, you probably want to split it into multiple lines so it looks clean. Here’s how you do it.

Let’s say you have this code:

%h1.logo= real_account? && current_account.name ? current_account.name : AppConfig['app_name']

But you’d rather have:

%h1.logo= real_account? && current_account.name ? 
          current_account.name : AppConfig['app_name']

All you need is to pipe them using |, like this:

%h1.logo= real_account? && current_account.name ? |
          current_account.name : AppConfig['app_name'] |

Notice how the last line also has a |. That is required.