Post on 25-May-2015
description
How’s Haml?Patrick Reagan
What is Haml?
• Templating language for creating XHTML
• Alternative to ERB in Rails
• Principle: “Markup should be beautiful”
What is Beauty?
What is Beauty?
Installation
$ sudo gem install --no-ri hamlSuccessfully installed haml-1.8.01 gem installedInstalling RDoc documentation for haml-1.8.0...
$ haml --rails ./my_rails_app Haml plugin added to ./my_rails_app
Using Haml
app/views/posts: index.html.erb => index.html.hamlapp/views/layouts: application.html.erb => application.haml
Rename views and layouts
Start deleting!
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>
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>
!!! XML!!! Strict%html{html_attrs}
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>
!!! XML!!! Strict%html{html_attrs}
%head %title Yet Another Rails Blog %body
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>
!!! XML!!! Strict%html{html_attrs}
%head %title Yet Another Rails Blog %body
#container #navigation = link_to('Home', root_path)
<?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>
!!! 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
Hamlified!
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
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
XHTML document type
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
XHTML document type
XHTML tag with static content
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
XHTML document type Haml helper method
XHTML tag with static content
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
XHTML document type Haml helper method
XHTML tag with static content
DIV tag with ID
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
XHTML document type Haml helper method
XHTML tag with static content
DIV tag with ID
Execute Ruby code
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
XHTML document type Haml helper method
XHTML tag with static content
DIV tag with ID
Execute Ruby code
XHTML tag withdynamic content
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>
Off the Rails?
$ irb >> require 'rubygems' => true >> require 'haml' => true >> Haml::Engine.new('%p Hello, World').render => "<p>Hello, World</p>\n"
Why Use It?
• Creates well-formatted markup
• Automatic closing of tags
• Less “noise”
Why Not?
• Buildout must happen inside Rails
• XHTML is a widespread standard
• Performance
ResourcesOther 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