backplane

Passing run-time parameters to internet applications

Determining the behaviour of an application at run-time using parameters is a well-established practice. But whilst it's possible with command-line and server-side applications, the scope for passing information to client-side internet applications is limited. With the growth in internet-facing desktop applications, widgets and gadgets, there is a need to pass parameters directly to the application, rather than via a server, and this post looks at how that might be achieved.

Ubiquity library

The Ubiquity library provides a range of open source components--from Ajax libraries to browser extensions--that work together to deliver a fresh approach to web application building.

Yahoo! uses XForms for 'write once, run anywhere' mobile applications

Yahoo! recently announced their entry into the mobile web applications space, with a service that allows applications to be built and hosted using Blueprint, a purpose-built mark-up language based on XForms.

The Blueprint roadmap describes the underlying philosophy:

Much of Blueprint's philosophy and syntax comes from XForms. We opted for a full declarative language because it was the only way we could effectively run on the wide range of devices out there, some of which have no scripting at all. By using declarative syntax, we can encapsulate and hide the scripting specifics. In some cases, the code could run on the phone, in other case, such as XHTML, we can put the logic on our servers. It's the perfect way to deal with the various environments and their capabilities.

At the moment Blueprint is simply converted to XHTML plus JavaScript for delivery to devices, but the mention of XForms gives a clear indication of where they are heading. And given that Google did something similar with the launch of its Google Mashup Language, it all bodes well for a new wave of web applications that won't be built using JavaScript (or even Java and GWT) but will use straightforward, device-independent, mark-up.

Write once, run anywhere, anybody?

For more on why XForms is Ajax on steroids, see:

Sidewinder and the need for a semantic web applications framework

A couple of recent discussions in the RDFa and microformat communities concern areas of particular interest to those of us working on Sidewinder, a semantic web applications framework.

The initial discussion is taking place on the microformats lists, and concerns how to allow authors to indicate what actions are available to be performed on items appearing in a document. The second discussion is taking place on the 'RDF in XHTML Task Force' list; this post provides a good summary of some of the issues.

All in all I find these very exciting discussions, because they concern exactly the types of use-case that prompted me to get involved with the XHTML work at the W3C a number of years ago.

This was because I'd been trying to create the kind of flexible user interface that these threads are describing--no doubt just as lots of other people had--and in my own endeavours I ran up against a number of very serious problems that made me conclude that it was pretty much impossible with the technologies available at the time. And since I still haven't seen a convincing solution to the problem of creating extremely flexible user interfaces, I've concluded that the issues I ran up against are of quite a fundamental nature.

Some of the problems that seem to me to be absolutely necessary to solve are:

  • an HTML page contains insufficient metadata about what its content 'means', making it difficult to work out what kind of UI constructs to render;
  • even were you are able to work out what the data means, HTML is not itself powerful enough to express the kinds of complex user interfaces that you would want to 'bind' to this underlying data;
  • and even if you work out what the data means and define complex UI components, you still can't define binding rules that indicate what widget to use with what data;
  • the browser offers only one 'paradigm' for interacting with information of interest, whilst we often want to create applications that can make use of the same rich features.

For every problem...

The first problem--that HTML is not 'rich' enough--is now largely solved by RDFa. It has taken quite a long time to get here, but I think the effort that has gone into getting RDFa right is going to be worth it. The key thing that RDFa does is to get RDF into HTML--once you've got that, all sorts of possibilities open up.

The second problem--that it's difficult to define rich user interfaces with only HTML--is largely solved by XForms. That XForms is a solution is currently not obvious to most people so XForms remains peripheral in application development at the moment. Of course it is possible to define widgets using script but it quickly gets very messy. There is also an enormous problem of re-use, in the recursive sense; most Ajax libraries are works of art, but very few can support the kind of complexity we need. Take the example shown here:

Metabar showing metadata for a BBC news story

Here we have widgets that are made up of other widgets to an arbitrary depth, but the key thing is that the binding mechanism is based on abstractions; it could be the run-time data type or an abstract widget type, and in both cases it means that at any point in the hierarchy a different widget could be swapped in without disturbing anything above or below. This kind of complexity is extremely difficult to achieve with procedural languages. (See also Introduction to custom controls and Understanding the MVC separation.)

The third problem--the use of binding rules to indicate which widget should be connected to what data--is still a little in the air. One part of it we've solved by specifying binding 'rules' using XPath selectors that are data type aware. This means that we can indicate that data of type 'geo location' should have one set of behaviour bound to it, whilst data of type 'time' can have a different type. These are essentially binding stylesheets and I think this is where we can answer the question posed on the RDFa list as to whether it is the author, the end-user or the browser vendor that should be in control of the widgets--the answer is all of them! By allowing users to express binding rules that override those from authors, we can achieve the best of both worlds.

