Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
 
Why code in Ruby / Rails?
 
I like Java
+ Sign me up!
But I like Ruby better.
Brevity.
import java.util.Map; import java.util.HashMap; ...   Map<Integer, String> hash =  new  HashMap<Integer, String>();     ha...
hash = {  1  =>  &quot; one &quot; ,  2  =>  &quot; two &quot; ,  3  =>  &quot; three &quot;  }
Rails is (mostly) concise.
$ rails blog $ cd blog $ ruby script/generate scaffold entry subject:string content:text $ rake db:migrate  $ ruby script/...
class   Entry  <  ActiveRecord :: Base end
class   EntriesController  <  ApplicationController # GET /entries # GET /entries.xml def   index @entries  =  Entry .all ...
< h1 > Listing entries </ h1 > < table > < tr > < th > Subject </ th > < th > Content </ th > </ tr > <%   @entries .each ...
HTML in ERb screws everything up.
import java.util.Map; import java.util.HashMap; ...   Map<Integer, String>  hash = new  HashMap<Integer, String>();     ha...
What if we could do it here too? < h1 > Listing entries </h1> < table >   < tr >   < th > Subject </th>   < th > Content <...
Enter  Haml
% h1  Listing entries Declaring Elements
% table % tr % th  Subject % th  Content Nesting Elements
%table %tr %th Subject %th Content -   @entries .each  do  | entry |   %tr   % td &=  entry.subject   % td &=  entry.conte...
% p {   :style  =>  &quot; color: green &quot;   }=  notice Attributes
% div {  :class   =>  &quot; error &quot; ,   :id   =>  &quot; some_id &quot; }  Some Text can be shortened to . class # s...
Why stop at ERb?
Sass  does with  CSS what  Haml  does with  HTML .
pre   background-color :  #eee padding :  10px font-size :  11px No braces! No semicolons!
# errorExplanation width: 400px border: 2px solid red padding: 7px padding-bottom: 12px margin-bottom: 20px background-col...
$fore:  # 333 $bg:  # fff body background-color : $bg color : $fore  Constants!
@mixin rounded($radius: 10px) border-radius: $radius -moz-border-radius: $radius -webkit-border-radius: $radius . fieldWit...
Short Demo
Thank you for listening! my site:  http://www.bryanbibat.net
Upcoming SlideShare
Loading in …5
×

Haml & Sass presentation

2,061 views

Published on

Presentation draft for August PhRUG meetup

Published in: Technology
  • Be the first to comment

Haml & Sass presentation

  1. 2. Why code in Ruby / Rails?
  2. 4. I like Java
  3. 5. + Sign me up!
  4. 6. But I like Ruby better.
  5. 7. Brevity.
  6. 8. import java.util.Map; import java.util.HashMap; ... Map<Integer, String> hash = new HashMap<Integer, String>(); hash.put(1, &quot;one&quot; ); hash.put(2, &quot;two&quot; ); hash.put(3, &quot;three&quot; );
  7. 9. hash = { 1 => &quot; one &quot; , 2 => &quot; two &quot; , 3 => &quot; three &quot; }
  8. 10. Rails is (mostly) concise.
  9. 11. $ rails blog $ cd blog $ ruby script/generate scaffold entry subject:string content:text $ rake db:migrate $ ruby script/server
  10. 12. class Entry < ActiveRecord :: Base end
  11. 13. class EntriesController < ApplicationController # GET /entries # GET /entries.xml def index @entries = Entry .all respond_to do | format | format.html # index.html.erb format.xml { render :xml => @entries } end end ...
  12. 14. < h1 > Listing entries </ h1 > < table > < tr > < th > Subject </ th > < th > Content </ th > </ tr > <% @entries .each do | entry | %> < tr > < td > <%= h entry.subject %> </ td > < td > <%= h entry.content %> </ td > < td > <%= link_to ' Show ', entry %> </ td > < td > <%= link_to ' Edit ', edit_entry_path(entry) %> </ td > < td > <%= link_to ' Destroy ', entry, :confirm => ' Are you sure? ' , :method => :delete %> </ td > </ tr > <% end %> </ table > < br /> <%= link_to ' New entry ', new_entry_path %>
  13. 15. HTML in ERb screws everything up.
  14. 16. import java.util.Map; import java.util.HashMap; ... Map<Integer, String> hash = new HashMap<Integer, String>(); hash.put( 1, &quot;one&quot; ); hash.put( 2, &quot;two&quot; ); hash.put( 3, &quot;three&quot; ); Ruby does away with redundant code
  15. 17. What if we could do it here too? < h1 > Listing entries </h1> < table > < tr > < th > Subject </th> < th > Content </th> </tr> <% @entries.each do |entry| %> < tr > < td ><% =h entry.subject %></td> < td ><% =h entry.content %></td> < td ><% = link_to 'Show', entry %></td> < td ><% = link_to 'Edit', edit_entry_path(entry) %></td> < td ><% = link_to 'Destroy', entry, :confirm => 'Are you sure?', :method => :delete %></td> </tr> <% end %> </table> < br /> <% = link_to 'New entry', new_entry_path %>
  16. 18. Enter Haml
  17. 19. % h1 Listing entries Declaring Elements
  18. 20. % table % tr % th Subject % th Content Nesting Elements
  19. 21. %table %tr %th Subject %th Content - @entries .each do | entry | %tr % td &= entry.subject % td &= entry.content % td = link_to ' Show ' , entry % td = link_to ' Edit ' , edit_entry_path(entry) Ruby Code
  20. 22. % p { :style => &quot; color: green &quot; }= notice Attributes
  21. 23. % div { :class => &quot; error &quot; , :id => &quot; some_id &quot; } Some Text can be shortened to . class # some_id Some Text divs, classes, and id
  22. 24. Why stop at ERb?
  23. 25. Sass does with CSS what Haml does with HTML .
  24. 26. pre background-color : #eee padding : 10px font-size : 11px No braces! No semicolons!
  25. 27. # errorExplanation width: 400px border: 2px solid red padding: 7px padding-bottom: 12px margin-bottom: 20px background-color: #f0f0f0 h2 text-align: left font-weight: bold ... Nested Selectors!
  26. 28. $fore: # 333 $bg: # fff body background-color : $bg color : $fore Constants!
  27. 29. @mixin rounded($radius: 10px) border-radius: $radius -moz-border-radius: $radius -webkit-border-radius: $radius . fieldWithErrors @include rounded(5px) ... # errorExplanation @include rounded ... Method-like structures!
  28. 30. Short Demo
  29. 31. Thank you for listening! my site: http://www.bryanbibat.net

×