Skip to content

Ajax modes

Jump to bottom
Mark Reeves edited this page Jan 4, 2018 · 7 revisions

The performance of your application will depend on a number of decisions which can go into the design specification. Even small changes to the way data is loaded or the interactions of a component can noticeably improve performance and the user experience.

Many components, such as WCollapsible and WTable, support different operating modes. These features can be used to tune the performance of the user interface to particular use cases, without the need to alter any application logic.

public static enum CollapsibleMode {
  LAZY, CLIENT, DYNAMIC, EAGER
};

public void setMode(final CollapsibleMode mode)

Available Modes

The following Modes are supported by most components which support the mode property:

  • CLIENT in which the content is always present on page load and opening the component does not involve any interaction with the server.
  • LAZY in which the content is only present if the component is open. The content will be fetched using AJAX if and when the component is first opened. Once the component has been opened the content is kept for the life of the page.
  • DYNAMIC in which the content is only present if the component is open. The content will be fetched using AJAX if and each time the component is opened.
  • EAGER in which the content is not present on page load. The content will be fetched using AJAX as the page loads and in a separate request. It is loaded into the component's content panel as soon as it is available. Once the content is loaded it is kept for the life of the page. This mode is not available for WTable or WTree.

Determining an appropriate mode

Each mode has its own performance implications, so designers and developers should determine which operating mode to use on a case-by-case basis. When determining the Wcomponent mode you should take into account the following factors:

  • the amount of content in the component;
  • the probability the component will need to be opened;
  • the probability the component will need to be open on page load;
  • the position of the component in the UI - will it be below the fold;
  • the amount of time which will elapse before a typical user undergoing normal use cases will need to interact with the component's content; and
  • if the component's content is populated from data which requires external service calls how long these service calls take and the weight of the content and data returned.

Each of these factors will combine to determine the most appropriate mode for each component. The most appropriate mode is rarely a perfect mode and some statistical analysis will be required in addition to knowledge of the information architecture, external process speed, business processes, use cases and user personæ profiles.

Suggestions for mode determination

These are suggestions and represent some very basic hints as a start point for determining the appropriate mode.

CLIENT Mode

In this mode, as much content is rendered to the client as is possible after each server interaction. User actions such as switching tabs or using table pagination occur client-side, with no server involvement at all. This mode results in the largest initial page size but will not require any further interaction with the server as the user interacts with controls.

CLIENT mode is most appropriate for components with:

  • a very high probability of being opened or a moderate to high probability of being open on page load; and
  • a low to moderate content weight; and
  • is above the fold for a typical user or likely to be required immediately on page load.

LAZY Mode

This mode will fetch content via AJAX once when the content is first required. LAZY mode is appropriate for components which have a low to moderate probability of being opened and where the content loaded does not change frequently.

If a LAZY mode component is open on page load then it is identical to a CLIENT mode component so should meet the same criteria for determining the appropriateness of this mode.

DYNAMIC Mode

This mode uses AJAX to fetch data from the server each time it is accessed. After the page has loaded, data is fetched asynchronously if and when required, and only the relevant sections of the interface are replaced.

DYNAMIC mode is most appropriate for components which have a content which is frequently updated by external processes. This mode makes a server call each time the component is opened; therefore it should only be used if the content of the component is time sensitive.

EAGER Mode

In this mode the content is fetched by the client via AJAX immediately after the main request completes. This mode is useful to improve the perceived performance of the application when data for a section of the UI takes significantly longer to acquire and load than the rest of the UI. The main UI can be sent to the client immediately, and the slow content will be loaded in asynchronously.

EAGER mode is generally the most appropriate mode for components which have a high probability of being opened and:

  • a low probability of being open on page load; or
  • are below the fold for a typical user; or
  • not likely to be required immediately on page load.

WComponents which have a mode property

  • WCollapsible;
  • WTable supports subsets of modes for various interactions:
    • DYNAMIC for sort
    • DYNAMIC, LAZY or CLIENT for row expansion;
    • DYNAMIC or CLIENT for pagination;
  • WTab;
  • WPanel, WFigure and WSection support LAZY and EAGER, though LAZY is only useful if the component is initially hidden then shown using a WSubordinateControl;
  • WTree supports DYNAMIC, LAZY and CLIENT for expansion.

Some start pages

Clone this wiki locally