The old saying goes, if you throw a frog into boiling water, he will jump out quickly. If you put the frog in a pot of water and slowly increase the temperature, the frog will remain in place even when the water is boiling.

Few people like to eat frogs. Fewer would like to BE the frog. When it comes to applications, HTML + CSS is a pot of water that has been heating up for years. We, the developers, are frogs in the middle of frothing foaming water.

I've made countless web pages using HTML + CSS and have no complaints about the technological combination for Internet documents and pages. The rub comes when trying to make an application. Note the distinguishing factors. HTML + CSS is a horrid combination for making applications.

To be true, the HTML + CSS isn't truly the problem, the problem lies in inconsistent rendering by the clients (browsers). However, a large part of my job is making sure an application works, not debating with users which browser renders 'correctly'.

When building an HTML + CSS based application, there will be some unanticipated time required to track down and hack around a strange edge case or rendering bug . The time spent to track down the source of the error, which by the way only happens in IE version 6.0.23234234 and in Firefox 2.098435 and not Firefox 2.102309, is lost time. I've even spent 8 or 9 hours tracking down the source of a CSS related problem, googling around, reading blogs to find a solution and then testing all the various browsers using various user interaction permutations to verify the fix didn't break another client implementation. While spending this time was necessary for the success of the application, I would have preferred to spend that time towards building another useful feature for the users.

HTML + CSS solutions are riddled with hacks and require the developer to not only be skilled in the 5 languages it takes to build a web application ( HTML, CSS, JavaScript, SQL and <insert serverside language here/>), but to be equally skilled in the nuances prevalent in each platform, including major and minor versions. This page here (http://www.positioniseverything.net/articles/ie7-dehacker.html [1]) , lists some of the hacks used to get CSS to render consistantly across platforms. While I find the motivation, creativity and tenacity of the developer who discovered the "Holly Hack" or the "Star Hack" I find the necessity of it all to be very sad.

CSS3 doesn't appear to hold much hope either. Frankly, I've been waiting for "The Next Version of IE" or "The Next Version of CSS" to fix it all for some time now. Face it, it isn't going to happen. To quote Alex Russell [2], of Dojo Fame,

In my “Standards Heresy” talk I noted pretty bluntly that CSS 3 is a joke. A sad, sick joke being perpetrated by people who clearly don’t build actual web apps. If the preponderance of the working group did, we’d already have useful things like behavioral CSS being turned into recommendations and not turds like CSS namespaces and CSS Print Profile. And I’m not even sure if the “Advanced” Layouts cluster-fsck should be mentioned for the fear that more people might actually look at it. You’d expect an “advanced layouts” module to give us hbox and vbox behaviors or a grid layout model or stretching…but no, the “answer” apparently is ascii art. No, I’m not making this up. It’s sad commentary that you can propose this kind of dreck at the W3C and get taken seriously.

One 'trick' in HTML + CSS is creating two columns of equal height. There is even a nicely done screencast http://css-tricks.com/videos/css-tricks-video-5.php [3] helping others get familiar with the technique. As a developer who has struggled with this problem before, I am intrigued. As an application architect, I am appalled that a Screencast is needed to help developers understand better how to make two columns of equal height. Shouldn't this be a basic function of any self-respecting application layout paradigm?

For my application development, I prefer to use Adobe Flex [4]. Flex, is no silver bullet either. It is controlled by a vendor, requires new skills, requires a plug in, etc etc. One thing it can do is make two columns of equal height. No, really, it can.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="horizontal"
	width="100%" height="100%"><mx:VBox width="50%" height="100%">
		<mx:Text text="Column 1"></mx:Text>
	</mx:VBox>

	<mx:VBox width="50%" height="100%">
		<mx:Text text="Column 2"></mx:Text>
	</mx:VBox>

</mx:Application>

Vertical alignment is another example where HTML and CSS fails. When creating consistent user interfaces vertical alignment is critical. Flex handles vertical alignment easily with the addition of the verticalAlign=”middle” attribute. Let's look:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="horizontal"
	width="100%" height="100%">

	<mx:VBox width="50%" height="100%" verticalAlign="middle">
		<mx:Text text="Column 1"></mx:Text>
	</mx:VBox>

	<mx:VBox width="50%" height="100%" verticalAlign="middle">
		<mx:Text text="Column 2"></mx:Text>
	</mx:VBox>

</mx:Application>

Another difference is in debugging. Thankfully Joe Hewitt wrote the Firebug extension for Firefox. Without his efforts, I would still be stuck in a morass of Alert based debugging and random guesses to fix my JavaScript, CSS and HTML errors. With Firebug, I can solve 80% of my problems fairly reasonably.

The other 20% of problems arise from Internet Explorer. There is little to no help with debugging on this platform. I fall back to Alert based debugging or the old Divide and Conquer method (comment out half the code, run it, look for error. If error exists, comment out another half and test again).

In Flex, not only do I get compiler warnings and errors, I have a step debugger to help me walk through the application at runtime. I can set break points, step through code, examine data structures in memory and other very helpful debugging tasks. Now I spend more time building useful features, rather than chasing strange oddities. Developing with the Flex platform feels solid, consistent and quite different from the patchwork quilt of HTML + CSS + JavaScript.

Lastly, HTML + CSS applications are decorated with dynamic functionality using JavaScript. I started out writing raw DOM functions, appending nodes and parsing XML like it was going out of style. Next I adopted the use of JavaScript frameworks to better manage complexity and increase productivity. I started with simple Dom Helper functions, switched to mootools, moved to DoJo, then to Scriptaculous, then finally JQuery. I enjoyed working with each of those frameworks, especially JQuery, which I find to be quite brilliant! Still, none are as fully featured for creating applications as the Flex framework. Going backwards, I now have many applications that use arcane and out of date versions of those frameworks. While I used the best available framework at the time, I now have forgotten the nuances of mootools, DoJo and Scriptaculous and if something breaks, or I need to make some enhancement, I guess I'll have to relearn those frameworks.

With the Flex framework, I get vendor support, a consistent release cycle, great tooling/debugging and a commercially supported package that will run consistently across platforms. Along with these benefits, comes the power to write game changing applications such as the tools by a.viary [5], blist [6], smallworlds [7] and buzzword [8].

I expect not everyone will agree. To be clear, I've made mortgage payments with the money from HTML+CSS applications. I've bought groceries with the cash made from using JQuery to power some seriously cool business applications. I don't 'hate' HTML, CSS or JavaScript. There are many people smarter and more talented than I who champion that particular technical trinity and amazing things have been created using that tool set.

What I hate is shoehorning an excellent application concept in between a minefield of platform inconsistencies. I hate having to learn the nuances of platform point releases. I hate that a 3 column liquid layout is nearly impossible without dramatic CSS sorcery. I hate watching the governing standards bodies do very little to practically address the market needs for an application layouts and I hate that it will be a cold day in Hades before the even the diluted 'recommendations' are implemented in any reasonable way across any reasonable number of clients. After all, the CSS 2 spec was 'recommended' in 1998 and STILL isn't fully implemented.

All that being said, can't we as application developers demand a solid platform on which to base our applications? A platform that understands simple requirements like constraint-based layout, vertical alignment, multi-column layouts without having to be floated, patched and hacked?

Am I asking for too much? Will CSS 3 or CSS 4 save us? Is HTML pretty much dead for applications? What do you think?