HAML and SASSShanghai on Rails – 1st edition

Maxime Guilbot – maxime@ekohe.com

1

HAML and SASS

Wikipedia says:HAML (XHTML Abstraction Markup Language) is a markup language that is used to cleanly and simply describe the XHTML of any web document without the use of traditional inline coding.

http://haml.hamptoncatlin.com/

2

What about RHTML?

3

<div class="property_item<%= ' sponsored' if property.sponsored %>" id="property_<%= property.id %>"> <div class="property_title"> <span style="float:right;"> <b><%= property_price(property) %></b><% if property.sell? -%> &nbsp;<%= link_to "月供#{currency(property)}#{property.payment_per_month.to_i}", finance_path(:action=>'mortgage_calculator', :surface=>property.surface, :price_per_m2=>property.price_per_m2), :target=>'_blank' %><% end -%> </span> <% if (logged_in? and can_edit_property(property)) or (somebody_logged_in? and params[:action]=="history") -%> <%= check_box_tag "property_#{property.id}", "1", false, :class => "property_selector" %> <% end %> <a href="<%= property_path(property)+(@form ? @form.to_query_string('', :form) : '') %>" target="_blank"><b><%= h(property.name) %></b> / <%= h(property.district.name) %><%= h(property.address) %> (<%= h(property.property_type.name) %>)</a> <% if logged_in? and can_edit_property(property)%> <%= link_to(image_tag("/images/icons/edit.png"), edit_property_path(property), :target => "_blank") %> <%= link_to(image_tag("/images/icons/destroy.png"), property_path(property)+(@form ? @form.to_query_string('', :form) : ''), :confirm => '确定要删除吗？', :method => :delete ) %> <% end %> <% if params[:action]=="history" -%> <%= link_to_remote "删除", :url => delete_history_property_path(property), :confirm => "确定要删除吗?", :method => :delete %> <% end -%> </div> <div class="property_details"> <div class="property_image"><% pictures_count=property.property_pictures_count+property.property_floor_maps_count if pictures_count==0 && property.property_videos_count>0 -%> <%= video_player(url_for_file_column(property.property_video, :file)) %><% elsif pictures_count>0 pictures=property.property_pictures + property.property_floor_maps-%> <%= link_to image_tag(url_for_file_column(pictures.first, :file, 'thumb'), :alt=>'', :id=>"property_picture_#{property.id}", :target => "_blank"), property_path(property)+(@form ? @form.to_query_string('', :form) : '') %><% if pictures.length>1 pictures[0, 3].each do |p| -%> <%= link_to image_tag(url_for_file_column(p, :file, 'small'), :alt=>''), 'javascript:void(0)', :onclick=>"change_property_picture(#{property.id}, '#{url_for_file_column(p, :file, 'thumb')}');" %><% end end -%><% else -%> <%= link_to(image_tag('no_photo.png', :alt=>'暂无照片'), property_path(property), :target => "_blank") %><% end -%> </div> <div class="property_info"> <span class="agency_logo"><%= link_to (agency_logo(property.agency, 'small')), agency_path(property.agency) %></span>

<table> <tr> <td style="width:80px;">房/厅/卫</td> <td><%= property_rooms(property) %></td> </tr> <tr> <td>面积</td> <td><%= property.surface %> 平米</td> </tr> <% if property.facing -%> <tr> <td>朝向</td> <td><%= facing(property.facing) if property.facing %></td> </tr> <% end -%> <% if property.floor!=0 or property.total_floors!=0 %> <tr> <td><%= "楼层" if property.floor!=0 %><% "/" if property.floor!=0 and property.total_floors!=0 %><%= "总楼层" if property.total_floors!=0 %></td> <td><%= property.floor if property.floor!=0 %><% "/" if property.floor!=0 and property.total_floors!=0 %><%= property.total_floors if property.total_floors!=0 %></td> </tr> <% end %> </table>

<p class="property_description"> <%= simple_format(property.description) %> <%= link_to '详细信息 &gt;&gt;', property_path(property)+(@form ? @form.to_query_string('', :form) : ''), :target => "_blank" %> </p> </div> <div style="clear:left;"></div> </div></div>

RHTMLcan be evil...

4

This in RHTML...

5

becomes this in HAML!

2 spaces!

6

How to use HAML?

• Install the plugin

./script/plugin install svn://hamptoncatlin.com/haml/trunk haml

7

How to use HAML?

• Rename your views - .rhtml +.haml

8

How to use HAML?

• Enjoy the delete key!

9

HAML is...

• sexy

• well-indented

• clear

• fast to write

• the next step in generating views in your Rails application

10

Concept

Abstract Fast Development

Slow DevelopmentConcreteFaster

Execution

Slower Execution

11

Costs

Cos

t

Time

Slower to DevelopFaster to Develop

12

HAML adds more abstraction, so it should be slower on

execution...

How much does that cost?

13

“Haml 1.7 is now only 1.3x slower than ERB”

from HAML release notes

14

Let’s measure that!

15

Httperf• httperf --port 8001 --server 127.0.0.1

--num-conns 300 --uri /

• We got:

• rhtml 16 ms / req

• haml 21 ms / req

• > HAML is 24 % slower than ERB in our example

16

SASS

17

#main :background-color #f00 :width 98%

#main { background-color: #f00; width: 98% }

18

SASS

!main_color = #00ff00

#main :color = !main_color :p :background-color = !main_color :color #000000

19

Rails 2.0

.format.provider:.html.haml.html.erb

20

maxime@ekohe.com

21