Tuesday, May 27, 2014

Tab Navigation Performance in UI Shell and Multi Task Flow

I was investigating performance impact of navigating between tabs in UI Shell template. To compare, as alternative solution for UI Shell, I was using dynamic tabs with Multi Task Flow binding (Building Custom UI Shell with ADF 11g R2). When you switch between tabs in UI Shell, you could notice slight delay. This is normal delay (differently to browser tabs, where no delay), as there should be generated response from the server and JSF tree must be updated. However, it is not clear what is the impact of such delay to application performance. The goal of my post is to answer this question.

Sample application - MultiTaskFlowApp_v2.zip, contains two UI projects. One implements UI Shell and second Multi Task Flow binding based page for dynamic tabs:


Multi Task Flow binding is a new feature since ADF 11g R2, list of task flows can be referenced from the Page Definition:


This list can be rendered on UI with dynamic tabs, each tab would be physically created (in UI Shell case, only one region is rendered at a time):


Second project is using UI Shell template:


UI Shell doesn't render real tabs, instead it is using navigation pane component with links, displayed as a tabs:


Only one region is rendered at a time, the one you select. This means, when tab is changed - different region will need to be rendered again:


I was navigating through tab items for both solutions and recording tab opening time. Here are the results.

Multi Task Flow Binding: 

- Departments: 0.29 sec.



- Employees: 0.47 sec.


- Locations: 0.59 sec.


Average: 0.45 sec.

UI Shell:

- Employees: 0.61 sec.


- Locations: 0.55 sec.


- Departments: 0.28 sec.


Average: 0.48 sec.

You can see, both are almost the same. There is 0.5 second delay to open tab for a relatively simple UI with a form and editable table components. In the real scenario, with more complex UI, delay could grow to couple of seconds.

One second or couple of seconds delay is generally acceptable in UI Shell, for navigation between tabs. If delay is longer than that, something must be wrong in your application - slow data fetch or slow table initialisation, could be one of the reasons.

No comments: