Haml. New HTML? (RU)

Why HAML?

Kirill Zonov (graffzon)

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>


.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)

Main ideas of Haml

Markup should:

● be beautiful
● be clean
● be sensible
● follow the rules

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.

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>

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

Any problems with haml?

● Perfomance problems
● Need for retraining

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
>

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

Now you can see that Haml is
REALLY better than erb

You also can take a look for my blog graffzon.com

Haml. New HTML? (RU)

Recommended

Recommended

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)