Comparison between SAPUI5 and Web Components

[maria-muresan]

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.

SAPUI5 Application

Web Components Application

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

SAPUI5 is the best-known web technology from SAP. Based on JavaScript, UI5 lets the developers build enterprise-ready web apps responsive to all devices. To separate the project’s code, it uses the well-known Model-View-Controller design pattern. Regarding data binding, UI5 supports different data models (OData, JSON and XML). In most of the cases the view is built with XML and combines different standard and custom controls in order to create an appealing user experience. There is one controller per view which takes care of the event handling and the navigation of the view.

 

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.

Unlike UI5, React applications don’t follow the Model-View-Controller design pattern, they use so-called components which mainly purpose is to divide the code into various files for a better maintenance and reuse. Each component needs to be light-weight and self-enclosed, also each component manages its own data and business logic. Components are built with a mix of JavaScript and XML, so-called JSX.

An interesting information about Web Components is that some of SAP’s products started to use this framework since the first version was released.

Comparison

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.

 

Conclusion

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.

 

References

• UI5 Web Components for React Storybook: https://sap.github.io/ui5-webcomponents-react/?path=/story/getting-started--page


• SAPUI5 Documentation: https://sapui5.hana.ondemand.com/#/topic

 

Fell free to provide feedback or share your thoughts in the comment section.

I have attached the source code for both applications:

• UI5 Application:  https://github.com/Q-PERIOR/QP_UI5App.git


• WebComponents: https://github.com/Q-PERIOR/QP_WebComponents.git

 

[vobu]

hi, it might be worth mentioning that UI5 webcomponents and UI5 itself are not mutually exclusively: very soon™ it‘ll be possible to use UI5 webcomponents in regular XML views, just like with controls.

<m:Button …> → <webc:Button …>

The API is already in place: https://openui5nightly.hana.ondemand.com/api/sap.ui.webc

From some experimenting with it, most of webcomponents‘ event handlers are also mapped 1:1 in XML view notation and „just work“

[former_member797738]

I have question on this SAP has launched enablement of web component with SAPUI5 framework (sap.ui.webc) Does it improve the performance.?