A Stack Overflow Podcast throwback: What is to be done about tag soup?

Question

A few weeks ago, in episode 14, Jeff and Joel were HTML, LINQ, Rails, et al:

Atwood: Even in Rails land, where they have the flexibility of essentially redefining the language at will, to solve all these problems -- at a steep performance cost, obviously, but still, the productivity is worth it -- they still, if you look at the HTML that they emit, it's still a mishmash it's basically tag soup. It's like HTML tag, and then a left-begin tag ...

So my question is: what's the best solution?

My assumptions:

1. we need to generate dynamic content
2. templates are good to avoid reduplication
3. 1 + 2: there is some code-markup interface level; they cannot be completely de-coupled
4. at some level, somebody has to understand code
5. at some level, somebody has to understand HTML (or whatever rendering language)
6. 4 and 5 don't need to be the same person, but they need to communicate well
7. People who do 4 and 5 well are expensive and rare.

My favorite so far is the Apache-style: prefer custom tags over code in your template files. I love Ruby and Rails, but I think ERB is all wrong (and HAML, while prettier, isn't really any better).

(I was probably unclear on what I meant by "Apache." I think I meant "Apache JSTL," but it's been a while since I was in Java-land. I definitely meant custom tags, so programmers can build classes that implement some Tag interface, and designers can simply use them like HTML.)

Answer 1

I'd disagree with your comment about Haml. It gives you a very clean separation of the markup and the code that is sprinkled within your markup. For the most part, you don't have code mixed with markup at all -- the markup is on the left, the code is on the right. You can, of course, mix things if necessary, but it's more like the exception rather than the rule.

Ultimately, I don't know that there is a "best". All you can do is try to reduce the things that cause problems (mismatched tag endings, code spread all over the place, etc), and that's where Haml succeeds admirably.

Answer 2

Custom tags are really a good way to go. In .NET land, this would be .ASCX or composite controls. They are an excellent way to encapsulate functionality that will be re-used on mulitple pages, and they aren't too confusing to a designer. You should never have to resort to "tag soup".

Answer 3

I'm not sure there's really a way around tag soup with our current web programming model. For instance, how are you supposed to do the following without mixing code and markup?

<?php

foreach ($events as $event)
{
    echo "<h2>{$event->title}</h2>";
    echo "<div>{$event->content}</div>";
}

?>

Answer 4

@eplawless: well, in a tag-oriented land, you'd have something like the following. (It's vaguely in Ruby, but also resembles the JSTL. Unfortunately, I don't know PHP very well.)

class ArrayTag < Tag
  def collection=(Array a)
    self.a = a
  end
  def render(IO io)
    a.each { |t| io << t.render }
  end
end

class EventTag < Tag
  def event=(Event e)
    self.e = e
  end
  def render(IO io)
    h2(e.title) + div(e.content)
  end
end

then in the view:
<array_tag collection="$events" local="$event">
  <event_tag event="$event" />
</array_tag>