Friday, February 09, 2007

Widgets - The JavaBean of the Web

Widgets are popping up everywhere on web pages and blogs. Widgets that show you your horoscope, the weather, the top 10 downloads on sourceforge, Flickr photos, and YouTube movies. Widgets do anything and everything. Why are they so prevalent? Very simply, widgets are incredibly simple to use. They are a little of window of HTML that are one line of HTML that you can paste into any web page, wiki, or blog.

The last time the computer industry had a standard way to present visual, interactive components were the Java Applet / ActiveX wars. As we all know, both of these were a dismal failure. What has cropped up instead is snippets of HTML that wrap

While Widgets may seem like toy components today, they are well on their way to becoming a full-fledged component model. Widgets are driven by parameters embedded in their invocation URL, so consider it essentially the instantiator of a traditional component model.

Types of Widgets:

  1. SCRIPT - A one line SCRIPT tag with a URL of parameters that invokes a new frame of HTML. This is the model used by Google Widgets and Widgetbox.

  2. EMBED - A tag used to embed Shockwave with a URL and defined parameters. This is a very common way to embed photographs from Flickr as a slideshow.

  3. IFRAME - A method that pulls in a separate frame of HTML that can display content. Google Widgets uses iframes that are launched by its script tag. You can bring in any URL content through an iFrame, such as Flickr's existing slideshow feature.

  4. DIV - A separate area of HTML, which is not parameter driven. Examples include Dojo toolkit. These are much more finegrained widgets that need to be handcoded.

Widgets need the following features before they can grow up into a full-fledged component model:

  1. Layouts - Widgets that layout other widgets that are passed in as parameters. For example a Folder Tab widget or Accordion widget.

  2. Listeners - Passing in callback URLs to widgets so that when something is clicked in them they can tell other targets on the same web page that something happened. For example, embedding a Google Maps widget that plots out 5 addresses, each of which has an associated URL to refresh on the same page when they are clicked on.

  3. Passing Data by Reference - Passing in data URLs so widgets can access data to chart, etc. These data URLs can be composed of XML or JSON. Google Gadgets already supports this feature.

  4. Subclassing - The ability to embed a widget within another widget that can override the original widgets behavior. This can be done today, but it is a bit of a hack.

These features can of course all be handcoded today, they just are not very prevalent. As widgets become more prevalent, they will offer a common way to do these things. The beauty of the Web is that these things will be accomplished in a simple, accessible way that lets any blog or wiki editor use the features.

It will soon be viable to build corporate web applications and mashups out of granular widgets. What will be interesting are innovative new tools for building individual widgets, turnkey widgets that access corporate resources such as content management sytems, and tools to assemble those widgets to do new things.