Why HAML is future of web and HTML, All about HAML.

What is haml ?haml_1-5_logo

At its core, Haml is a lightweight markup language.

Its, HTML Abstraction Markup Language

Haml makes writing HTML much easier, and when I say “much easier” what I really mean is “you won’t believe how much time you can save by using Haml.” In my opinion, it’s even more of an obvious time saver than Sass. Many developers take one look at Sass and think, “Neat! But I don’t really see a need for it.” With Haml, almost every developer, whether they would ever consent to use it or not, should immediately see the intense timesaving benefits that it brings.

Advantages

The main disadvantage of using HAML over HTML is simply that HTML is just about universal among web developers, where as the HAML community is still a relatively small community. This would undoubtedly make finding developers to work on your project in the future a more daunting task.
You never need to worry about missing a closing tag because the HAML parser will throw an exception and give you a line number. It’s quick, it’s short, it’s legible.

  • easy to read and visually expresses your DOM hierarchy
  • code is shorter as closing tags are eliminated

Difference between html and haml

Browsers only understand HTML. HAML is just a templating language that gets transformed into HTML (e.g. same final output). If you find the HAML syntax to be easier than HTML then go for it.

Who can use

Everyone who writes HTML can use Haml in some respect. Sure, you won’t use all of the features, but I’m sure you don’t use all of Photoshop’s features either but you still fire it up it on a daily basis.

My point is, if you’ve never written a line of Ruby in your life and don’t plan to, don’t let that scare you off from Haml. It’s still immensely fun.

Into Action

The beauty of Haml is that it’s “DRY”, meaning there’s been an attempt to strip out as much of the annoying inherent HTML repetition as possible.

Haml is whitespace dependent, meaning it uses the visual structure of your code to determine the HTML output.

HTML:

<p>Hi I'm HTML paragraph</p>

Here this small single line has repetition, the starting and closing tag obviously.

But,

HAML,

“impresionante it’s done :D”.

You would say “No it isn’t enough” , I need more examples :

We are using traditional html since logs with all its tags how can we implement them here in haml, your concern is right lets see.

Classes and Ids

Same (.) & (#) :

haml html1

You want to say something now 🙂

haml code
code snap: for showing proper indentation

After compilation the HTML goes like:

haml html
Code Snap

Just the game of % and identation.

Different HTML Tags

Now you will think about tags that aren’t common, like footer, section, or may be anyThing

So HAML does not care about what tags are, just follow the syntax and all is yours.

See,

haml html3

Here comes your real concern, Can i use HAML syntax in my HTML,

So offcourse it’s, Yes

Mixing HAML with Your HTML

Go with an example:

haml html5

Compiling HAML to HTML

Since long we are trying the code and talking about compilation, now its time to compile it, but before going to command line, lets use some handy online tools.

Here is online compilor side by side, just type in or paste your code and get compiled haml easily, Handy !!

Check here

You can directly install HAML:

gem install haml

For local usage, if you are mac user you got lucky here, a special tool for you is: chocolatapp

You can checkout codekit multipurpose.

Check out Live Reload, that is always infront of you.

Conclusion

If you enjoyed using Sass, less and want to have same feeling for html, then HAML is a star for your innocent eyes :p.

Yes dont forget to checkout the official site of HAML .

Written by 

Joseph Ross is a Principal Consultant at Knoldus Inc. having more than 10 years of experience. Joseph has a passion for identifying challenges and give impactful solutions to the clients. He is a football fan and loves to watch TV series. Joseph has a cross-functional business operations and technology consulting experience. Joseph is familiar with programming languages such as Scala, C++, Java, CSS and HTML.

6 thoughts on “Why HAML is future of web and HTML, All about HAML.

  1. Nice post! I love HAML and use it when I code! Thanks for the clear explanation on HAML and its advantages. Another interesting post idea would be on Jade. Keep up the good work! 🙂

    1. yea definitely as jade is heavily influenced by HAML and support javascript/nodeJs and HAML is good for ruby guys, as the technology goes on it becomes handy, same with jade here. Although its good to have a look over Emmet, In my next post i’ll try to cover them. Happy Frontending 😉

Leave a Reply

%d bloggers like this: