Hows Haml?
•
5 likes•1,716 views
Patrick Reagan gives a quick intro on how to use Haml in a Rails application (lightning talk)
Recommended
More Related Content
What's hot
What's hot (19)
Similar to Hows Haml?
Similar to Hows Haml? (20)
More from Viget Labs
More from Viget Labs (11)
Recently uploaded
Recently uploaded (20)
Hows Haml?
- 2. What is Haml? • Templating language for creating XHTML • Alternative to ERB in Rails • Principle: “Markup should be beautiful”
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Off the Rails? $ irb >> require 'rubygems' => true >> require 'haml' => true >> Haml::Engine.new('%p Hello, World').render => quot;<p>Hello, World</p>nquot;
- 21. Why Use It? • Creates well-formatted markup • Automatic closing of tags • Less “noise”
- 22. Why Not? • Buildout must happen inside Rails • XHTML is a widespread standard • Performance
- 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