Why I hate HTML

There is a wave of wondering on Twitter, why Microsoft speaks so little about Silverlight on this year’s PDC conference. Mary Jo Foley even goes so far citing Bob Muglia saying that Silverlight is [only] the development platform for WP7 apps in her provocative article “Microsoft: Our strategy with Silverlight has shifted”.

I’m not sure if Muglia is an authoritative source of information though; judging on his replies on the key talk I’m not sure he was able to fully understand the technology he was speaking about.

I would rather see the HTML5 vs. Silverlight topic as publicly visible part of an iceberg of some very political power struggles inside of different Microsoft teams. You know, that kind of thing nobody in the world really needs besides a couple of hungry narcissistic managers.

Anyway, this has made me to reflect, why am I so vividly hating HTML. And this is the story I’ve came up with.

When I’ve started to learn programming, the relevant articles were printed in electronics magazines, somewhere inbetween of discussions about the most economic way of building an SW antenne and problems of making printed circuit boards at home. At those times, there were only two languages to be used for freaks like me: Assembler and BASIC.

One of my first programs in BASIC has printed a red box and looked like this:

10 LINE (10,10) – (50,10)
20 LINE (50,10) – (50,50)
30 LINE (50,50) – (10,50)
40 LINE (10,50) – (10,10)
50 PAINT (11,11), 4

And it was kind of cool. Ever since that time, I use the red box test as one of the first tests when I start using a new programming language.

Being able to paint a red box on the screen is a quite important step of mastering a language, because, after all, any UI can be seen as more or less complex set of filled polygons. Of course, you wouldn’t always compose the UI from polygons (unless you’re developer of a 3D engine), but, “if nothing else works”, it is nice to know you have a “plan B”.

In Silverlight, the red box test looks like this:

<Rectangle Canvas.Left=”10″ Canvas.Top=”10″
Width=”40″ Height=”40″ Fill=”Red” />

In some aspects, it is arguably worse than the BASIC version. In essence, what Silverlight (together with your GPU) does is translating this XAML into a sequence of operations equivalent to the BASIC snippet above, but you as a developer don’t have possibility to control this sequence. And less control is always worse than more control. Besides, the XAML is a little too wordy and inconsistent: in some cases you use “Fill”, in other cases “Backround”; sometimes you use “Width” and “Height”, in some other times you’re allowed to use “Rect”, and so on. But, all in all, it is quite concise and readable representation of your intent.

Now enter HTML. I’ve never worked with HTML5, but passing the red box test in HTML 4 was a quite non-trivial task. For starters, you don’t have any figures. If you’re lucky enough and your box is really rectangular, you can misuse the DIV element. Well, actually, it is a hack, because it is supposed to be just a container of other elements, not some visual form on the screen. But, hey, who cares.

So, my first try was

<DIV width=”40″ height=”40″ background=”#FF0000″ />

which, of course, has failed. For some unknown reasons, I cannot set those values as direct attributes of DIV. I have to use the CSS language instead. I don’t quite understand, why “id” and “style” and “cssClass” and “name” are all valid direct attributes of DIV and “width” isn’t. But, again, it is HTML. Milliards of folks on this planet have installed a web browser ready and waiting for my HTML app, and that’s a reason good enough to endure any hacks.

So, my second try was

<DIV style=”width: 40px; height: 40px; background-color: #FF0000″ />

that has failed again. To make it work, I had to add some content inside of the DIV:

<DIV style=”width: 40px; height: 40px; background-color: #FF0000″>
&nbsp;</DIV>

Strangely enough, now it works even without the &nbsp;, at least on my IE9 Beta. Am I missing something or has the standard changed?…

Now, the next step was moving this box at position (10,10). I’ve added setting of “left” and “top” properties into the style, but this has failed to work again. After the third defeat in a row, I have given up. Eventually, I’ve learned the magick of “position” and different placement models. But it was too late, I have already pronounced my judgement.

HTML is not a language to be used for application development.

You cannot reflect your intent in a concise and readable way when using it. It is kinda nice for making an occasional word bold or italic. Or even place an image with a textflow around it. But developing something like Outlook Web Access with this stuff… No way! You have to be a reckless hero on drugs to be willing doing that.

Now, I’m hearing that HTML5 introduces the concept of canvas. Drawing a red box on this canvas would look like this

var ctx = document.getElementById(‘canvas’).getContext(‘2d’);  
ctx.beginPath();
ctx.fillStyle = “red”;  
ctx.moveTo(10,10);
ctx.lineTo(50,10);
ctx.lineTo(50,50);
ctx.lineTo(10,50);
ctx.lineto(10,10);
ctx.fill();

Welcome back to the BASICs. In 1980-ies, every PC in the world had BASIC and was ready to paint red boxes. Now, in 2010-ies, we will eventually have a HTML5-enabled browser on every PC in the world, and it will be able to paint red boxes.

I wonder, what kind of middle age has happened between 1980 and 2010? Wasn’t by any chance HTML the reason of this regression? And why should I ever trust this four-letter word?..