Jade > HAML… or why I use Jade more than I ever used HAML

Many years ago I was leading a small team on the presentation layer of a Rails app and it was suggested that my team start using HAML in strict mode. We had all been writing HTML/CSS/JS by hand for years and just could not see the value in learning shorthand syntax because we’re not Rails devs and we know how to write markup. Sure it’s more efficient and cleaner looking for a back end engineer but why add a layer on top of something that’s not a problem for us? That said, we tried it anyway. It was a disaster. The strict indenting slowed down the dev cycle and while the syntax was fairly close to raw HTML it looked more like Ruby than markup. We ended up dropping HAML and productivity sky rocketed.

Years later the landscape has definitely shifted. It’s not just about writing human readable code. It’s about semantic markup and accessibility compliance. These shorthand languages provide a system for reducing hacks in the markup and provide templates for a larger application.

It’s 2014 and I’m looking at Jade as a shorthand HTML markup language and… well… I actually like using it. The syntax is very much like HAML but I find it so much more digestible. Why? Probably because it writes like JavaScript and not Ruby. I spend a lot of time in JavaScript land so the syntax just works for me. There’s no % all over the place.

doctype html
html(lang="en")
	head
		title="selino"
		link(rel='stylesheet', href='index.css')
	body
		#container.flex-con
			p Item 1
			p Item 2
			p Item 3
			p Item 4
			p Item 5
			p Item 6
			p Item 7
			p Item 8
			p Item 1
			p Item 2
			p Item 3
			p Item 4
			p Item 5
			p Item 6
			p Item 7
			p Item 8
	script(src="js/reload.js")
	script(src="js/prefixfree.min.js")

The real sell for me was the ability to throw JS conditionals into the mix. I love JavaScript so it feels like home.

if youAreUsingJade
        p You are amazing
      else
        p Get on it!

#haml #jade #javascript #templating