Get Rid of HTML Templates With HAML
I was working with a new client the last couple weeks where I met a python developer who introduced me to something I hadn’t head of before: HAML. HAML stands for XHTML Abstraction Markup Language and is a markup “language” modeled after, what appears to me to be, YAML. (The syntax and structure is very similar to YAML but I couldn’t find any reference to this being intentional so I could be wrong.)
Get Rid of Templates With HAML
Anywho, it looks like HAML was originally created for Ruby on Rails but has been adopted by a few other programming languages and environments like PHP. According to the official site:
Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.
So in a nutshell HAML allows for the replacement of the normal, everyday, HTML markup with something a little more “elegant”. The HAML Wikipedia page has a really good example of the differences between HTML and HAML (which I’ve stolen and placed below):
HAML
!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
%head
%title BoBlog
%meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
= stylesheet_link_tag 'main'
%body
#header
%h1 BoBlog
%h2 Bob's Blog
#content
- @entries.each do |entry|
.entry
%h3.title= entry.title
%p.date= entry.posted.strftime("%A, %B %d, %Y")
%p.body= entry.body
#footer
%p
All content copyright © BobHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>BoBlog</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<link href="/stylesheets/main.css" media="screen" rel="Stylesheet" type="text/css" />
</head>
<body>
<div id='header'>
<h1>BoBlog</h1>
<h2>Bob's Blog</h2>
</div>
<div id='content'>
<div class='entry'>
<h3 class='title'>Halloween</h3>
<p class='date'>Tuesday, October 31, 2006</p>
<p class='body'>
Happy Halloween, glorious readers! I'm going to a party this evening... I'm very excited.
</p>
</div>
<div class='entry'>
<h3 class='title'>New Rails Templating Engine</h3>
<p class='date'>Friday, August 11, 2006</p>
<p class='body'>
There's a very cool new Templating Engine out for Ruby on Rails. It's called Haml.
</p>
</div>
</div>
<div id='footer'>
<p>
All content copyright © Bob
</p>
</div>
</body>
</html>After comparing the two examples above it should be pretty obvious how HAML is structured compared to good old HTML. There’s nothing too crazy going on in the syntax but that doesn’t matter nearly as much as there’s another syntax to learn. Still, if you can get past that HAML is pretty intriguing and worth it to look at.
Now, if you’re a PHP developer you may be saying, “That’s great and all but what the fuck do I care about a Ruby on Rails tool?”. Well, that’s one of the cool parts; there’s a PHP implementation of HAML a PHP class called phpHaml. phpHaml is a PHP class to compile HAML code into static HTML templates, which is useful if you want to jump right in and build a template system.
At it’s most basic a phpHaml script looks like the below:
<?php require_once './includes/haml/HamlParser.class.php'; $parser = new HamlParser('./tpl', './tmp/haml'); echo $parser->setFile('example2.haml'); ?>
Simple. Simple. Simple. Obviously, there are other, more advanced options for working with phpHaml but 3 lines is really all it takes for the learning portion.
My interest in HAML is a little greater than my time allows so I haven’t been able to play too deeply with phpHaml. From my limited time with it though I do feel that the the compiler works as expected on the limited HTML I threw at it and it’s probably worth a deeper look. Oh, yeah, as an added bonus phpHaml also includes a SASS parser (but that’s a whole other post) to play with.
Email
Twitter
Wow, this certainly looks like overcomplicated HTML! I doubt I’ll ever be using/recommending this…
Haml was indeed modeled after YAML.
[...] Get Rid of HTML Templates With HAML | Made of Everything You're … Tags: content management open source, Joe, Joomla, open source web, template Published by admin on Jan 5, 2010 under 1 | Post your comment now Find out more: here templates adobe illustrator » [...]
Thanks for the tip. We’ve been using HAML with Rails and Sinatra for a couple of years now. It definitely makes HTML template production about a hundred times easier. We don’t do a lot of work with PHP anymore, but for those legacy projects, or those projects where the client is dictating that we use something like PHP, we’ll definitely be using the phpHAML parser.
any comments on the performance issues? my previous experience with a templating engine is that they usually generate markup on-the-fly, which makes page rendering very slow. how does the phpHAML parser works anyway?
t uses regular expressions for the parsing which could get pretty CPU intensive so you’d definitely want to cache the output to keep things running smooth.
Its not about the syntax only: Its also about having proper quoting:
%div= ”
will always run htmlentities while
%div!= ”
will not (if the library was proberly implemented). haml-to-php.com is the only PHP HAML library which gets this right.
Now try writing option lists to see how easy it is:
%select
– foreach(array(‘red,’green’) => $color)
%option(value=$color selected=$color==’red’)$color
(Again: Most php implementations have a weak parser and can’t parse this)
. I agree – you should have a create_html_for_select() function. Thus just a line with != such as:
!= create_html_for_select(array(‘red’,'green’), ‘red’)
and != will insert the HTML verbatim into the template.