Performance Improvements

We have received feedback from our partners that their customers' experience with HAPI Elements widgets degraded in terms of performance due to the number of function calls made to the UI Submodule functions (mainly setStyle function).

HAPI Elements works with an event-driven architecture to communicate with widget iframes. The UI Submodule functions also trigger events. When there are many events in the event cache and when the amount of iframes on the page increase, there is performance degradation on devices with low RAM.

Some of our partners customized widgets to their fullest potential, thus the need to handle disposal of these events in the cache has become a priority.

As part of this change, a new function is added to the window.hapi interface called removeEventById to dispose of the events.

UI Submodule Changes

The following functions now return an ID which can be used to dispose the listener to improve the performance:

• onIframeLoaded
• onIframeUnloaded
• setStyleAttribute
• setAttribute
• setStyle
• addClass
• removeClass
• addStyleSheet (added in 4.1.0)
• appendChildToSlot
• hideElement
• showElement

The examples in UI Submodule documentation have been updated to show the disposal as well.

State Submodule Changes

The onChange listener on state variables also return an ID which can be used to dispose the listener to improve the performance. Example:

const id = window.hapi.orderJourney.state.stepActiveIndex.onChange((stepActiveIndex)=> {
    console.log('[HAPI Elements stepActiveIndex]', stepActiveIndex)
})

//later dispose of the listener to prevent memory leaks
window.hapi.removeEventById(id)

The examples in throughout documentation and the playground have been updated to show the disposal as well.

Service Submodule Changes

The onStart, onSuccess, onFailure, onFinish listeners on service functions also return an ID which can be used to dispose the listener to improve the performance. Example:

const someCallback = () => {}

const onStartId = window.hapi.basket.service.addProductOrContractById.onStart(someCallback)
//later dispose of the listener to prevent memory leaks
window.hapi.removeEventById(onStartId)

const onSuccessId = window.hapi.basket.service.addProductOrContractById.onSuccess(someCallback)
//later dispose of the listener to prevent memory leaks
window.hapi.removeEventById(onSuccessId)

const onFailureId = window.hapi.basket.service.addProductOrContractById.onFailure(someCallback)
//later dispose of the listener to prevent memory leaks
window.hapi.removeEventById(onFailureId)

const onFinishId = window.hapi.basket.service.addProductOrContractById.onFinish(someCallback)
//later dispose of the listener to prevent memory leaks
window.hapi.removeEventById(onFinishId)

The examples in throughout documentation and the playground have been updated to show the disposal as well.