UI5 Controls vs UI5 Web Components – Why

[WouterLemaire]

The technical differences between UI5 Controls and UI5 Web Components are described in this blog post: https://community.sap.com/t5/technology-blogs-by-members/ui5-controls-vs-ui5-web-components-technica... 

Besides those technical differences, there are other aspects that differentiate both technologies to choose the best option:

• Performance
• Multiple JavaScript frameworks
• One set of Web Components

Performance

Web Components allow you to create your own DOM elements. Rendering UI elements directly in the HTML DOM is on the lowest level possible. In theory, this means that the performance of UI5 Web Components should be better compared to UI5 Controls. UI5 Controls are rendering html but not by using Web Components. This means that the HTML generated by a UI5 control is on a higher level compared to Web Components. Although we still use a UI5 control as a proxy for web components, it just renders the Web Component, the UI and logic are on a lower level. More details about Web Components itself can be found here: https://developer.mozilla.org/en-US/docs/Web/API/Web_components

Nevertheless, I wanted to challenge this. How big would the impact be of having this on a different level? Are we talking about seconds? Milliseconds? Would it be worth the effort of this additional complexity?

Time to battle!

For testing purpose, I used two demo projects which you can run as well by following the steps described here: https://community.sap.com/t5/technology-blogs-by-members/ui5-controls-vs-ui5-web-components-setup/ba... 

Both projects have the exact same html and JavaScript logic, one by using UI5 Web Components and the other with UI5 Controls. Visually the result will look the same with a complete different technology behind the scene.

Starting both projects with the script “start:dist” simulates a productive deployed app to compare the rendering performance. For measuring the performance of the rendering, I opened debugging tools of my browser, navigated to “Performance” and click on “Start profiling and reload page”:

First time measuring the performance for both applications resulted in a slower performance for the demo application with UI5 Controls:

UI5 Controls: 6.48 seconds

UI5 Web Components: 5.54 seconds

But one time measuring is not a correct reference, running the profiling a few times also resulted in faster rendering for UI5 Controls than UI5 Web Components:

Although, technically the rendering is similar or faster for Web Components, in reality UI5 Controls always wins when it comes to visualization of the UI. Somehow it is showing a visual change of the UI faster. I tested this by using the application duoload. The left is already visible while the Web Component on the right is still not showing anything. It doesn’t matter which one is on the left or right, it also doesn’t matter if UI5 Web Components are rendered faster, the visual result is always the same. UI5 Controls wins when it comes to the visual result:

Bottom line, the rendering is sometimes a little bit faster the very first time for UI5 Web Components but the visualization is always faster with UI5 Controls. When it comes to performance, it doesn’t matter much if you choose for UI5 Web Components or still use UI5 Controls.

Any framework for Fiori apps

UI5 Web Components can be used by other frameworks to provide applications that have the Fiori look and feel. This could be very powerful to have one and the same design for all your applications, SAP or non-SAP, SAP framework or any other framework, all with the same look and feel integrated into one single portal.

Any Web Component in UI5

The other way around could also be possible, one company design that can be applied to all your applications. This can go beyond theming by providing a set of Web Components by the companies design team. This is something I see more and more nowadays. With the adoption of Web Components into the UI5 framework, we can develop UI5 apps with any kind of Web Components delivered by the companies design team.  @pmuessig  showed this during UI5con: https://youtu.be/dziHWwdLYUk?si=YDIqz3AgoGzlOfza

This also allows developers to use the UI5 framework for non-SAP applications. With Web Components, it doesn’t need to look like a Fiori application.

This is a game changer for UI5 to go beyond building SAP applications!