shanghaionrails first event presentation given by Maxime GUILBOT

1. HAML and SASS
Shanghai on Rails – 1st edition
Maxime Guilbot – maxime@ekohe.com
1

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

3. What about RHTML?
3

4. <div class=quot;property_item<%= ' sponsored' if property.sponsored %>quot; id=quot;property_<%= property.id %>quot;>
div class=quot;property_titlequot;
span style=quot;float:right;quot;
b%= property_price(property) %/b
% if property.sell? -%
nbsp;%= link_to quot; #{currency(property)}#{property.payment_per_month.to_i}quot;, 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]==quot;historyquot;) -%
%= check_box_tag quot;property_#{property.id}quot;, quot;1quot;, false, :class = quot;property_selectorquot; %
% end %
a href=quot;%= property_path(property)+(@form ? @form.to_query_string('', :form) : '') %quot; target=quot;_blankquot;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(quot;/images/icons/edit.pngquot;), edit_property_path(property), :target = quot;_blankquot;) %
%= link_to(image_tag(quot;/images/icons/destroy.pngquot;), property_path(property)+(@form ? @form.to_query_string('', :form) : ''), :confirm
= ' ', :method = :delete ) %
% end %
RHTML
% if params[:action]==quot;historyquot; -%
%= link_to_remote quot; quot;, :url = delete_history_property_path(property), :confirm = quot; ?quot;, :method = :delete %
% end -%
/div
div class=quot;property_detailsquot;
div class=quot;property_imagequot;
%
can be evil...
pictures_count=property.property_pictures_count+property.property_floor_maps_count
if pictures_count==0 property.property_videos_count0 -%
%= video_player(url_for_file_column(property.property_video, :file)) %
% elsif pictures_count0
pictures=property.property_pictures + property.property_floor_maps
-%
%= link_to image_tag(url_for_file_column(pictures.first, :file, 'thumb'), :alt='', :id=quot;property_picture_#
{property.id}quot;, :target = quot;_blankquot;), property_path(property)+(@form ? @form.to_query_string('', :form) : '') %
% if pictures.length1
pictures[0, 3].each do |p| -%
%= link_to image_tag(url_for_file_column(p, :file, 'small'), :alt=''), 'javascript:void
(0)', :onclick=quot;change_property_picture(#{property.id}, '#{url_for_file_column(p, :file, 'thumb')}');quot; %
% end
end -%
% else -%
%= link_to(image_tag('no_photo.png', :alt=' '), property_path(property), :target = quot;_blankquot;) %
% end -%
/div
div class=quot;property_infoquot;
span class=quot;agency_logoquot;%= link_to (agency_logo(property.agency, 'small')), agency_path(property.agency) %/span
table
tr
td style=quot;width:80px;quot; / / /td
td%= property_rooms(property) %/td
/tr
tr
td /td
td%= property.surface % /td 4

5. This in RHTML...
5

6. becomes this in HAML!
2 spaces!
6

7. How to use HAML?
• Install the plugin
./script/plugin install svn://hamptoncatlin.com/haml/trunk haml
7

8. How to use HAML?
• Rename your views - .rhtml +.haml
8

9. How to use HAML?
• Enjoy the delete key!
9

10. HAML is...
• sexy
• well-indented
• clear
• fast to write
• the next step in generating views in your
Rails application
10

11. Concept
Slower
Abstract Fast Development
Execution
Faster
Concrete Slow Development
Execution
11

12. Costs
Cost
Time
Slower to Develop
Faster to Develop
12

13. HAML adds more abstraction,
so it should be slower on
execution...
How much does that cost?
13

14. “Haml 1.7 is now only
1.3x slower than ERB”
from HAML release notes
14

15. Let’s measure that!
15

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

17. SASS
17

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

19. SASS
!main_color = #00ff00
#main
:color = !main_color
:p
:background-color = !main_color
:color #000000
19

20. Rails 2.0
.format.provider:
.html.haml
.html.erb
20

21. maxime@ekohe.com
21