Finally, the problem that the only paradigm we have for interacting with web-based data is 'browsing' is what we are trying to solve with Sidewinder. The ultimate goal is to have a framework that can be used to build any type of internet-facing application, whether web or desktop based. By allowing all applications to make use of the same semantic functionality and the same binding rules we can allow the users themselves to get control of their data and their applications. (See also Web 2.0, Copernicus and Sparticus: Moving the centre of the web.)

Silverlight clock as a custom control in XForms/formsPlayer

Once you have this kind of 'platform' (see Platform 2.0) then things really start to open up. I could build a clock widget using Silverlight, perhaps, and have that appear anywhere that the time data type is used--whether in my messaging client, my email client, my Twitter gadget, my Facebook desktop notification system, and so on. But you might choose a clock built using SVG, whilst someone else might decide to have a clock that speaks. But any of us could swap one of these behaviours for another at will, for a component we have created or one that we have downloaded from elsewhere--the ultimate, flexible, programming platform.

Ajax and progressive browser enhancement

Progressive enhancement is an approach to web development that has been around for a few years now. (More on PE at Wikipedia.) At its most basic it suggests building our web pages in a 'clean' and uncluttered way, and then layering functionality onto the mark-up using various mechanisms, such as stylesheets and scripts. The idea is that browsers without the additional capabilities can still render the page in some fashion, but those with additional power--such as scripting support--can add more enhanced features.

This principle actually underpins much of the work we've been doing on XHTML 2, which has involved taking HTML back to its semantic roots. In particular the work on RDFa has been to a large extent motivated by providing more semantic 'hooks' on which to attach increasingly focused functionality. (The work pre-dates the term progressive enhancement, so it isn't generally called that.)

But there is a new phenomena afoot, which I'd like to call progressive browser enhancement. It's something we've been doing for a while with our work on XForms and formsPlayer, but it also has wider applicability.

DOM Events and standards

To illustrate the idea of PBE, let's look at eventing in the browser. Many Ajax libraries have their own eventing architecture, and they are without exception non-standard. This is a shame, since the W3C has a standard for DOM events (DOM 2 Events) which has been around for years and is very clearly defined. Of course, part of the problem is that whilst it has been implemented in Firefox, Safari and Opera, it's not available in Internet Explorer. This meant that when we began our work on formsPlayer, our XForms processor plug-in for Internet Explorer, we had to implement a DOM 2 Events component ourselves.

This does however mean that DOM 2 Events support is potentially available for all browsers, but of course the problem now is that in order to make use of it on IE, people would have to install formsPlayer. And even if we made the module available separately (which we will be doing shortly), the problem for the programmer is that they can't assume that it is installed; there is still an annoying rift between those who have browsers with DOM 2 Events support, and those that don't.

Using JavaScript to enhance the browser

To fill the gap we simply implemented a DOM 2 Events library in JavaScript. Whilst most Ajax libraries went the route of creating their own non-standard eventing architectures, we went the other way and implemented the standard. The advantage of our approach is that if our end-user is running a browser with reasonable standards support such as Firefox, Opera or Safari, they'll get native support for DOM 2 Events, and hopefully a faster experience. Similarly, if our user is on IE and has installed the formsPlayer DOM 2 Events component, they will likewise get a faster experience. It's only the middle group using the scripted version of DOM 2 Events who will have a slightly slower experience.

But the key point is that the end-user now has some control, since they can add a DOM 2 Event component if they want to--most likely as part of some other package--independent of the actual web applications they are using. And for the authors of web applications life is much easier, since they are coding to a standard, rather than being forced to code to the specific event architecture of YUI, Dojo, or whatever Ajax library they want to use.

This is the key idea of progressive browser enhancement.

Threading in Google Gears

Another example of PBE is threading in Google Gears. There are a number of JavaScript libraries around that create simple threading by using the timer in JavaScript. This is fine for a lot of uses but can affect performance. However, we can follow the same approach as I described above for DOM 2 Events; if the function calls that the programmer makes to create a thread are 'standard', then although in normal operation the less-efficient JavaScript version would be used, with no change to the code the web application can take advantage of 'proper' threading, should a user have Google Gears installed. (See also: Ajax makes browser choice irrelevant...but we still need standards.)

Of course, most users are unlikely to be looking for a threading library to install, just as they will not be downloading a DOM 2 Events module. But if these components are small enough to be bundled up with other pieces of software they will gradually find their way onto users machines as part of other, useful, packages.

However the distribution takes place, it's the end-users of our web applications that are in control of progressively enhancing their browser, not the web application programmers themselves.

These principles have underpinned the design of Yowl, a centralised notification system for web applications.

Yowl centralised notification system

Yowl is a way of providing notifications to users of web applications, but in a way that the user themselves can control. It was inspired by Growl, which runs on the Mac, and which is used by applications such as Skype and Adium; by passing all notifications through a central system users are given the power to decide which messages they are interested in, and how they want to see--or even hear--them.

