A solution for disruptive end-user experience :: ICEFaces

Nov 09, 2011
Diego Vergara

Yesterday I saw this video about ICEFaces, Liferay and IPC (Inter-Portlet Communication) presented by Neil Griffin. It's a great presentation that shows how ICEFaces has implemented JSF standard and how this implementations has gone beyond with some improvements to enable some features of JSF-301 standard. And one of those improvements is AJAX Push.

Usually when a user clicks a submit button to see how the entire page or portal page refresh (causing a renderization of all the portlets) is a disruptive end to the user-experience and causes headache to some users; but ICEFaces has a solution.

So let's picture the case described before but with the ICEFaces solution; this way we can explore some of the advantages.

Suppose there's a portal page with three portlets, two of them are related which means that any change to any of them will affect the other,but the third is an independent portlet application. So the optimal situation when a user interacts with this portlets is that only the portlets affected by the user interaction should re-render.

Direct-to-DOM: "Typically we think of a DOM as something that lives in the browser. ICEFaces renders it to a server-side DOM", this means that when the server sends the DOM to be rendered in the browser it keeps a copy of it in the server, which can be used to compare with the changes triggered in the browser and just render the elements that have changed.

Partial Submit: To explain how the server knows which parts changed, we should understand "Partial Submit." When a user enters data in a input field and hits tab, this event trigger a full submit to the server - "every editable field on the form is serialized and submitted by AJAX to the server" - but it's a partial submit in the sense that only those fields that has changed are validated.

AJAX Push: "It's a capability that enables asynchronous, web-based push of presentation changes to the client based on server-side effect"; in the case described before, when a user submits a change, let's say in portlet A ,this change is done in the server and the new data is available and is needed to be updated in portlet B (A and B are related, for example; A is a list of contacts and B displayed the info for each contact), so AJAX Push solved this by sending the event from the server to the browser. AJAX Push is sometimes called "Reverse AJAX" or "Comet".

Before to finish: ICEFaces offers a solution for inter-portlet communication in a way that allows an inter-communication not only between portlets in the same page, but between users and browsers as well. This create a new world of possibilities for sites and web applications that could deliver a graceful end-user experience.