HTML - Machine code for web pages

Writing web applications using HTML is like writing business logic in machine code.

When you write your web application using HTML directly you lose most of the benefits that the software development world has worked hard for:

  1. No re-use
  2. No compile time safety (type checking, validity of names, valid use of tags, etc...)
  3. Hard to understand code

I'll quickly explain what I mean by each of these.

No re-use

Most templating languages don't allow you to re-use HTML snippets. If you want your buttons to be a span of text surrounded by two img blocks (e.g. the left/right ends) then you will have to copy and paste this snippet everywhere you want that style used:

<a href="somelink">
  <div class="button left" />
  <span>Click me!</span>
  <div class="button right" />
</a>
Even worse, as soon as you want to change that style you're going to be changing a lot of HTML that is largely the same.

Some folks will want to tell me that this could be done with a single a tag and clever use of CSS. Unfortunately, this isn't always supported by older browsers and it isn't always easily cross-browser compatible. Sometimes, you just have to write horrors like the above.

Some templating languages allow you to re-use HTML by doing function calls:

<?php button("somelink", "Click me!"); ?>

This isn't too bad, except it's done at the cost of #3 - your code loses it's clarity as you start to switch from HTML to PHP and back again (it's not just PHP that suffers from this).

No compile time safety

Let's take a trivial example:

<strong><em>Hello there!</strong></em>

Oops. We've just written bad XHTML. Not only is this bad XHTML but some browsers will struggle to make sense of this as HTML as it's just confusing.

This isn't the worst of it either. We're prone to forgetting closing tags, using the wrong tags, using variables that don't exist... and most of this isn't found until runtime.

Hard to Understand Code

I'll go back to my earlier button example:

<a href="somelink">
  <div class="button left" />
  <span>Click me!</span>
  <div class="button right" />
</a>
If you saw this amongst a lot of other HTML you'd have to stop and think about what this HTML is actually doing. Wouldn't you rather just express yourself and say "I want a button that links to page X with label Y"?

The Root Cause: Working at the Wrong Level

I think that the root cause for these problems is that when we're writing HTML we're working at the wrong level. It's like working with machine code. Instead of thinking:

I want a header here, some text here and a button here"
We're thinking:
I want a h3 tag here. A div here with a few p blocks in with my text in. Another div here for my button, containing two images and some text... oh, and the hover text! Must not forget the hover text!

And this is very low level thinking - just like when working with machine code.

Bringing in the Semantics

How about we write our page more like the following?

section(name="Contents") {
  The contents go here.

  We use an empty blank line for paragraph spacing. } button(link="somelink", label="Click me!")

This could then be compiled and the output could use HTML snippets. HTML snippets carefully crafted by our lovely designers to ensure consistency throughout the app. For example, the button in the above could expand out to the HTML I specified above.

We're now expressing our front end at the right level. Further, by having the above use HTML snippets provided by designers we maintain the ability for designers to edit HTML carefully and correctly - they then become similar to the machine code wizards who write the compilers :)

Where next?

I've been working on implementing something similar to this style of writing views for some time now. Within the next week or two I'll be following up with a blog post to share it.

Until then, I'd love to hear any comments on this approach.

Discussion

blog comments powered by Disqus

Colin Howe

I'm Colin. I like coding, ultimate frisbee and startups. I am VP of engineering at Conversocial