Haml

B049f961d55097ef9104ff4b275a517b?s=47 Lucas Dohmen
October 17, 2012
200

 Haml

This was my part of a Haml vs. Erb talk defending the honor of Haml ;) The other part about Erb was done by @klaustopher :)

B049f961d55097ef9104ff4b275a517b?s=128

Lucas Dohmen

October 17, 2012
Tweet

Transcript

  1. RWTH Aachen, Computer Science Student triAGENS GmbH, Developer moon lum

    moonbeamlabs by Lucas Dohmen Haml > ERB or: Why Haml is awesome
  2. Some hands please • Who does not know Haml or

    Sass? • Who prefers Haml to ERB? • Who prefers Sass to SCSS?
  3. Short Introduction to Haml (and Sass)

  4. The principles of Haml • Markup should be beautiful •

    Markup should be DRY • Markup should be well- indented • HTML structure should be clear
  5. 1 <div class="person"> 2 <div class="name"><%= name %></div> 3 <%=

    img_tag img %> 4 <div class="children"> 5 <% children.each |child| %> 6 <div class="child"> 7 <div class="name"><%= child.name %></div> 8 </div> 9 <% end %> 10 </div> 11 </div>
  6. 1 <div class="person"> 2 <div class="name"><%= name %></div> 3 <%=

    img_tag img %> 4 <div class="children"> 5 <% children.each |child| %> 6 <div class="child"> 7 <div class="name"><%= child.name %></div> 8 </div> 9 <% end %> 10 </div> 11 </div>
  7. 1 <div class="person"> 2 <div class="name"><%= name %> 3 <%=

    img_tag img %> 4 <div class="children"> 5 <% children.each |child| %> 6 <div class="child"> 7 <div class="name"><%= child.name %>
  8. 1 %div.person 2 %div.name<%= name %> 3 <%= img_tag img

    %> 4 %div.children 5 <% children.each |child| %> 6 %div.child 7 %div.name<%= child.name %>
  9. 1 %div.person 2 %div.name= name 3 = img_tag img 4

    %div.children 5 - children.each |child| 6 %div.child 7 %div.name= child.name
  10. 1 .person 2 .name= name 3 = img_tag img 4

    .children 5 - children.each |child| 6 .child 7 .name= child.name
  11. vs. 1 .person 2 .name= name 3 = img_tag img

    4 .children 5 - children.each |child| 6 .child 7 .name= child.name 1 <div class="person"> 2 <div class="name"><%= name %></div> 3 <%= img_tag img %> 4 <div class="children"> 5 <% children.each |child| %> 6 <div class="child"> 7 <div class="name"><%= child.name %></div> 8 </div> 9 <% end %> 10 </div> 11 </div>
  12. Yep.

  13. Sass (Syntax only*) * It has a lot of advanta

    es, but they are not relevant for today
  14. 1 #info-box { 2 border: 1px dashed red; } 3

    4 #info-box h2 { 5 font-size: 1.5em; 6 font-weight: bold; } 7 8 #info-box p.intro { 9 color: red; } 10 11 #info-box .agb { 12 text-decoration: underline; }
  15. 1 #info-box 2 border: 1px dashed red 3 4 #info-box

    h2 5 font-size: 1.5em 6 font-weight: bold 7 8 #info-box p.intro 9 color: red 10 11 #info-box .agb 12 text-decoration: underline
  16. 1 #info-box 2 border: 1px dashed red 3 4 h2

    5 font-size: 1.5em 6 font-weight: bold 7 8 p.intro 9 color: red 10 11 .agb 12 text-decoration: underline
  17. But why?!

  18. 1 <div class="fair-comparison"> 2 <strong><?php echo $title ?></strong> 3 <br/>

    4 Stop hitting yourself! 5 </div> 1 <div class="fair-comparison"> 2 <strong><%= title %></strong> 3 <br/> 4 Stop hitting yourself! 5 </div> The Problem of ERB
  19. 1 <div class="fair-comparison"> 2 <strong><?php echo $title ?></strong> 3 <br/>

    4 Stop hitting yourself! 5 </div> 1 <div class="fair-comparison"> 2 <strong><%= title %></strong> 3 <br/> 4 Stop hitting yourself! 5 </div> The Problem of ERB
  20. The Problem of HTML, Part 1 • I hate repeatin

    myself • I therefore prefer YAML to XML, Ruby to Java, Haml to HTML… • HTML is extremely noisy due to repetition • I hate repeatin myself
  21. The Problem of HTML, Part 2 • Id and Class

    are syntactically the same • In Haml they are different • …and can therefore be hi hli hted differently
  22. The Problem of HTML, Part 3 • HTML and CSS

    don‘t have anythin in common syntax-wise • Haml and Sass were created by the same person and fit very well to ether
  23. 1 #info-box 2 %h2= title 3 %p.intro= description 4 5

    .agb= t("info-box.agb") 1 #info-box 2 border: 1px dashed red 3 4 h2 5 font-size: 1.5em 6 font-weight: bold 7 8 p.intro 9 color: red 10 11 .agb 12 text-decoration: underline Haml & Sass
  24. SMACSS and Smurf • SMACSS or Smurf + (Haml and

    Sass) = <3 • Direct mappin of the modules
  25. Common Criticism

  26. Criticism #1: My desi ner knows HTML!!1 • And you

    just copy and paste it? • Really? • You definitely worked at different companies than I have worked at
  27. Criticism #2: It is different in my browser :( •

    The matchin is extremely easy • ERB does not match line to line either because of control structures
  28. Criticism #3: It is really bad for lon texts •

    Yes • Haml is for structure, not for content • Do you have lon texts in your ERB? • Stop that! • Markdown is the best solution for that
  29. Criticism #4: It‘s slow • Yep.

  30. Wrappin it up • Haml is no One-Size-Fits-them-all solution •

    Haml is a team player with Sass and Mdown • Haml is extremely ood for structure