The difference between HAML and HTML.

1. HAML
Mike Silvis
Hungry Academy Class of 2012

2. HAML
Mike Silvis
Hungry Academy Class of 2012
@MIKESILVIS MIKESILVIS MIKE.SILVIS MIKE-SILVIS MIKE.SILVIS@

3. VS
PENGUINS VS FLYERS PLAYOFF GAME #2
TONIGHT @ 7PM

4. WHAT IS HAML?
BESIDES THIS AWESOME DUDE?

5. CORE PRINCIPLES
WHY IT’S AWESOME

6. MARKUP SHOULD BE BEAUTIFUL (EASY TO READ)
CORE PRINCIPLES
WHY IT’S AWESOME

7. MARKUP SHOULD BE BEAUTIFUL (EASY TO READ)
MARKUP SHOULD BE DRY (WHY REPEAT OURSELVES)
CORE PRINCIPLES
WHY IT’S AWESOME

8. MARKUP SHOULD BE BEAUTIFUL (EASY TO READ)
MARKUP SHOULD BE DRY (WHY REPEAT OURSELVES)
MARKUP SHOULD WELL-INDENTED (EASILY NEST DIVS)
CORE PRINCIPLES
WHY IT’S AWESOME

9. MARKUP SHOULD BE BEAUTIFUL (EASY TO READ)
MARKUP SHOULD BE DRY (WHY REPEAT OURSELVES)
MARKUP SHOULD WELL-INDENTED (EASILY NEST DIVS)
HTML STRUCTURE SHOULD BE CLEAR (RULES!)
CORE PRINCIPLES
WHY IT’S AWESOME

10. ERB ~141 CHARACTERS HAML ~71
~ 30 SECONDS TO TYPE ~ 15 SECONDS TO TYPE
SAMPLE
AND THAT’S A SMALL SAMPLE

11. REAL EXAMPLE

12. REAL EXAMPLE

13. RUBY LINK_TO USER.NAME, USER_PATH(USER), {:CLASS => "USER", :ID => "MEE"}
CSS . USER { FLOAT:RIGHT; }
HAML .A{:HREF =>”/CART”}= VIEW YOUR CART
ERB <A HREF=”CART”> <%= “YOUR CART” %></A>
LOOKS MORE LIKE RUBY & CSS
EASIEST TO SWITCH BETWEEN VIEW AND PURE RUBY

14. CONVERTING SNIPPETS
HTTP://HTML2HAML.HEROKU.COM/

15. $ find . -name '*erb' |
xargs ruby -e 'ARGV.each { |i| puts "html2haml -r #{i} #{i.sub(/erb$/,"haml")}"}' |
bash
HTML2HAML -R ./APP/VIEWS/LAYOUTS/APPLICATION.HTML.ERB ./APP/VIEWS/LAYOUTS/APPLICATION.HTML.HAML
HTML2HAML -R ./APP/VIEWS/USERS/_FORM.HTML.ERB ./APP/VIEWS/USERS/_FORM.HTML.HAML
HTML2HAML -R ./APP/VIEWS/USERS/EDIT.HTML.ERB ./APP/VIEWS/USERS/EDIT.HTML.HAML
HTML2HAML -R ./APP/VIEWS/USERS/INDEX.HTML.ERB ./APP/VIEWS/USERS/INDEX.HTML.HAML
HTML2HAML -R ./APP/VIEWS/USERS/NEW.HTML.ERB ./APP/VIEWS/USERS/NEW.HTML.HAML
HTML2HAML -R ./APP/VIEWS/USERS/SHOW.HTML.ERB ./APP/VIEWS/USERS/SHOW.HTML.HAML
BASH COMMAND
TRANSFORM YOUR STORE ENGINE TO USE HAML!