Hows Haml?
•
0 likes•478 views
Patrick Reagan gives a quick (~15 minute) introduction to Haml and how it can be used in Ruby web applications.
Recommended
Recommended
More Related Content
What's hot
What's hot (12)
Viewers also liked
Viewers also liked (6)
Similar to Hows Haml?
Similar to Hows Haml? (20)
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 "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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 "-//W3C//DTD XHTML 1.0 Strict//EN" !!! Strict %html{html_attrs} "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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 "-//W3C//DTD XHTML 1.0 Strict//EN" !!! Strict %html{html_attrs} "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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 "-//W3C//DTD XHTML 1.0 Strict//EN" !!! Strict %html{html_attrs} "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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 "-//W3C//DTD XHTML 1.0 Strict//EN" !!! Strict %html{html_attrs} "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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:"by: post.author %></strong> %strong= <%= #{h(post.author)}" <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= "by: #{h(post.author)}" %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= "by: #{h(post.author)}" %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= "by: #{h(post.author)}" %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= "by: #{h(post.author)}" %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= "by: #{h(post.author)}" %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= "by: #{h(post.author)}" %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= "by: #{h(post.author)}" %p= post.body dynamic content
- 19. XHTML Output <?xml version='1.0' encoding='utf-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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="/">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 => "<p>Hello, World</p>n"
- 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