<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>getiblog &#187; html</title>
	<atom:link href="http://blog.getify.com/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.getify.com</link>
	<description>javascript, performance, and ui musings</description>
	<lastBuildDate>Thu, 15 Dec 2011 17:37:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Why I don&#8217;t like HAML</title>
		<link>http://blog.getify.com/why-i-dont-like-haml/</link>
		<comments>http://blog.getify.com/why-i-dont-like-haml/#comments</comments>
		<pubDate>Thu, 04 Feb 2010 19:38:52 +0000</pubDate>
		<dc:creator>getify</dc:creator>
				<category><![CDATA[Misc]]></category>
		<category><![CDATA[UI Architecture]]></category>
		<category><![CDATA[architecture]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[template]]></category>
		<category><![CDATA[templating]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://blog.getify.com/?p=168</guid>
		<description><![CDATA[Disclaimer Before I begin, let me share my personal mantra: &#8220;everyone is entitled to their own (wrong) opinions.&#8221; This includes me. This post is purely opinion. It&#8217;s an editorial. It means nothing unless you care what my opinion is. If you&#8217;re easily offended, or if you just love HAML, or if you&#8217;re a closed minded [...]]]></description>
			<content:encoded><![CDATA[<h2>Disclaimer</h2>
<p>Before I begin, let me share my personal mantra: &#8220;everyone is entitled to their own (wrong) opinions.&#8221; This includes me. This post is purely opinion. It&#8217;s an editorial. It means nothing unless you care what my opinion is. If you&#8217;re easily offended, or if you just love HAML, or if you&#8217;re a closed minded bigot, or whatever, just move on. Really. </p>
<p>I really don&#8217;t care what your opinion is on this topic, I just want to express mine, for the record, for posterity sake. And I&#8217;m not trying to convince anyone to use or <strong>not use</strong> HAML. I simply want to state the things I dislike about it. </p>
<p>I&#8217;m a fundamentalist, and I prefer simplicity in almost all cases. My bias toward performance, customization, control, optimization, and other such ethics should be evident from this blog already. This automatically makes me suspicious of &#8220;all-in-one&#8221; anythings. I&#8217;m the anti-framework guy. I&#8217;m the anti-platform guy. I&#8217;m the guy who wants the bare minimum in place to get my task done effectively. And I believe that in doing so, with as few layers of abstraction (and processing) as feasible and possible, you will end up with more performant code. </p>
<p>But this doesn&#8217;t <em>have</em> to come at the price of less maintainable code. It&#8217;s just that for years, the development community has strived for more maintainable code, and the only answer we&#8217;ve ever figured out collectively is to put higher and higher levels of abstractions on things. </p>
<p>Some abstraction is good and smart (<a href="http://twitter.com/brandonaaron/status/8596115868">we don&#8217;t write 0&#8242;s and 1&#8242;s</a>, thanks @<a href="http://twitter.com/brandonaaron">brandonaaron</a>!!), but to the level that a lot of people take it, I liken it to using a pictures-only menu at a fast food restaurant. No offense to the foreign or illiterate, who I&#8217;m sure that is helpful to, but if you <em>can</em> read, you <em>should</em>. Pointing to the picture of a hamburger, then the picture of a ketchup bottle, then&#8230; this is inferior to just saying &#8220;Hamburger with ketchup&#8221;, if you <em>can</em> say that. Just my opinion.</p>
<p>Anyway, my goal with this post is to identify the fundamental approaches (not just nit-picking) of HAML that I dislike. Actually, to be fair, HAML is not the problem itself, HAML is just a symptom of the larger problem, convenient to help me illustrate some thoughts on templating as a discipline.</p>
<p>I&#8217;ll continue the discourse in subsequent post(s) with other opinions, and even some suggestions I have for solutions. Hopefully you&#8217;ll stick around and get something out of it. If not, that&#8217;s fine, too.</p>
<h2>Brief overview of HAML</h2>
<p>For those who aren&#8217;t aware, <a href="http://haml-lang.com/">HAML</a> is a templating language, apparently most closely associated with Ruby, that uses some &#8220;shorthand&#8221; to express HTML structures. It&#8217;s important to note that it&#8217;s more involved than a simple shorthand such as Wiki/<a href="http://en.wikipedia.org/wiki/Markdown">markdown</a>, as it appears aimed to be a full-fledged templating engine.</p>
<p>As it includes a templating &#8220;language&#8221; (a <a href="http://en.wikipedia.org/wiki/Domain-specific_language">DSL</a>, technically), it has the usual suspects, including variable replacement, logical selection operators, &#8220;sub-template&#8221; includes, comments, etc. It also allows/includes Ruby (or Ruby-like, not quite sure) syntax for more complicated logic, such as function definitions, looping, math operations, etc.</p>
<p>Let&#8217;s identify first the most important characteristics of HAML (at least, those relevant to my points):</p>
<ul>
<li>HAML uses CSS-like shorthand to reverse-declare HTML tags. (HAML assumes a &#8220;&lt;div>&#8221; tag type unless otherwise specified).
<p>Example:</p>
<pre class="code">
#mydiv
    %span.message
        Hello World
</pre>
<p>Would result in:</p>
<pre class="code">
&lt;div id="mydiv">
    &lt;span class="message">Hello World&lt;/span>
&lt;/div>
</pre>
<p>It&#8217;s easy to see how in this respect, the &#8220;shorthand&#8221; for the resultant HTML seems easier to write/maintain.
</li>
<li>HAML uses whitespace indentation nesting to signal scope of tag blocks. This is <strong>critical</strong> for HAML being able to know where a block ends without needing closing tags, a big part of the &#8220;shorthand&#8221; being achieved.
<pre class="code">
#mydiv
    %ol#mylist
        %li.myitem
            Hello
        %li.myitem
            World
</pre>
<p>Results in:</p>
<pre class="code">
&lt;div id="mydiv">
    &lt;ol id="mylist">
        &lt;li class="myitem">Hello&lt;/li>
        &lt;li class="myitem">World&lt;/li>
    &lt;/ol>
&lt;/div>
</pre>
<p>Again, clearly the &#8220;shorthand&#8221; syntax has some appealing aspects, so far. If you like/don&#8217;t mind &#8220;whitespace sensitive languages&#8221; like Python and VB, you&#8217;ll be ok with using indentation in place of closing tags.
</li>
<li>
For more complex tasks, like math operations, dropping in variable replacements, calling functions, executing logic, etc, HAML allows you to use an = sign to signal a line of Ruby code to be executed in the context of the template parsing, with the output being added to the template at that point. (You use a &#8211; to indicate Ruby that should execute but which returns no desired output to include in the template).</p>
<p>Example:</p>
<pre class="code">
- (42...45).each do |i|
    %p= i
</pre>
<p>Results in:</p>
<pre class="code">
&lt;p>42&lt;/p>
&lt;p>43&lt;/p>
&lt;p>44&lt;/p>
&lt;p>45&lt;/p>
</pre>
<p>There are other variations of how to include/execute Ruby code as well. The point is, HAML tries to make it pretty easy for you to execute logic in your template, as long as that logic is Ruby. Also, they make one little buried warning in the documentation about encouraging you not to run Ruby logic which <em>should be</em> in the Controller. It&#8217;s not enforced in anyway, but I guess if you read <strong>and</strong> obey, that&#8217;s helpful.
</li>
</ul>
<p>There&#8217;s certainly more (<a href="http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html">a lot more</a>, in fact) to HAML than this short list. I&#8217;m not writing a book on HAML (or anti-HAML) here, so I&#8217;m just trying to keep it to a minimum. But let&#8217;s just suffice it to say, there&#8217;s a few dozen different syntax rules, tag types, practices, etc that are required to use a HAML template for a non-trivial task like building a full dynamic web app page. Also, you&#8217;re going to have to know Ruby to get much more than simple &#8220;shorthand&#8221; HTML out of the deal.</p>
<h2>My opinions</h2>
<p>I&#8217;m going to assume if you&#8217;re still reading this blog post at this point, you&#8217;re here because you a) care about my opinions, or b) care enough to want to discredit my opinions. If you&#8217;re in group (a), read on. If you&#8217;re in group (b)&#8230; well&#8230; refer back to the first sentence of the post about my personal mantra.</p>
<h4>Whitspace/indentation scoping</h4>
<p>So, first off, I hate, absolutely detest, cannot stand, whitespace-sensitive languages. I cannot think of hardly anything in programming paradigms that irks me more than having to try and determine a set of logic context and having to count the number of indented columns (if they are spaces and not tabs, for instance) to figure out which blocks go together. This is doubly true if you choose to use like 1 or 2 space indentation, which I&#8217;ve seen at a couple of my previous jobs. </p>
<p>I suppose if you used 10 spaces for each indentation mark, it might make things obvious enough, but then you&#8217;re defeating the purpose of trying to use shorthand if you have to add and manage a bunch of extra characters to help make scope identifiable.</p>
<p>This brings up my counter opinion: languages like C and JavaScript use just 2 characters to identify blocks; the &#8220;{&#8221; and the &#8220;}&#8221;. This also makes it easier for code editors to give you helpful hints like highlighting closing and opening &#8220;tags&#8221;, and helping you know if you have unbalanced/unclosed elements, etc. I like this in JavaScript and C styled languages, so it natually should extend that I like this in HTML.</p>
<h4>I don&#8217;t like complications</h4>
<p>The above examples look really nice, and are probably the sweet spot for how HAML shines. But if you read <a href="http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html">the long form documentation</a>, you&#8217;ll quickly see that there are lots of other complicating scenarios which you must learn to deal with. Indeed, HAML is not just shorthand convenient HTML, it&#8217;s a DSL with sytnax and rules and exceptions and gotchas all its own.</p>
<p>For instance, consider the case of wanting to add some attributes to a tag. Here&#8217;s an example from the documentation of the proper way to do it with HAML.</p>
<p>Say you want this HTML:</p>
<pre class="code">
&lt;sandwich bread='whole wheat' delicious='true' filling='peanut butter and jelly' />
</pre>
<p>Just use this &#8220;little&#8221; snippet of goodness (makes me hungry just reading it):</p>
<pre class="code">
def hash1
    {:bread => 'white', :filling => 'peanut butter and jelly'}
end
def hash2
    {:bread => 'whole wheat'}
end
%sandwich{hash1, hash2, :delicious => true}/
</pre>
<p>Uhhh, wait a second. I thought HAML was supposed to be shorter and simpler. I dunno about you, but this does not appear shorter <strong>or</strong> simpler to me. Maybe that&#8217;s just because I&#8217;m not a Ruby developer. Or maybe that&#8217;s just because at the point where I want to write HTML, I want to write stuff that looks like&#8230; HTML.</p>
<p>Moreover, if I have someone whose specialty is HTML and not Ruby, I <strong>really</strong> don&#8217;t want them trying to write such Ruby code. But maybe that&#8217;s just me.</p>
<p><strong>Update 4/27/2010</strong>: John commented to suggest a shorthand for the above in HAML:</p>
<pre class="code">
%sandwich{:bread => 'whole wheat', :filling => 'peanut butter and jelly',
:delicious => true}/
</pre>
<p>Certainly this is better than the above (although still inferior to HTML itself IMHO), which by the way came from the official HAML documentation (not me that made that up). I&#8217;m sure they did that to demonstrate how you can override properties with subsequent hashes, etc. But as I said in response to John, the fact that the more complicated form is what&#8217;s found in the HAML documentation will probably lead to more &#8220;newbies&#8221; like me thinking this is the standard way to do HAML. I have the same problem with the thousands of .NET MVC tutorials on the first few pages of Google SERP&#8217;s that tell people the completely wrong way to pass data from the Model to your View. If you document the bad practices enough, the bad practices will become the de facto standard. This is bad. Very bad.</p>
<h4>When writing HTML, I should be writing&#8230; HTML</h4>
<p>Perhaps I should state rather than just imply a bias I have here: if I&#8217;m in the mode of doing front-end (HTML) development (&#8217;cause I know a lot of us wear many different hats from front-end dev to back-end dev in our jobs), I want to think in HTML (not something else) at that point in time. Just like when doing back-end app development, or when building out database schemas, I darn sure don&#8217;t want to care (at that moment) about the eccentricities of cross-browser CSS and box-model support.</p>
<p>I think this kind of role separation (and thus skill separation) makes my job easier. It makes is clearer what I&#8217;m doing at any given point, instead of trying to blur syntactical lines between various technologies in the name of convenience.</p>
<p>I just find I work more effectively when I do only what is necessary for a given task at any one time.</p>
<h4>Templates and Code Logic should not mix</h4>
<p>I feel like this point is almost so self-obvious, I&#8217;m boring you by mentioning it. But yet time after time I see various platforms and frameworks (everything from .NET to Java to PHP to RoR to HAML to everything else in between) making exceptions to these rules, in whole or in part, and allowing (or even encouraging!) you to add some host language logic directly inside your templates.</p>
<p>I guess the logic follows that if you&#8217;re a Ruby developer, and you&#8217;re also tasked with doing front-end (HTML) development, you won&#8217;t mind mixing the two in your mind, using Ruby code logic to assemble your templates and data.</p>
<p>Well, that&#8217;s great until you hire a rock-star HTML/CSS guy to make templates who has zero knowledge of Ruby. I suppose you just hand him a Ruby book and say, &#8220;good luck.&#8221;? Or what about if you decide at some point to change the back-end platform technology you&#8217;re using from Ruby to say Scala or Erlang or PHP or whatever. What becomes of all your templates? Do you keep the Ruby based stuff, or do you ditch them entirely and re-write all your presentation layer as well?</p>
<p>And, btw, how does your development team make decisions effectively about what&#8217;s ok to be Ruby embedded in your templates, and what must be in the controllers? How do you train new developers to your team how to effectively make these decisions quickly right along side all your seasoned developers who&#8217;ve stubbed their toes on those topics for years? How do you decide, philosophically, if logic related to formatting (say a date or currency) is logic that should belong in the templates or in the controllers?</p>
<p>You see, in my opinion, all these questions are harder <strong>because</strong> you&#8217;re using a system that&#8217;s more flexible, more powerful, more complicated than it <em>needs to be</em> or <em>should be</em>. </p>
<p>Just because I <em>can</em> hammer a nail in with a sledge hammer doesn&#8217;t mean that&#8217;s the most effective tool for the job. If I have a little hammer suitable for the task, I think it&#8217;ll be more accurate and efficient to use it than the big sledge hammer. And that&#8217;ll also be true when I hand off the task of nailing things in to a new person who&#8217;s never used the sledge hammer before.</p>
<p><strong>Point:</strong> You don&#8217;t need the power of Ruby to construct templates. If you do, you&#8217;re doing templating wrong &#8212; again, in my opinion. Templating only needs a few simple constructs to be effective. Anything beyond that <em>should be</em> in your Controllers. At least, that&#8217;s what we were all taught in our CS classes when we learned about the proper Object-Oriented approach to MVC and we had it drilled into us that the &#8220;M&#8221;, the &#8220;V&#8221;, and the &#8220;C&#8221; should be separate. How quickly we abandon &#8220;separation&#8221; when it becomes too convenient in the heat of the moment.</p>
<p>I love <a href="http://twitter.com/KentBeck/status/8637230540">this quote I just read</a> on twitter: &#8220;good programmers appreciate the features you put in. expert programmers appreciate the features you left out.&#8221; (via <a href="http://twitter.com/KentBeck">KentBeck</a>)<br />
<h4>Portability</h4>
<p>I&#8217;m also not a fan of having to use more than one templating system. By this, I mean, it is a reality of <strong>most</strong> (even mildly) complex web apps that there are two classes of templating: build-time (on the server) and dynamic (run-time, in the browser, with user input). Of course, various web apps have a different mix, and if you&#8217;re in the small class that is entirely one or the other and always will be, just skip over this point.</p>
<p>However, for the rest of us, almost nothing upsets me more than having to repeat myself. We&#8217;ve all heard DRY (don&#8217;t repeat yourself), but I don&#8217;t just quote that as a nice-to-have, I try hard to live by it in my development career. I am not 100% sure, but I&#8217;d hazard a good guess that it&#8217;s impossible to use the exact same templates (with Ruby logic and all) in both a server environment and a client environment. Moreover, even if there is a port (to JavaScript) of the HAML interpreter that could run in the browser (with alternate templates of course), this is of course two different separate copies of a templating engine that must be independently maintained.</p>
<p>A fundamental &#8220;law&#8221; in Computer Science is that anytime there is more than one copy of something, one copy is always wrong. That&#8217;s where DRY was born from. And it goes for tools as well as content.</p>
<p>You may be saying to yourself, &#8220;wait, that&#8217;s not possible with any templating engine.&#8221; Ahh, but it is! Stay tuned, in a (soon) future blog post here I&#8217;ll be talking about a templating engine I&#8217;ve built which can do just that.</p>
<p>You know what technologies <strong>can and do</strong> run in both contexts? JavaScript and HTML. Anything other than that, and you&#8217;ve almost certainly failed this point. Game over.</p>
<h4>One more thing</h4>
<p>One last point of contention: I am unable to confirm how HAML handles &#8220;compilation&#8221; of templates. If it does so on-the-fly, every time, at run time (since it also has to execute Ruby code to drop in data), then this is more inefficient to convert from shorthand code to raw HTML each time.</p>
<p>If however it has some sort of two-pass compilation, where at build time you compile the shorthand HAML to raw HTML, and then at run-time you execute the embedded Ruby to drop in data, then this is probably a better approach efficiency wise. </p>
<p>Still, the point remains, that type of technique is important for performance, and it&#8217;s not very common amongst most templating solutions.</p>
<h2>Enough already</h2>
<p>OK, that&#8217;s enough ranting for one post. Again, the purpose here was to lay out what I don&#8217;t like about HAML. The underyling frustrations however are not specific to HAML but are true of many, many templating solutions. So up coming will be posts where I try to be more constructive and offer some solutions. Hopefully you&#8217;ll find this dialogue helpful. That is of course if you haven&#8217;t already written me off as being a crazy, eccentric, opinionated technology bigot.</p>
<div><a class="addthis_button" href="//addthis.com/bookmark.php?v=250" addthis:url='http://blog.getify.com/why-i-dont-like-haml/' addthis:title='Why I don&#8217;t like HAML '><img src="//cache.addthis.com/cachefly/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a></div>]]></content:encoded>
			<wfw:commentRss>http://blog.getify.com/why-i-dont-like-haml/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Content Delivery Network via getiblog.2static.it

Served from: blog.getify.com @ 2012-05-18 09:38:01 -->
