intro to haml
DESCRIPTION
Presentation on HAML given by Clifford Heath at the Melbourne Ruby group 2007/08/30.TRANSCRIPT
![Page 1: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/1.jpg)
HAMLor, how to get <arrowheads> out of your face
Presented by Clifford Heath
![Page 2: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/2.jpg)
Is THIS YOU?
![Page 3: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/3.jpg)
when you see...<div id="column1" class= "robust"> <div class="sidebaritem"> <div class="sbihead"> <h1>Status Watch</h1> </div> <div class="sbicontent"> <%= render :partial => 'layouts/sidebar', :locals => { :value =>@mvalue } %> </div> </div> <div class="sidebaritem"> <div class="sbihead"> <h1>Your Account</h1> </div> <div class="sbilinks"> <ul> <% if session[:user_id] %> <li><%= link_to 'Log Out', :controller => 'authenticate', :action => 'logout' %></li> <% if @user && @user[:is_admin] -%> <li><%= link_to "Administration", :controller => 'admin', :action => 'index' %></li></etc></etc></etc> the right number of times ...
![Page 4: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/4.jpg)
With HAML...
#column1.robust .sidebaritem .sbihead %h1 Status Watch .sbicontent = render :partial => 'layouts/sidebar', :locals => { :value =>@mvalue } .sidebaritem .sbihead %h1 Your Account .sbilinks %ul - if @user %li= link_to 'Log Out', :controller => 'authenticate', :action => 'logout' - if @user[:is_admin] %li= link_to "Administration", :controller => 'admin', :action => 'index'
![Page 5: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/5.jpg)
What’s Changed?
All <arrowheads> are gone
Tags and code both self-close by indentation
id=”xyz” and class=”abc” are just #xyz and .abc
<div> is the default tag - for others, use %tag
<%= some code %> is now just = some code
Same for <% some code -%>, use - some code
![Page 6: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/6.jpg)
Visual Simplicity
The RHTML version has 261 lexical tokens
counting each word in strings and syntactic white-space
The HAML version has 117 tokens
That makes it easier on the eyes and the fingers!
Markup Haiku
![Page 7: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/7.jpg)
Read it again...
#column1.robust .sidebaritem .sbihead %h1 Status Watch .sbicontent = render :partial => 'layouts/sidebar', :locals => { :value =>@mvalue } .sidebaritem .sbihead %h1 Your Account .sbilinks %ul - if @user %li= link_to 'Log Out', :controller => 'authenticate', :action => 'logout' - if @user[:is_admin] %li= link_to "Administration", :controller => 'admin', :action => 'index'
![Page 8: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/8.jpg)
Extra benefits
Need care to close tags correctly in RHTML
In HAML, generated code is indented properly
including after nesting layouts and partials!
valid XHTML with no extra effort
DIVs almost always get a class or an ID or both
Plays well with RHTML during conversion
![Page 9: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/9.jpg)
Other niceties
Attribute values are Ruby code:%label{:for=>@field.name}= @field.description+’:’
Ruby blocks are automatically closed:%table - @people.each do |person| %tr %td= person.name%p.footer
You can declare multiple classes, etc:%td.person.alignleft#husband= @husband.name
![Page 10: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/10.jpg)
Other niceties... 2
ID and class attributes can come from an object:%div[@mother]uses @mother.class and @mother.id to become:<div class=”person” id=”person_5724”>
Most self-closing tags are recognisedothers may be declared self-closed: %br/
Comments start with a single / and are output!Even multi-line; a comment wraps indented content
![Page 11: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/11.jpg)
Other niceties... 3
Automatic generation of DOCTYPE tags:!!! and !!! XML become<?xml version="1.0" encoding="utf-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Continue a long line using a trailing |
:filter passes the content to the filter:%p :markdown Textile ======= Hello, *World*
![Page 12: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/12.jpg)
Tools
Syntax highlighting modules available
JEdit, Eclipse + RadRails, TextMate, (G)Vim, Komodo, Emacs
or simple VIM setup (in your ~/.vimrc):
au BufRead,BufNewFile *.haml set sw=2 sts=2 et
![Page 13: Intro to Haml](https://reader034.vdocuments.us/reader034/viewer/2022052523/556209abd8b42a7d028b4995/html5/thumbnails/13.jpg)
How to install
./script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable
Also available as a GEM for use outside Rails
Website: http://haml.hamptoncatlin.com/
See also SASS - similar approach for stylesheets
Developer discussion: http://groups.google.com/group/haml
Thanks to Hampton Catlin and his contributors!