Successfully reported this slideshow.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Haml. New HTML? (RU)

  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 one line two If we try that: %h1 test work? (<h1> test work? </h1> ) Immediately we take error: Illegal nesting: content can't 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 in app/views/haml/index.html.erb =@haml app/views/erb/index.html.erb</p> <%= @erb % app/views/slim/index.html.erb = @slim >
  12. 12. Intuitive perception Html 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 erb You also can take a look for my blog graffzon.com

×