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 :)

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