Ajax Paradigm Shift

1

June 9, 2010 by huionn

After completing my first non-trivial JSF exercise as POC, it is time to retrospect what I have learnt.

I think there is huge difference in development technique between AJAX based Web 2.0 applications with conventional Web 1.0 applications.

For example, to update a record in a datatable:

Web 1.0:

method 1:

a column is hyperlink. When user clicks one of the link, the key of the record (or row index) is sent to server. A new page for updating the selected record is returned to client.
(I am always using this method because it is straightforward)

  • cons: user need to navigate between listing page and edit page

method 2:

there is either a radio button or button in every record. When user click the button, the request is sent back to server and same page is returned with part of the page populated with selected record for editing.

  • cons: still causes page refresh although it is same page

This method can possibly be improved by eliminating the submission, using hidden field to store the record field value and populating the fields for editing.

  • cons: complicated javascript codes

 

Web 2.0 (with JSF)

When the record is selected (either click the row, other other input type), the request is sent back to server through AJAX. The response is returned to render a modal panel for editing.

The request is simple with

<f:setPropertyActionListener value="#{rec}" target="#{records.selectedRecord}" />

or

action binding with <… action=”#{records.select(rec)}” …> if extra steps are required to process the input

The rendered output uses data binding of #{records.selectedRecord.field1}, #{records.selectedRecord.field2}, etc

pros:

  • no page refresh, no page scrolling – good user experience
  • lower bandwidth for partial submit and partial rendering
  • the code is cleaner and simpler as it is always focus on single thing to do
Advertisements

One thought on “Ajax Paradigm Shift

  1. stargazer wong says:

    10s a lot… man, u r marveous!!! u putting money in my pocket again…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: