Haml. New HTML? (RU)

1. Why HAML?Kirill Zonov (graffzon)

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. 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. 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. Main ideas of Haml Markup should:● be beautiful● be clean● be sensible● follow the rules

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. 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. 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. No need for words ;)

10. Any problems with haml?● Perfomance problems● Need for retraining

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. 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. Now you can see that Haml is REALLY better than erbYou also can take a look for my blog graffzon.com