• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Haml And Sass
 

Haml And Sass

on

  • 6,960 views

shanghaionrails first event presentation given by Maxime GUILBOT

shanghaionrails first event presentation given by Maxime GUILBOT

Statistics

Views

Total Views
6,960
Views on SlideShare
6,931
Embed Views
29

Actions

Likes
4
Downloads
121
Comments
0

2 Embeds 29

http://www.slideshare.net 25
http://rubython.blogspot.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Haml And Sass Haml And Sass Presentation Transcript

    • HAML and SASS Shanghai 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=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
    • 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 Slower Abstract Fast Development Execution Faster Concrete Slow Development Execution 11
    • Costs Cost Time Slower to Develop Faster 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