Improving UI Performance
Performance plays a crucial role in enhancing the user experience, both positively and negatively. When it comes to iframe integration, there are opportunities and challenges. By investing time in performance optimizations, you can seamlessly integrate the system and provide a better user experience.
This chapter provides some hints on improving performance, but it is not an exhaustive list or implementation guide.
Start-up Time
The module UI in the iframe is loaded after Web Portal has finished loading. Therefore, the loading time of the module application adds to Web Portal’s loading time. Additionally, iframes are not always present in the DOM, such as when the user navigates to another view. They are reloaded when the view is activated again. This is especially true on the Dashboard, where multiple iframes may be loaded simultaneously.
Since most applications today use UI frameworks like Angular and React, there are many resources available on the web that provide guidance on improving initial load time.
Lazy-loading
One well-known method is lazy-loading, which divides the application code into smaller chunks. Only the necessary parts are loaded for the current task. Implementing lazy-loading is usually not complicated, but it can significantly improve start-up time.
Service Worker
There are several ways to cache files and data in the front-end, and one of them is using service workers. Service workers can cache static files (HTML, JavaScript, CSS, and fonts) and data fetches. They can also update the cache in the background, ensuring that the user is served with the latest data after a page refresh. Open-source libraries like Workbox or Angular Service Worker make setting up a service worker easy.
Avoiding Large Frameworks
Frameworks like Angular have a significant footprint. In some cases, Web Portal may not require a rendering framework at all. For example, Data contributions do not have any UI. In such cases, a small HTML page would load faster. Widgets, which usually display only charts and have limited functionality, can be written in plain JavaScript or using a small web component instead of a full-blown framework.
Run-time Performance
When the user switches between navigation entries in the menu, Web Portal sets the src attribute of the iframe to the htmlFile property of the view provided by the module. The browser then reloads the iframe page unless only the URL’s hash fragment (everything after #) has changed. Frameworks like Angular use "HTML5 routing" (PathLocationStrategy) by default, which replaces the path of the URL to create better-looking URLs. However, frameworks can be configured to use the hash fragment to represent the app state instead. In Angular, this can be achieved using the HashLocationStrategy. When the application is configured this way, the browser will not reload the iframe when the user switches between views of the same application.
Using "HTML5 routing" (PathLocationStrategy in Angular) instead of hash routes has the advantage of enabling Server-side Rendering (SSR) to boost performance. SSR renders and caches web pages in the backend before sending them to the browser. The choice between SSR and hash routes depends on the framework used, and there are no experiences yet on which approach is more performant in the Web Portal setup.