« Building an Aux Input Cable for Bose SoundDock | Main | Interesting Announcement at Tonight's MySQL Meetup »

October 10, 2006

Upgrading a Web App to Web 2.0

It seems like Web 2.0 is thought of primarily as a collection of new, not existing, companies and applications revolutionizing the way the web is used. This is done with new and emerging technologies such as Ajax, web services, and new thinking about value from consumer-driven knowledge and data.

But what about your legacy web application still going strong but rooted in the dot-com era of web technology. Is there a way to pull it into the future, or present?

I'm here to say yes, it is. One piece of being Web-2.0 compliant is about organization leadership focusing on consumers, and driving functionality in that direction. This can be done regardless of the technology under the hood. If you want to provide a mechanism for consumers to provide feedback on and rate your widgets it can be done with any web-enabled toolset. The same can be said of web services, opening up data isn't much a matter of technology. It comes from the leaders of the organization.

Another (big) piece of the Web 2.0 picture is new and improved uses of new technologies. Can you upgrade your very complex, but mostly static HTML pages that come out of your web application framework to be more Web 2.0-ish? Sure. Can you do it gradually, and over time. Yes.

I write this because I work at a company that built their hugely complex web application in the late 90s using the best practices of those days. It has thousands of developer hours poured into it over many, many years and works very well. The underlying application that drives everything is well-architected and is very solid. It is providing a huge set of customers the functionality they need to keep their business running. I don't think anyone at the company, or their customers, want to see that change.

Over the past several months much of what I've been doing has been finding ways to incorporate ideas of the new web backward into the existing application. The leadership, and other engineers want to see it happen, but in a way that allows us to continue to provide ongoing. Nobody is going to allow the engineering department to dissappear for a year while the application is re-architected for Web 2.0. It's something that has to be done gradually, over time, and in a way that integrates along with the needs expressed by the customers.

Adding an Ajax Framework

The first, and perhaps easiest stop to using new technology, was to implement an Ajax framework. I did this a few months back and it's starting to become the standard. In reality "implementing an Ajax framework" really meant writing document and installing an Ajax library. The document describes how to quickly, and with just a few lines of code, weave new functionality into the existing appliction to replace clunky page-reloads with dynamically build data-driven elements on the page.

For awhile the Ajax framework was used for one dropdown on one page, but as more changes are made to the application the documentation and working examples provide a pretty simple and clear set of instructions on how to upgrade the usability of the application. These upgrades tend to happen when an egnineer is working on a piece of the code for another purpose and tacks on the Ajax improvement as a part of the change.

Dynamic Page Features

Web 2.0, and the new web tools, provide much-needed ability to create improved user interfaces. Much of this centers around moving the web to be more like a desktop app. Again, even with a legacy web application there's a lot that can be done to provide these enhancements to your existing pages.

The project I've become best known for at work is a user interface improvement (the CEO says it's one of his standard things to talk about as he meets with folks). We have tons of grids and lists with project, task, budget information, reports, graphs, etc. We have all kinds of great controls for sorting, filtering, and displaying the information a user wants to see. As good as those are a user often ends up scrolled down on a page somewhere in a sea of numbers and isn't quite sure what they are looking at.

The UI improvement was to allow the user to anchor the column titles to the top of the browser window if they scrolled down below the titles. With this feature they'd always have the column titles floating at the top of their browser, regardless of where they had to scroll on the page. Of course, when they return up to the top the column titles are put back where they started.

The trickiest part of this feature was, like with the Ajax enhancements, weaving the code for the improved UI into the complex nest of table structures that came out of the dot-com era. It took a little extra JavaScript that it would have if the whole row would have been in a div tag, but it works. On all of our supported browsers (IE, FireFox, and Safari on PC and Mac).

The cool part of having a well-architected application is that there are three kinds of lists, and all of them are centralized into three classes. While I was a little nervous about making those kinds of sweeping changes down in the application, it has been gratifying to see the anchored column functionality available site-wide, in hundreds of pages in the application.


I'll be the first to admit that these are pretty simple things, and by no means put us alongside the big boys of Web 2.0. We're going in that direction in, hopefully, a safe and profitable ways.

But even more important is that it may just be possible to upgrade a web application to Web 2.0. If the leadership has the right vision, the technology can be moved forward without loosing the value that's already there.

And yes, there will be more to say about this. I've only just gotten started and there are is some major Web 2.0-ness in what's on my FogBugz queue for the next few releases.

Posted by mike at October 10, 2006 12:19 PM