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

Discussion in 'Javascript' started by petermichaux@gmail.com, May 7, 2006.

  1. Guest

    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
     
    , May 7, 2006
    #1
    1. Advertising

  2. wrote:
    > 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.


    Try "Reverse Ajax" using DWR:

    http://getahead.ltd.uk/dwr

    (Assuming it's a Java server)
     
    TheBagbournes, May 7, 2006
    #2
    1. Advertising

  3. Guest

    TheBagbournes wrote:
    >
    > Try "Reverse Ajax" using DWR:
    >
    > http://getahead.ltd.uk/dwr
    >
    > (Assuming it's a Java server)


    Thanks but it is a Rails app. "Reverse Ajax" is just polling, correct?
     
    , May 7, 2006
    #3
  4. wrote:
    > TheBagbournes wrote:
    >> Try "Reverse Ajax" using DWR:
    >>
    >> http://getahead.ltd.uk/dwr
    >>
    >> (Assuming it's a Java server)

    >
    > Thanks but it is a Rails app. "Reverse Ajax" is just polling, correct?


    I assume so, but there's slightly more. If I read it right, The DWR
    servlet tracks all sessions which turn polling on, so that from the
    server, you can "broadcast" script to all pages by URL.

    Pretty nifty. So alerts for system events, diary notifications etc can
    be popped up just as well as local apps can.

    Nige
    (from the Y!UI user group)
     
    TheBagbournes, May 7, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Oliver Klein
    Replies:
    0
    Views:
    705
    Oliver Klein
    Aug 24, 2003
  2. XyZaa
    Replies:
    0
    Views:
    581
    XyZaa
    Jul 19, 2007
  3. Mudcat
    Replies:
    2
    Views:
    1,006
    Mudcat
    Dec 14, 2008
  4. samppi
    Replies:
    27
    Views:
    515
    David A. Black
    Dec 5, 2007
  5. Replies:
    1
    Views:
    101
    Thomas 'PointedEars' Lahn
    May 28, 2004
Loading...

Share This Page