Definition

Direct-to-DOM (D2D) rendering is a mechanism that renders a JSF component tree into a W3C standard DOM. When the rendered DOM is cached between JSF lifecyles, it can be used to compute the difference between 2 successive page views, to determine a precise set of DOM changes required to update the page from one view to the next. D2D rendering is core to the Automatic Ajax feature of the ICEfaces 2.0 framework.

D2D Fundamentals

Rendering

D2D rending does just what it says, it renders a JSF component tree directly into a DOM, as illustrated in the following diagram:

When the ICEfaces 2.0 Jar is added to a JSF application, the standard RenderKit is overridden with the ICEfaces RenderKit, and specifically, the ICEfaces RenderKit provides a DomResponseWriter instead of the standard JSF ResponseWriter. The DomResponseWriter diverts the output of any component renderer into a server-side DOM data structure.

DOM Differencing

A newly produced DOM from the D2D rendering process represents the page that will be replicated in the client browser DOM. The cached previous DOM is a replica of the DOM currently in the client browser, so the difference between the two DOMs defines the page updates that need to occur at the client browser. The differencing mechanism performs the basic task of calculating the set of updates to transform one DOM into the next, but the implementation in ICEfaces 2.0 has been highly optimized.

Page Updating

Given the set of page updates from the differencing algorithm, the standard JSF Ajax mechanism is used to deliver and insert those updates into the client DOM, thus completing the JSF lifecyle with D2D rendering.

The whole process is illustrated below:

1. User interacts with some browser control in the page.
2. Ajax Event generated for singleSubmit.
3. Ajax Request sent to the application.
4. The JSF lifecycle executes on a single component in the component tree, updating the model appropriately.
5. Render phase traverses entire component tree, and D2D calculates necessary page updates.
6. Page updates are returned in the Ajax Response.
7. Standard JSF mechanism updates the client-side DOM with page updates.