5.2 Haml

Haml is another type of templating engine which is often used with the Ruby programming languages, with frameworks such as Sinatra or Rails. It can even be used as a stand-alone. So let's explore Haml and see how we can code out HTML. Before we get started, I wanted to point out on the documentation, a very clear and comprehensive documentation by Haml, which is basically HTML Abstraction Markup Language, which gives you some instructions on how to install it. And more importantly, the various filters and syntax you can use. So let's get started by installing Haml first. And in this case, we will use Ruby gem. The Ruby with its package manager and say gem install, and then haml. If you have already done so and if you query hmal's version, it should give you the current version number that your system has. So firstly, let's create a brand new file and call it index.haml which we will eventually compile to index.html. So let's open this up in Sublime Text. So in order to compile Haml to HTML, why don't we use Codekit? I have introduce Codekit in the previous episodes while working with CSS preprocessor, just for the fun of it, let's include Codekit for Haml as well. So there you go, I have included a project for a desktop and it will immediately detect that this is Haml and let's set the output path. Yup, it should just put out the file index of HTML in desktop. And now, all I need to do is put in a tag name, as simple as that. So, put in a tag name, it is %h1. Now, if you watch the previous video on Jade, notice how similar it is and yet the subtle difference. So let me just save it. And immediately, an index.html file will be created. And there you go, this is the file complete with the opening and closing tags for HTML. Once again, I will split the screen so that you are aware of exactly the Haml syntax as well as the churned out HTML. Notice, in order to denote a tag, you will need this little percentage sign. So why don't we include a content for h1? So, all you need to do is just a little gap and then the content. And there you go, the content heading will be inside the HTML tag h1. So much like Jade, or even the CSS preprocessor, if you want to do a nesting, it will be as simple as an indentation. So let's just say an unordered list and let's just say JavaScript, Ruby, C, basically the various programming languages. And once you save this, there you go, it will come out as a complete HTML. Similarly, let's explore how we can include say attributes. So let's say we have a tag button. And let's just include a content inside called button. And this button has a clause. So in order to include attributes, we do a curly brace. And, for the class attribute, we will include colon and then class, which is the attribute name, arrow, and let's just say warning. Let's see what is the output HTML. There you go, it will be class with warning. How about ids? So we need to do a comma and then colon id, same thing. We will just denote it as click for id, and there you go, it will be an id with click. What about two classes? All you need to do is warning and then include another class called radius. And finally, I will just mention how we can include a simple comment, just with one single slash it will compile into HTML comment. And if you want a silent comment, it will simply as dash and hash, and then some comment, and guess what? This will never be output. So that was a very brief introduction to Haml. Usually in the Ruby world, a lot of us will code in the view templates called ERB or embedded ruby. And as you can see, embedded ruby looks very similar to HTML. But when we want to insert in the data, it kind of happens in this little syntax, greater than or less than percentage sign, and then equal to the data. Now Haml makes it a little bit cleaner in the sense that it will not include the opening and closing tags, and it will also not include the [UNKNOWN] open and closing for the data. As you notice, this is how you can output the Haml using the Ruby data. Finally, I wanted to point out that as Ruby gem Haml, you can use it with many Ruby frameworks such as Ruby on Rails or even Sinatra. But as I have shown you, you can even use it as a stand-alone templating engine. And finally, I also wanted to point out this tutorial, an Introduction to Haml and Sinatra, where the author in nettuts kinds of brings us through the process of how we can integrate Haml with a service side framework such as Sinatra.