Web Development as Tag Soup

Two things which work better than the tag soup tools you mention:

GWT – create your UI programatically, rather as you would with a GUI toolkit, getting all the type safety, reuse and refactoring support you expect.

Tapestry – You still have HTML templates with expressions in an expression language embedded into them, but the emphasis on creating reusable, parameterised components, and the matching of view components in your HTML to model components in your server side actions makes your pages much cleaner (http://tapestry.apache.org)

Jeff,
I feel you with the tag soup, especially in classic ASP. However, I just do not run into that in .NET 2.0 and later. I find that after combining user-controls, web custom controls, and judicious use of the render method that I’ve eliminated most server code from my HTML.

I’m so adamant about server code being mixed with my HTML that I’ve gone on a mission to make my teammates abandon the practice. Overall, our project may contain more user-controls but ever since we’ve found better ways to utilize web custom controls these multi-filed pieces have been removed.

The only time I’m finding myself using server-side code is when I’m working with JavaScript. Even now, though, I’m coming up with ways to build a set of best practices for our team to eliminate this server tagging.

I think you just need to revisit why you are needing these tags. If you’re building a list or table, would this not be better done using XSL and XSLT (hopefully on the client; offload that work to the browser!)?

It does seem that the two approaches are to either output html with functions, or to intersperse it. I generally use PHP or perl at work, which means for the most part I do the interspersing.

Moving everything into functions will make the view look cleaner, but I’ve found that you can still end up with a situation where making the markup valid requires knowledge of what is inside those functions, so that ends up making the problem more difficult in the end, or it can.

Reducing it to just loops and printing helps.

I do find the lisp approach interesting though:
(dashes mean spaces)
(yaclml:with-yaclml-output-to-string
–(:html (:head (:title Hello, world))
----(:body (:h1 Hello, world)

A small amount of tag soup is unavoidable (but done right, it is delicious soup!)

My solution when it comes to things like a CMS is to write a simple (although fairly crude) scripting language within the HTML that is the page content - this way the PHP/HTML soup is minimal, elegant and stupid and the logic is folded into the data.

To some extent, I do this in other areas, such as a navigation menu with sub menus displayed as a list. I will create a simple (not XML!!!) way to store the menu items in a plain text file, and parse that with PHP. An entry might look like:

text | tooltip | url | sub-menu filename | rule

Home | Return to home page | ./ | index.nav | group = any
Admin | Administer the website | ./admin/ | admin.nav | group = admin

And in the end, as long as you are clever with your CSS, tag soup is really only a few small a/ul/li/p/div elements here and there - if you’re overwhelmed by messy code, it’s probably a sign that your HTML is to blame.

Some thoughts on view language design (interesting mostly only if you’re designing frameworks): http://lhorie.blogspot.com/2008/07/designing-maintainable-view-code.html

Hi guys, here is what your’re looking for : TinyButStrong PHP template engine system. The best template system i’ve ever know.
Look at the article Doing PHP templates of the 3rd kind : http://www.tinybutstrong.com/article_3rd_kind.html
The syntax is clear and powerful, it really SEPARATE the program (php) from the view (html+tbs syntax).
It’s under GPL, and way faster than smarty. Powerful modules, great help, … a must have.
Take a look at the Examples and Why use it? and 5 Golden Rules (http://www.tinybutstrong.com/support.php#goldenrules) and of course Manual.
I’m actually writing a tuto about PHP 5 Objects with TBS, stay tuned !
(structured website)

And I’ve recently receive my CodingHorror Tee-shirt, sweet !
TiTi from FRANCE.

XML+XSLT /could/ be an answer to this tag soup stuff. Or some XML-based template engine.

Still, I think formatting your templates correctly will help a lot, even if you put in snippets of PHP/ASP/whatever.

That HAML stuff is scary. Is it supposed to be readable? =)

I second the comment on GWT…it truly is the best way I’ve seen to do a non-trivial web application developed by a team. You can brute force any framework/style on a trivial application and we’ve all written code that you’re the only one who’s ever going to see. GWT forces you to abandon all the bad behavior that we somehow accepted when we switched over to the web back in the old days. Traditional heavy GUI application development has all the right implementations, but the web forced us all to bail on them. Interestingly, I’ve seen very, very strong web developers struggle with GWT since it forces a rigor and style of thinking that they’ve never been accustomed to. If you’ve written apps in Swing, SWT or any of the traditional Microsoft UI tools, it’s the way to go.

This is exactly why I’ve been so keen on placing as much of my code in the code behind files as possible while developing ASP.NET applications. For example, even though you can insert tags that show what value a control should be bound to, or what method should be called when I click a button, I want those declarations done in C# (or VB.NET) to provide clearer separation, and in my opinion easier reading.

There still is a code behind file for the view in MVC isn’t there? It’s been a while since I’ve taken a look at it. Couldn’t that provide a way to ease some of this pain?

One of the more elegant-looking solutions to this problem that I’ve found is PhpSprockets (http://code.google.com/p/phpsprockets/). It generates valid X/HTML in PHP so it becomes much easier to write your entire page in PHP. I haven’t used it, though, so I can’t say how good it is in practice.

I don’t think that flex and/or silverlight fix the problem of effectively marrying code to html, because they don’t output html. It’s not an apples to apples comparison, and not relevant.

The problem, you see, is html! I don’t need another syntax that will, if it’s to be as powerful (or broken) as html, will end up being almost, but not quite html.

It’s very hard to create html that uses javascript (ie ajax) and proper css that really does work cross browsers for a decent sized web application while keeping everything easy to maintain / change and standards compliant and localized/globalized.

There are also TAL markups ( http://www.zope.org/Documentation/Books/ZopeBook/2_6Edition/AppendixC.stx, http://phptal.motion-twin.com/introduction.html) wich make the xhtml code to look like real xhtml.

I found Amrita (http://amrita.sourceforge.jp/docs/QuickStart.html) to be quite interesting approach. Didn’t try it yet though.

I use jquery’s taconite plugin to avoid getting code into the presentation layer.

Have a look at smalltalk seaside. I don’t know if it’s a better way, but it’s at least a different way.

Hmm… Java lets me easily define my own custom tags (parameterized and all) which cleanly separates the code out of the way. No need to mix tags and code (the older versions were doing this since they copied the MS ASP approach, thankfully that is no longer the case).

Look, it’s programming 101. Break up the routine into smaller, saner chunks. Partials and user controls work fine.

On the java side, have a look at Wicket (wicket.apache.org).

Cleanly separated view template from code, small reusable visual/logical components, no tag soup at all.

Jeff, you may be interested by the TAL or Kid/Genshi approaches: instead of creating a new template language mixed in with the markup (or putting raw code directly as RHTML or JSPs do), they augment existing markup with custom attributes.

This has the following advantages:

  • Usually, they mandate xml well-formedness, which means your output should always be well-formed
  • Browsers ignore custom attributes (usually), which means you can preview the raw template code… most other template languages don’t allow that
  • They have access to existing XMLy technologies (e.g. Genshi uses XInclude for fragment inclusion)

I do prefer Django’s approach though (a very restricted template language, forcing the logic either in custom template tags or in the controller/view code)

We’ve extended our PHP5 framework to auto-generate XML output. It also expects processing instructions and apply the linked XSL docs accordingly.

We’ve found it greatly reduced the amount of code we had to write - its now down to some form-processing logic, a bit of SQL, and XSL.

Using XSL as the templating language has other benefits too - we can call back to the framework and grab rendered XML for other pages (shopping carts and tag-clouds, for example), we can use the XPath doc() function to request page fragments from other sites, and we can easily switch output from HTML to JSON by switching the stylesheet.