Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 30 day trial from Scribd
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