Download as PDF, PPTX
![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>](https://image.slidesharecdn.com/hamlvserb-120104132055-phpapp01/85/Haml-New-HTML-RU-2-320.jpg)
![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) %>](https://image.slidesharecdn.com/hamlvserb-120104132055-phpapp01/85/Haml-New-HTML-RU-3-320.jpg)
![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)](https://image.slidesharecdn.com/hamlvserb-120104132055-phpapp01/85/Haml-New-HTML-RU-4-320.jpg)
Uploaded byKirill Zonov
Haml. New HTML? (RU)
This document discusses the benefits of using HAML over ERB for markup templating in Ruby on Rails applications. It begins by showing an example of converting ERB code to equivalent HAML code in 3 steps to demonstrate HAML's cleaner syntax. It then lists some of HAML's main ideas like being beautiful, clean and sensible. It also explains HAML's rules of indentation. The document notes that HAML code is typically smaller than equivalent ERB. Potential performance and retraining issues with HAML are also briefly mentioned. Overall, the document argues that HAML provides a more intuitive and readable approach to markup templating compared to ERB.
More Related Content
Haml. New HTML? (RU)
- 1. Why HAML? Kirill Zonov(graffzon)
- 2. From ERB toHaml (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 toHaml (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 toHaml (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 ofHaml 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 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. 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 forwords ;)
- 10. Any problems withhaml? ● 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 in app/views/haml/index.html.erb =@haml app/views/erb/index.html.erb</p> <%= @erb % app/views/slim/index.html.erb = @slim >
- 12. Intuitive perception Html withcss: <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 cansee that Haml is REALLY better than erb You also can take a look for my blog graffzon.com