Although SAPUI5 is the dominant framework in the SAP cosmos, it is not the only one that SAP is developing for the web. In 2021 SAP launched the first stable version of UI5 Web Components
The purpose of this article is to create a comparison between these two frameworks to highlight the differences and the similarities between them.
At the first glance it hard to identify which framework is used for each application because both follow the SAP Fiori Design Guidelines. From a standard view, the user wouldn’t expect that the apps are with different technologies. There are a few minor differences, but they are negligible.
As it can be seen in the labels the first app is built with SAPUI5 and the other one with Web Components.
Both applications implement basic CRUD operations, so the data handle was also observed.
Getting started with SAPUI5
Getting started with Web Components
Web Components is basically a collection of several web technologies that bring new advantages and features to the browser.
SAP UI5 Web Components is not a successor to the SAP UI5 framework but should be regarded as a supplement to the latter. In other words, there is no dependency with the UI5 framework and can be used independently. The components can be used natively or in combination with any web development framework like React, Angular or Vue.
The above application has been developed with Web Components for React.
An interesting information about Web Components is that some of SAP’s products started to use this framework since the first version was released.
|To highlight the differences between them I have made some performance tests using Lighthouse plug-in in Chrome Dev tools. The SAPUI5 application got 47 on the performance test, while the Web Components app got 84. SAPUI5’s performance can be improved with updates or leveraging latest features, but it is important to keep in mind that it is a ten-year-old technology. On the other hand, a younger technology like React, has the advantage of being able to be built on new web standards and go beyond the traditional MVC model.|
|Like I mentioned above, Web Components is on its first stable version, while SAPUI5 latest version is on 1.98. With the development of the framework, the number of elements increases. Web Components has about 100 controls and SAPUI5 has more than 650 controls.|
When speaking about flexibility, I consider that UI5 Web components offers you more than UI5, because Web Components allows you to arrange the controls wherever you desire. A reason why SAPUI5 gives less flexibility is because it makes lots of assumptions about the final applications should look like.
Another advantage of the SAPUI5 framework is that SAP provides the development environment and tools, since for the other approaches, you must integrate the SAP library with the native framework and possibly other open-source components. Regarding the Fiori Launchpad compatibility, both frameworks are compatible with it, which means that they can be integrated easily. SAPUI5 offers a native integration.
UI5 Web Components allows developers to build web apps which align visually with the SAP Fiori user experience and guidelines. Therefore, they are grated to ensure visual and behavioural consistency for static web sites and web applications
SAP UI5 Web Components is not based on UI5 framework. In other words, there is no dependency with the UI5 framework and can be used independently. SAP UI5 Web Components is not a successor to the SAP UI5 framework but should be regarded as a supplement to the latter.
To sum up, each framework has its advantages and disadvantages, so it is not important on which technology is used while building the UI, it is important that it is SAP Fiori compliant.
Fell free to provide feedback or share your thoughts in the comment section.