Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Haml vs erb

9,608 views

Published on

Published in: Technology

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

×