Progressive browser enhancement allows Yowl notifications to make use of advanced features in the browser if they are available, but to fall back to basic notifications if not. For example, we've created a Windows component that allows messages to be displayed above the system tray. The component is invoked and called from script, and works with both Firefox and Internet Explorer:

Yowl notifications in IE with Sidewinder system tray component

However, if the systray component is not installed, the Yowl notification system will simply use JavaScript to show messages within the browser window. You can see a sample of the non-enhanced notifications here--it will run in all the major browsers:

Yowl notifications running in Firefox

The programmer need change nothing in their code to make use of the systray component if it is present, since as with the DOM 2 Events example, or Google Gears and threading, the user is in control of the browser enhancement, not the programmer.

(For more on Yowl see the Yowl open source project page, Yowl: Design principles and how to use it and Yowl: An open source centralised notification system.)

Where does this leave the browser?

There is still plenty of scope for the browser to evolve and make available the kind of features we're talking about here. But the truth is that progressive browser enhancement makes browser evolution far less significant than it has been until now. That's probably not a bad thing, given the chaos that is currently surrounding the development of HTML since the W3C gave its support to HTML 5; the spec itself is becoming increasingly top-heavy, and bears little relationship to the early principles of HTML. Far from having enormous 'kitchen-sink' specifications, PBE looks to add new features in a more nimble way, via small and focused modules.

Yowl: An open source centralised notification system

So Hackday was certainly an excellent event.

If you weren't there and have only heard about lightening striking the building (no, really), then it may sound odd to say that it was 'excellent'. After all, the lightening caused problems with the wi-fi, and it didn't really settle down until quite late in the day. And it also caused something far more surreal...the windows in the roof opened just at the moment it started raining, so we had to be evacuated from the main hall. But the organisers coped with all of this in such a calm way that you couldn't help but get into the swing of things, and keep on adapting.

However, the upshot was that I 'adapted' to the point of avoiding doing any hack that required the Yahoo! APIs, since you had no idea whether the network would remain up for more than ten minutes. Instead I decided to implement something I'd been mulling over for quite a while, and that's a browser-based implementation of Growl.

(If you want to cut straight to a demo, it's available by selecting "Try it now" from the Yowl project page. It's been tested with Firefox, Safari and IE, although the latter does not yet have proper opacity.)

Growl

Growl is an interesting piece of software for Mac OS, which centralises the management of notifications. The idea is simply that applications such as Skype or Adium ask Growl to display a message, rather than doing it themselves. However, this makes it sound like just a standard library which might save you writing a bit of code, but Growl is much more important than that. Since all messages pass through it, it can provide facilities to enable the user to indicate whether a message is enabled or disabled, to control how they appear, for how long, and so on.

But even that doesn't capture it all; extensions to Growl provide different types of notifications, which are not limited to the display. For example, a user can request that certain messages are spoken to them, or even emailed.

formsPlayer messaging

We have a module in formsPlayer, our XForms processor that handles XForms messages, and it provides the ability to speak (as long as Microsoft Agent is installed on the PC). Our module also allows authors to display XForms messages as system tray messages, so breaking out of the confines of the browser window.

So we've long harboured a desire to break this component out into a standalone module that could be used in other applications, and at the same time provide extra features like a debug message logging mode, and so on.

But an idea that started to form recently was for authors to be able to make a single call to an API requesting a message, and for that call to either be handled in script if formsPlayer was not installed, and handled by the formsPlayer messaging module if it was. This would mean that authors can get richer messaging functionality if it's available, without having to change their code.

YUI-based notifications

So for Hackday, I decided to implement the first part of this, and used the Yahoo! User Interface Library (YUI) to provide the core notification code. I created a set of interfaces that quite closely mirror the Growl interfaces and object structure, and since my code uses the Yahoo! library, I decided to call the library Yowl.

The library displays notifications based on a combination of individual settings and themes. One interesting feature I added was to store these themes in a Google spreadsheet, and retrieve them as JSON--all of which continues the idea of 'programming against the cloud' that I've been calling 'skimming'.

You can try the current state of the library on Firefox, IE or Safari by selecting "Try it now" from the Yowl project page. Note that depending when you try this, the IE version might not have opacity support.

Next steps

Various features will be added this week, mainly based on making use of additional functionality if available. For example, it will be possible to save your preferences for different web applications, in Google Gears if it's installed. Similarly, if the platform has formsPlayer and Microsoft Agent installed then spoken messages will be available on Windows. One particularly interesting goal is to make use of Growl itself if it's detected.

Once the library is suitably advanced, we'll also fold it back into formsPlayer, and it will become our core messaging module. The interfaces will also be written up separately since they provide a key module of the XForms backplane.