Web GUI tools – Not as different as they seem

This is a sort of follow-up (a 3 pager) to my recent blog "Still on a fence about GUI?" I think there are roughly two groups of people who are still on the fence: those who have tried various options and understand their differences, and those who don’t yet realize that almost all of the popular options are pretty much alike.

I’m going to coin a term here and let’s see if it sticks: JACXX ("jacks"). This represents a class of tools that make use of the following technologies:

• JavaScript
• AJAX
• CSS
• XML
• XHTML

Why is AJAX in there, and why isn’t this AJAX? Because Ajax is about the communications between client and server. I’m talking about the tools we use to create the user interface, independent of the communications – these are completely different areas. Ajax is a component of this development paradigm, and Ajax itself isn’t a specific technology, it’s a concept. With Ajax your exchanges may not necessarily be Asynchronous, and in fact most Ajax exchanges aren’t at a certain level. And with Ajax, you don’t necessarily need to use XML for transport – you can use JSON. So strictly speaking Ajax isn’t always AJAX, but the core concept of partial postbacks is always a component of JACXX.

Why are XML and XHTML both in there when XHTML is a form of XML? Well, most development in this area makes use of a custom XML dialect or schema which ultimately results in standards-compliant XHTML. You can’t render this code directly in a browser but you can run it through a pre-processor which then generates the proper XHTML for whatever browser/device the client happens to be using. This sort of coding usually involves a combination of basic XHTML tags plus some special XML markup.

Here is an example:

<div style="position:absolute;top:100px;left:200px;">
  <vlist id="animalchoices"
      rotation="45" bgimage="paws.jpg">
    <selection order="1" value="kitty" text="Cat"
      selectaudio="meow.au">
    <selection order="2" value="puppy" text="Dog"
      selectaudio="woof.au">
  </vlist>
</div>

In that well-formed XML code, wrapped in a valid XHTML Div tag, I’ve defined a vertically oriented listbox that will be rotated 45 degrees (no idea why). It has a background image that looks like litte paws, and the options for the user will include Cat and Dog. When you select either option, some script will be executed to make a related sound. (Too cute for my taste but it’s an example of glitz over pragmatism.) You won’t find that <vlist> syntax anywhere else because I made it up, let’s call it TGML, the new (fictional) TonyG Markup Language. To convert TGML to something you can see in a browser you need to run it through a pre-processor. This will parse the XML and render appropriate HTML, CSS, and Javascript code for whatever browser happens to execute it. Magic? No … that’s what most of the JACXX tools out there these days do.

Let’s take a quick look at what’s out there, the links point to examples of the JACXX used to create the various UI’s.

• Silverlight with XAML (this example happens to be with IronPython for those who think Silverlight is all about C# and VB.NET)
• Flex with MXML
• ZK with XUL and XUML
• .NET with ASP.NET or WPF (XAML)
• Java with SWIXML or Pustefix (that’s some scary code)
• Google Desktop and the Google Gadgets API
• Zen for Caché
• OpenLaszlo

You probably won’t find XML widgets for PHP because PHP directly generates HTML in-line – to my knowledge there is no middle-tier between the PHP runtime and the web server, though I admit my knowledge of options in this area is very limited, and I’m sure someone could write a middle-tier if they were so inspired. When you’re using PHP you generally use a JavaScript code library, like YUI and ExtJS, no XML-as-UI components. When this JS code is pushed into the browser, it’s executed and the script then generates the UI components.

While I have a great appreciationg for YUI, ExtJS, and other library/frameworks like them, I really don’t want to use them as my primary development tool. Why? No WYSIWYG. I don’t rely on a WYSIWYG IDE for GUI development, but it sure does help when you can see where things go without constantly needing to execute, shift things around, execute again, shift again… Frankly I find that sort of development to be very primitive – and I find it amazing that so many people still insist on wasting their time writing code like this.

Aside from the YUI and ExtJS examples, the consistent theme with all of the other tools and technologies mentioned is that they use XML to assist with WYSIWYG development, they use XHTML for structure, CSS for styling, and JavaScript for behaviors and DOM control. (That last sentence was pretty much ripped off from the NetVibes project – hey, it’s a perfect explanation of what I’m talking about here. NetVibes makes use of a Universal Widget API (UWA) which allows you to develop a widget and deploy it in a variety of platforms.) The non-XML libraries (JACX if you will, compared to JACXX) still fall into this category, but they lack ability to make use of XML markup for WYSIWYG development.

So as you shop around for the perfect languages, tools, and IDEs to build your GUI, at least understand one thing – the popular ones are pretty much all alike. Some people will say "I don’t like XAML" when it’s really the same as MXML. People eschew ASP.NET when the "brand spankin new" Google Gadgets is built using pretty much the same code. And when someone tells me they prefer ExtJS to YUI, my response is "what the heck is the difference?".

OK, that’s taking it a bit far. There are subtle differences between them at the detail level but at the macro JACXX level, it’s all the same. So the first thing someone looking to build a GUI needs to do, is to acknowledge that the paradigm is most likely going to be JACXX, you just need to decide what tools you prefer for doing JACXX. This doesn’t get you off the hook, in that you still need to understand all of the underlying technologies: JavaScript, Ajax, CSS, XML, XHTML. That’s where I see some people getting hung up. They say "I don’t want to know all of that, so I don’t want ASP.NET, I want YUI." Errr, you still need the same skillset. The question that needs to be asked is: what else does the ASP.NET framework provide around these technologies, and how does YUI, ExtJS, Flex, and all of the others compare? Well, one big difference we’ve seen so far is that Flex and ASP.NET make use of WYSIWYG for fast UI configuration, where YUI and ExtJS don’t. Other objvious differences are recognized as you start to use the tools.