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)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (20)

Similaire à Haml. New HTML? (RU)

Similaire à Haml. New HTML? (RU) (20)

Plus de Kirill Zonov

Plus de Kirill Zonov (7)

Dernier

Dernier (20)

Haml. New HTML? (RU)