User Experience Insights
Comparison between SAPUI5 and Web Components
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.
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
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
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“
I have question on this SAP has launched enablement of web component with SAPUI5 framework (sap.ui.webc) Does it improve the performance.?