Intro to Haml

Slide 1: HAML or, how to get <arrowheads> out of your face Presented by Clifford Heath

Slide 2: Is THIS YOU?

Slide 3: 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 ...

Slide 4: 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'

Slide 5: 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

Slide 6: 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 ﬁngers! Markup Haiku

Slide 7: 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'

Slide 8: Extra beneﬁts 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

Slide 9: Other niceties Attribute values are Ruby code: %label{:for=>@ﬁeld.name}= @ﬁeld.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

Slide 10: 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 recognised others may be declared self-closed: %br/ Comments start with a single / and are output! Even multi-line; a comment wraps indented content

Slide 11: 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 | :ﬁlter passes the content to the ﬁlter: %p :markdown Textile ======= Hello, *World*

Slide 12: 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

Slide 13: 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!

Slideshare.net (beta)