Hows Haml?

10,546 views
10,378 views

Published on

Patrick Reagan gives a quick intro on how to use Haml in a Rails application (lightning talk)

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • It didn't come across in the slides, but though I mentioned performance as compared to both ERB and Erubis I didn't stress it as something a developer should care about. If you're looking to get more performance out of your application, you should really be looking at the database and other areas before worrying about your rendering engine.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
10,546
On SlideShare
0
From Embeds
0
Number of Embeds
173
Actions
Shares
0
Downloads
87
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Hows Haml?

  1. 1. How’s Haml? Patrick Reagan
  2. 2. What is Haml? • Templating language for creating XHTML • Alternative to ERB in Rails • Principle: “Markup should be beautiful”
  3. 3. What is Beauty?
  4. 4. What is Beauty?
  5. 5. Installation $ sudo gem install --no-ri haml Successfully installed haml-1.8.0 1 gem installed Installing RDoc documentation for haml-1.8.0... $ haml --rails ./my_rails_app Haml plugin added to ./my_rails_app
  6. 6. Using Haml Rename views and layouts app/views/posts: index.html.erb => index.html.haml app/views/layouts: application.html.erb => application.haml Start deleting!
  7. 7. ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Yet Another Rails Blog</title> </head> <body> <div id='container'> <div id='navigation'> <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
  8. 8. ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Yet Another Rails Blog</title> </head> <body> <div id='container'> <div id='navigation'> <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
  9. 9. ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> %head <head> %title Yet Another Rails Blog <title>Yet Another Rails Blog</title> %body </head> <body> <div id='container'> <div id='navigation'> <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
  10. 10. ERB / RHTML <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> %head <head> %title Yet Another Rails Blog <title>Yet Another Rails Blog</title> %body </head> <body> #container <div id='container'> #navigation <div id='navigation'> = link_to('Home', root_path) <%= link_to 'Home', root_path %> </div> <div id='content'> <% @posts.each do |post| -%> <div class='post'> <h3><%= h post.title %></h3> <strong>by: <%= post.author %></strong> <p><%= post.body %></p> </div> <% end %> </div> </div> </body> </html>
  11. 11. Hamlified! <?xml version='1.0' encoding='utf-8' ?> !!! XML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; !!! Strict %html{html_attrs} quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> %head <head> %title Yet Another Rails Blog <title>Yet Another Rails Blog</title> %body </head> <body> #container <div id='container'> #navigation <div id='navigation'> = link_to('Home', root_path) <%= link_to 'Home', root_path %> </div> #content <div id='content'> <%@posts.each do |post| -%> - @posts.each do |post| .post <div class='post'> <h3><%=h(post.title) %></h3> %h3= h post.title <strong>by:quot;by: post.author %></strong> %strong= <%= #{h(post.author)}quot; <p><%=post.body %></p> %p= post.body </div> <% end %> </div> </div> </body> </html>
  12. 12. Haml Deconstructed !!! XML !!! Strict %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  13. 13. Haml Deconstructed XHTML document type !!! XML !!! Strict %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  14. 14. Haml Deconstructed XHTML document type !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  15. 15. Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  16. 16. Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog DIV tag with ID %body #container #navigation = link_to('Home', root_path) #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  17. 17. Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog DIV tag with ID %body #container #navigation = link_to('Home', root_path) Execute Ruby code #content - @posts.each do |post| .post %h3= h(post.title) %strong= quot;by: #{h(post.author)}quot; %p= post.body
  18. 18. Haml Deconstructed XHTML document type Haml helper method !!! XML XHTML tag with !!! Strict static content %html{html_attrs} %head %title Yet Another Rails Blog DIV tag with ID %body #container #navigation = link_to('Home', root_path) Execute Ruby code #content - @posts.each do |post| .post %h3= h(post.title) XHTML tag with %strong= quot;by: #{h(post.author)}quot; %p= post.body dynamic content
  19. 19. XHTML Output <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>Yet Another Rails Blog</title> </head> <body> <div id='container'> <div id='navigation'> <a href=quot;/quot;>Home</a> </div> <div id='content'> <div class='post'> <h3>January Refresh Recap</h3> <strong>by: Patrick</strong> <p>It was awesome!</p> </div> ... </div> </div> </body> </html>
  20. 20. Off the Rails? $ irb >> require 'rubygems' => true >> require 'haml' => true >> Haml::Engine.new('%p Hello, World').render => quot;<p>Hello, World</p>nquot;
  21. 21. Why Use It? • Creates well-formatted markup • Automatic closing of tags • Less “noise”
  22. 22. Why Not? • Buildout must happen inside Rails • XHTML is a widespread standard • Performance
  23. 23. Resources Other templating systems • Erubis • Markaby • pHAML Tutorial & Documentation • http://haml.hamptoncatlin.com/tutorial/ • http://haml.hamptoncatlin.com/docs/ TextMate Bundle (via SVN) • http://macromates.com/svn/Bundles/trunk

×