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
