Hows Haml?

43 %
57 %
Information about Hows Haml?

Published on January 25, 2008

Author: viget

Source: slideshare.net

Description

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

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 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

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!

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>

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>

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>

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>

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>

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

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

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

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

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

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

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

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>

Off the Rails? $ irb >> require 'rubygems' => true >> require 'haml' => true >> Haml::Engine.new('%p Hello, World').render => quot;<p>Hello, World</p>nquot;

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

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

#container presentations

Add a comment

Related pages

Haml

Unspace Interactive and several other professional Rails shops use Haml exclusively for their projects, valuing its focus on cleanliness, readability, ...
Read more

GitHub - haml/haml: HTML Abstraction Markup Language - A ...

README.md Haml. Haml is a templating engine for HTML. It's designed to make it both easier and more pleasant to write HTML documents, by eliminating ...
Read more

GitHub - haml/html2haml: Convert HTML and HTML+Erb to Haml.

README.md Html2haml. Html2haml, not surprisingly, converts HTML to Haml. It works on HTML with embedded ERB tags as well as plain old HTML. Installation
Read more

How Haml Can Make Your Life Easier - Code School

Want to learn how to write cleaner & more efficient markup? We'll review how Haml can help you do that, and how it'll make your life easier when working ...
Read more

File: REFERENCE — Haml Documentation

Haml (HTML Abstraction Markup Language) Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document, without the ...
Read more

Haml - Wikipedia, the free encyclopedia

Haml uses indentation to nest tag elements whereas ERB uses the same HTML representation; In Haml properties like class, id can be represented by #, ...
Read more

An Introduction to Haml - SitePoint – Learn HTML, CSS ...

Haml is an XHTML Abstraction Markup Language that, according to haml-lang.com: functions as a replacement for inline page templating systems such as PHP ...
Read more

Save Loads of Time by Writing Your HTML With Haml | Design ...

Save Loads of Time by Writing Your HTML With Haml. Odds are, by now you know all about Sass and its brethren (LESS, Stylus, etc.). Love them or hate them ...
Read more