AJAX/stale browser data/polling vs. server push/drag and drop



Hi,

I am trying to put together the last major pieces of my project's
puzzle[1]. This is more website/client-side architecture than
JavaScript syntax but I hope this is a good place to ask. I'm a little
stumped with which direction to take and advice would be greatly
appreciated. I think this is a generally interesting problem but I
haven't seen a post this long here before :S

I have developed half of the admin interface for an e-commerce
website[2]. After the admin page is initially loaded in the browser,
the browser never again will do a full page reload. It is all AJAX to
make the changes. This can lead to stale browser data when there are
multiple users. Stale data can occur even if there was no AJAX
involved. Multiple users could just mean one storefront customer and
one administrator but for the example below I am thinking of two
administrators.

This example is similar to multiple windows open in OS X Finder,
Windows Explorer, etc. A change in one window can cause an update in
other windows where appropriate. One difference is that, for a website,
calls to the server are expensive.

EXAMPLE

A category has many products. On the administration page, the order
that products appear in a category can be changed. Each item in the
list can be repositioned using drag and drop. Also, it is possible to
see multiple categories simultaneously in different panes. Imagine

-----------------------------------------------------------
| Category A | Category A | Category B |
| | | |
| Prod 1 | Prod 1 | Prod 4 |
| Prod 2 | Prod 2 | Prod 5 |
| Prod 3 | Prod 3 | Prod 6 |
-----------------------------------------------------------

I could do the following.

A user (i.e. administrator) wants to move Prod 3 to a new position in
category A's list. When the drag is initiated the user is actually
dragging a clone of Product 3. He can drop the clone into a new
position higher in the list. The clone is in brackets.

-----------------------------------------------------------
| Category A | Category A | Category B |
| | | |
| Prod 1 | Prod 1 | Prod 4 |
| [Prod 3] | Prod 2 | Prod 5 |
| Prod 2 | Prod 3 | Prod 6 |
| Prod 3 | | |
-----------------------------------------------------------


After the drop, the client sends an AJAX request to the server seeking
approval for this move. The server replies saying the move is ok and
the database has been updated. The client can now make the move final.

-----------------------------------------------------------
| Category A | Category A | Category B |
| | | |
| Prod 1 | Prod 1 | Prod 4 |
| Prod 3 | Prod 2 | Prod 5 |
| Prod 2 | Prod 3 | Prod 6 |
-----------------------------------------------------------

First problem, the second panel is now stale.

Second problem, when the other administrator makes a change, I am
stale. He may make many changes very fast.

I could have my client poll the server every minute and find out what
has changed in the database. The client could ask the various panels
"Do you want to be updated?" and collect a list of interested panels.
Then send an AJAX request for the updates and do the updates with the
response (eg. DOM insertion, innerHTML[3], or other). To improve
things, every time I make a request any other new updates could piggy
back on the response.

I could use the new style of Flash sockets mixed with JavaScript so the
server can push data to the client[4]. I don't really like the idea of
using Flash because it is not a standard. I don't know if flash will be
available on a cell phone as soon as a browser with JavaScript and CSS.
If I require flash I may as well go all the way with a flash admin
site.

I am not interested in Comet [5].

I'm sure an increasing number of people will encounter this over the
next couple years. To a certain degree, I feel like developing a rich
browser app with HTML/CSS/JavaScript is still in the dark ages compared
to the Flash world or a dedicated Java desktop app that communicates
with the server.

Any advice?

Thank you,
Peter


[1] http://trac.vaillant.ca/store.rb/

[2] If you are interested you can see a partly working demo at
http://characters.michaux.ca/admin. In the menus you can try
Catalog>New Window and Category>Yahoo! Test. You can open multiple
windows and move them around. I think it is good to see the desktop
metaphor in a website.

[3] I know, not standard. Just an example here.

[4] http://en.wikipedia.org/wiki/COMET_(programming)

[5] http://www.aflax.org/examples/sockets/sockets.html

.



Relevant Pages

  • Re: Take forever to boot and display files in a folder
    ... trained administrator would run in such a case: ... then to examine the value of the line starting with "DNS Servers". ... It sounds strange that a guy has 6 Windows Servers under his desk and know ... I do know something about Windows Server, ...
    (microsoft.public.windows.file_system)
  • Re: Windows cannot find regedit
    ... but i am sure it was not an upgrade from a Windows 2000 to Win 2003 SBS. ... from a Windows 2000 server installation. ... I am facing a dilemma with respect to your "regedit" question ... my answer so that a server administrator can understand it then ...
    (microsoft.public.windows.file_system)
  • Re: auto login & run programs
    ... Microsoft Certified Professional [Windows 2000] ... | Im running a 2003 Server and require 2 programs to start on bootup The | problem is the server will be remotely administered. ... | I also need to make sure the username is not used remotely otherwise the | programs will try to run each time someone logs in. ...
    (microsoft.public.windows.server.general)
  • Windows 2003 remote desktop non-admin users
    ... We have Windows 2003 server with Terminal Services installed in Remote ... to give away Administrator rights just to start the application. ...
    (microsoft.public.windows.terminal_services)
  • Certain web pages are not opening with IE.
    ... I have a thin client connected to a Windows 2000 server who can't get web ... We have reinstalled both Flash ... and Shockwave, but that hasn't fixed the problem. ...
    (microsoft.public.windows.inetexplorer.ie6.browser)