Haml. New HTML? (RU)
•
4 likes•5,956 views
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.
![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>](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to Haml. New HTML? (RU)
Similar to Haml. New HTML? (RU) (20)
More from Kirill Zonov
More from Kirill Zonov (7)
Recently uploaded
Recently uploaded (20)
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 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 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 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 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 erb You also can take a look for my blog graffzon.com