Introduction to HAML

1. HAML
Web Templating for Human Beings

2. Introduction
HAML is Markup language
Its purpose is to describe
HTML in a clean, simple way

3. Introduction
Lets face it, HTML is
pretty annoying

4. Introduction
HAML aims to solve problems
with ordinary HTML coding

5. Introduction
• Markup should be beautiful
• Markup should be DRY
• Too much repetition in HTML and
templating engines like ERB
• Markup should be well-indented
• Markup structure should be clear

6. The problems with HTML
Programmers don’t speak
HTML
The whole concept of
markup is foreign as
there’s no logic involved.

7. The problems with HTML
The mix of markup and
logic seems a bit odd, if not
ugly.
Markup should be beautiful,
not just code

8. The problems with HTML
There’s just too much repetition in HTML.
All those open and close tags are redundant

9. The problems with HTML
Keeping track of open
and close HTML and
template tags is tedious.

10. HAML to the rescue
<ul id=”navigation”>
<li class=”menu_item”>
<a href=”/home” title=”Home”>Home</a>
</li>
</ul>
%ul#navigation
%li.menu_item
%a({:href => “/home”,
:title => “Home”
})
Home

11. HAML Basics
!!! 5
%html
%head
%title Haml Test
%body
#header
%h1 Welcome to my blog
%nav#navigation
#content
= yield

12. HAML Basics
• HTML Tags are prefixed with %
• ID attribute is prefixed with #
• Class attribute is prefixed with .
• Default HTML tag is <div>

13. HAML Basics
• Additional attributes are passed as
• space-separated attr./value pairs
• %a(title=@title href=href) Stuff
• attr./value hash
• %a{:title => @title, :href => href} Stuff

14. HAML Formatting
Remove whitespace using < and > characters
%img
%img>
%img
Compiles into
<img /><img /><img />

15. HAML Formatting
%p<= “FoonBar”
Compiles into
<p>Foo
Bar</p>

16. HAML Formatting
Escape HTML entities using the & sign
&= “I like Cheese & Crackers”
Compiles into
I like Cheese &amp; Crackers

17. HAML Formatting
Disable HTML unescaping using the ! sign
!= “<strong>Foo</strong>”
Compiles into
<strong>Foo</strong>

18. Dynamic HAML
HAML supports dynamic content as well as
static content.
(let the real fun begin)

19. Dynamic HAML
• We use the “=” sign to evaluate dynamic
code and assign the value to the desired tag
• We use the “-” sign to run code without
appending a value to any tag
• We use Ruby interpolation to mix static
and dynamic strings

20. Dynamic HAML
%h2= “Posts for #{Time.now}”
%ul#posts
- @posts.each do |post|
%li.post_item
%h3= post.title
%p= post.post
%p=

21. Dynamic HAML
HAML doesn’t limit us to just plain old code
running and evaluation.
Since markup documents may contain a mix
of other languages (like Javascript or CSS),
we can use Filters to parse those languages
into HAML

22. HAML Filters

23. HAML Filters
:javascript
document.getElementById(‘content’);
:css
body{
font:normal normal 14px Arial,sans-serif;
}
:sass
li
font:
family: serif

24. HAML Filters
:markdown
Textile
=======
Hello, *World*
:textile
I *really* prefer _#{h flavor}_ jam.

25. HAML Filters
:zohar
module Haml::Filters::Zohar
include Haml::Filters::Base
def render(text)
# run some snazzy logic
text
end
end

26. HAML interoperability
• Python - HamlPy & DAML (Django)
• PHP - Fammel, pHAML, phpHAML
• .NET - NHaml, MonoRail NHaml
• Javascript - HAML-js
• Perl - Text::Haml
• Java - JHaml

27. HAML
Questions ?