Haml. New HTML? (RU)
graffzon
5,960 views
13 slides
Jan 04, 2012
Slide 1 of 13
1
2
3
4
5
6
7
8
9
10
11
12
13
About This Presentation
My blog: http://zonov.me/
Slide Content
Why HAML?
Kirill Zonov (graffzon)
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>
<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>
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) %>
<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) %>
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)
.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
●be beautiful
●be clean
●be sensible
●follow the rules
Markup should:
●be beautiful
●be clean
●be sensible
●follow the rules
Markup should:
Rules of indentations
.some_div
line one
line two
.some_div_two
line one
line two
<div class='some_div'> line one line two </div> <div
class='some_div_two'> line one </div>
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.
.some_div
line one
line two
.some_div_two
line one
line two
<div class='some_div'> line one line two </div> <div
class='some_div_two'> line one </div>
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>
<!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
!!!
%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
No need for words ;)
Any problems with haml?
●Perfomance problems
●Need for retraining
●Perfomance problems
●Need for retraining
Perfomance
Haml - 0.00033s
ERB - 0.000222s
Slim - 0.000254s
Код:
Haml
%h1 Haml#index %p Find me in
app/views/haml/index.html.erb =@haml
ERB
<h1>Erb#index</h1> <p>Find me in
app/views/erb/index.html.erb</p> <%= @erb %
>
Slim
h1 Haml#index p Find me in
app/views/slim/index.html.erb = @slim
Haml - 0.00033s
ERB - 0.000222s
Slim - 0.000254s
Код:
Haml
%h1 Haml#index %p Find me in
app/views/haml/index.html.erb =@haml
ERB
<h1>Erb#index</h1> <p>Find me in
app/views/erb/index.html.erb</p> <%= @erb %
>
Slim
h1 Haml#index p Find me in
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
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
REALLY better than erb
You also can take a look for my blog graffzon.com
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 5,960
- Slides 13
- Favorites 4
- Age 5082 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
48 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
47 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
34 views
21
Know for Certain
DaveSinNM
22 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views