Garcia Hurtado: Web Developer Garcia Hurtado: Web Developer Web Lab: Interactive Demo Web Apps

IDOL: Invisible Data Objects Layer
Self-updating Web Applications

"What is IDOL?" - IDOL (Invisible Data Objects Layer) is a DHTML based technology that provides fast, seamless data transfer in web applications. With IDOL, the amount of data to be downloaded from the server is minimal and web sites update themselves in the background, delivering fast response times and a smoother user experience.

This IDOL-enabled demo is a catalog of famous monuments of Spain, where data about different monuments can be viewed and modified in real time. It can be launched in either static or dynamic mode, in order to compare the advantages of IDOL applications over static web apps.

Limitations of "static data" web apps

Current web applications are based on a multiple page interface: every time the user wants to view a different piece of data, or carry out an action on the site, a whole new page is downloaded from the server to display the results. Even though there is usually only a few elements that change from page to page, the browser will still download all the static parts on those pages all over again, causing very slow response times.

In addition to bloated downloads, in "static" web applications users are left staring at a blank screen while they wait for a new page to load, breaking smooth interaction with the website. Even when the user's actions result in an error, he must still wait for the whole page to load before he can read what went wrong. As more and more full pages have to be downloaded to perform different functions, interest on the website decreases, and users quickly get tired of dealing with a slow, unfriendly interface.

The flaws of this approach become even more evident with complicated web applications, like an e-commerce back end interface. Picture a business owner who wants to update the price for a product on his site; in a "static" web app, he will have to browse several pages to perform this function. He has to start at the "product summary" page, click to the "detail" page for the product he wants to update, from here click through to the "edit" page, submit his changes and finally verify the results on a confirmation page. In this simplified case, the user had to navigate and download four full pages to complete a rather simple task.

The cumbersome static application model
Multiple pages must be used to update data in a static web app

To experience the flaws of this approach, the IDOL demo can be launched in 'static' mode (HTML-only), so that it acts just like a normal web application.

Advantages of "dynamic data" web apps

In the IDOL demo, the application works much faster since it does not require full downloads to update simple data on a page. When a user wants to edit the information displayed, he can simply click on any of the data fields and submit their changes immediately without having to wait for another page to load. The demo app will show the results of any action right away within the existing page.

All the actions take place within the same page in IDOL, data is exchanged with the server in the background The advanced dynamic data application model

Some benefits of an IDOL application over 'static data' web apps are:

  • Download time is minimized since only the relevant data is transfered from the server to display a new record
  • Interaction with the application becomes much smoother since IDOL only loads fully once, and information is updated seamlessly without causing any other elements in the page to change
  • Modifying data is direct and intuitive, the user simply clicks on the text field he wants to update, and it immediately becomes editable. The changes are sent to the server without the need to load another page and the modified data will rewrite itself into the page once the server completes the update.
  • Our store owner described above could change the price on a product all within one page as opposed to four, improving the efficiency and usability of the system, as well as reducing the amount of time it takes to use the system
  • Errors and warnings are reported instantly by the application, which results in much better response times and smoother interaction
  • Users with old, non-DHTML compatible browsers will still be able to use the application, since it is designed to "fall back" into HTML-only mode when it detects lack of support for dynamic data

Now launch the IDOL demo so you can experience the benefits of this 'dynamic data' approach to web application development. If you are thinking about building your own data-driven website and you want to use IDOL technology, feel free to send me a note and we can discuss possible solutions for your particular needs.

© Copyright information.
   

How to use it:

  1. Launch the IDOL demo
  2. Load a record
  3. Click on any of the data fields and it will instantly become editable
  4. Change the data in the field and press enter (or submit) to commit the update
  5. Load other records and return to the one you changed, to ensure your updates have been recorded
  • The database resets itself every certain number of hours, so you may not see changes you made more than a day ago.
  • If you receive an error, or the application does not seem to work, please send me a note

Requirements:

  • DHTML enabled browser (Like Netscape 4 or higher and Internet Explorer 4 or higher).
  • JavaScript must be enabled in order for the application to work.