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,020 views

Published on

Presentation draft for August PhRUG meetup

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,020
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×