Haml And Sass

  • 4,713 views
Uploaded on

shanghaionrails first event presentation given by Maxime GUILBOT

shanghaionrails first event presentation given by Maxime GUILBOT

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,713
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
122
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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_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=>quot;property_picture_# {property.id}quot;, :target => quot;_blankquot;), 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=>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