Haml vs erb
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,657
On Slideshare
8,647
From Embeds
10
Number of Embeds
4

Actions

Shares
Downloads
19
Comments
0
Likes
3

Embeds 10

http://www.helpified.com 4
http://www.tumblr.com 3
http://www.hanrss.com 2
https://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 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. 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 inapp/views/haml/index.html.erb =@haml app/views/erb/index.html.erb</p> <%= @erb % app/views/slim/index.html.erb = @slim >
  • 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. Now you can see that Haml is REALLY better than erbYou also can take a look for my blog graffzon.com