View
7.214
Download
4
Category
Preview:
DESCRIPTION
shanghaionrails first event presentation given by Maxime GUILBOT
Citation preview
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? -%> <%= 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 '详细信息 >>', 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
Recommended