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

jade-greater-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!
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s