Why HAML?Kirill Zonov (graffzon)
From ERB to Haml (Step 1)<div class="offering">  <div class="name">     <%= offering.name %>  </div>  <div class="symbol">...
From ERB to Haml (Step 2)<div class="offering">  <div class="name">     <%= offering.name %>  <div class="symbol">     <%=...
From ERB to Haml (Step 3).offering   .name       = offering.name    .symbol       = offering.symbol    .last_price       =...
Main ideas of Haml               Markup should:● be beautiful● be clean● be sensible● follow the rules
Rules of indentations.some_div  line one  line two                <div class=some_div> line one line two </div> <div      ...
Size of code (erb)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
Size of code (haml)!!!%html  %head  %meta{http-equiv => "Content-Type", content => "text/html; charset=utf-8"}  %title #{c...
No need for words ;)
Any problems with haml?● Perfomance problems● Need for retraining
Perfomance   Haml - 0.00033s   ERB - 0.000222s   Slim - 0.000254s   Код:Haml                                   ERB        ...
Intuitive perceptionHtml with css:<div class="highlight">  this is some stuff</div>.highlight { border: 1px solid #f00 }Ha...
Now you can see that Haml is          REALLY better than erbYou also can take a look for my blog graffzon.com
Upcoming SlideShare
Loading in...5
×

Haml vs erb

8,161

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,161
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Haml vs erb

  1. 1. Why HAML?Kirill Zonov (graffzon)
  2. 2. From ERB to Haml (Step 1)<div class="offering"> <div class="name"> <%= offering.name %> </div> <div class="symbol"> <%= offering.symbol %> </div> <div class="last_price"> <%= number_to_currency offering.last_price %> </div> <div class="last_traded_at"> <%= last_trade_at.to_formatted_s(:short) %> </div> <div class="actions"> <%= link_to "buy", offering_new_bid_path(offering) %> <% if offering.owners.find_by_user_id(session[:uid]) %> <%= link_to "sell", offering_new_ask_path(offering) %> <% end %> </div></div>
  3. 3. From ERB to Haml (Step 2)<div class="offering"> <div class="name"> <%= offering.name %> <div class="symbol"> <%= offering.symbol %> <div class="last_price"> <%= number_to_currency offering.last_price %> <div class="last_traded_at"> <%= last_trade_at.to_formatted_s(:short) %> <div class="actions"> <%= link_to "buy", offering_new_bid_path(offering) %> <% if offering.owners.find_by_user_id(session[:uid]) %> <%= link_to "sell", offering_new_ask_path(offering) %>
  4. 4. From ERB to Haml (Step 3).offering .name = offering.name .symbol = offering.symbol .last_price = number_to_currency offering.last_price .last_traded_at = last_trade_at.to_formatted_s(:short) .actions = link_to "buy", offering_new_bid_path(offering) - if offering.owners.find_by_user_id(session[:uid]) = link_to "sell", offering_new_ask_path(offering)
  5. 5. Main ideas of Haml Markup should:● be beautiful● be clean● be sensible● follow the rules
  6. 6. Rules of indentations.some_div line one line two <div class=some_div> line one line two </div> <div class=some_div_two> line one </div>.some_div_two line two line oneline twoIf we try that:%h1 testwork?(<h1> test work? </h1> )Immediately we take error:Illegal nesting: content cant be both given on the same line as %h1 and nested within it.
  7. 7. Size of code (erb)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> <%= configatron.app_name %> - <%= yield(:title) || Home %> </title> <%= stylesheet_link_tag :flutie, application %> <%= javascript_include_tag :defaults, rails.validations, jquery-snippet %> <%= csrf_meta_tag %> <%= yield(:head) %> <%= yield :javascript %> </head><body> <div class="content"> <%= render layouts/navigation %> <hr /> <%= render layouts/messages %> <% if show_title? %> <h1> <%= yield(:title) %> </h1> <% end %> <%= yield %> </div></body></html>
  8. 8. Size of code (haml)!!!%html %head %meta{http-equiv => "Content-Type", content => "text/html; charset=utf-8"} %title #{configatron.app_name} - #{yield(:title) || Home} = stylesheet_link_tag :flutie, application = javascript_include_tag :defaults, rails.validations, jquery-snippet = csrf_meta_tag = yield(:head) = yield :javascript%body .content = render layouts/navigation %hr = render layouts/messages %h1=yield(:title) if show_title? = yield
  9. 9. No need for words ;)
  10. 10. Any problems with haml?● Perfomance problems● Need for retraining
  11. 11. Perfomance Haml - 0.00033s ERB - 0.000222s Slim - 0.000254s Код:Haml ERB Slim%h1 Haml#index %p Find me in <h1>Erb#index</h1> <p>Find me in h1 Haml#index p Find me inapp/views/haml/index.html.erb =@haml app/views/erb/index.html.erb</p> <%= @erb % app/views/slim/index.html.erb = @slim >
  12. 12. Intuitive perceptionHtml with css:<div class="highlight"> this is some stuff</div>.highlight { border: 1px solid #f00 }Haml with sass:.highlight this is some stuff.highlight border: 1px solid #f00
  13. 13. Now you can see that Haml is REALLY better than erbYou also can take a look for my blog graffzon.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×