UI5 Web Components and Popular Frontend Frameworks

[MichelleMoudy]

SAPUI5 is a frontend framework that allows for the building of apps that follows SAP Fiori, the design guidelines for SAP. The apps are built with an MVC (model, view, controller) pattern using HTML5, JavaScript, XML, OData and JSON. It is highly versatile and very well supported. But what if you want to design an app following SAP Fiori design guidelines using a frontend framework you already know like React?

It’s not unusual to want to use a framework that frontend developers are already familiar with and use a component library to make sure the look is consistent. This is where the UI5 Web Component libraries come in. These libraries are a collection of standalone elements that follow SAP Fiori design and can be used with a variety of open-source frontend frameworks. Instead of using the SAPUI5 framework to build the app, you can use your preferred frontend framework of choice with the UI5 Web Component libraries to easily follow SAP Fiori design guidelines.

React

React, created by Meta, is a JavaScript library that lets you write component based declarative UIs using JavaScript. You can build components that encapsulate their own state, then put the components together to build complex UIs. React was one of the first non-MVC frameworks to build reusable UI components back in 2013. This means the support and information is massive as well. React also lets you build mobile applications with the React-Native library that has a remarkably similar setup to React itself, so onboarding is much quicker than a standalone mobile framework. It's also not as opinionated as other frontend frameworks, which allows for more freedom to work in the ways that work best for you and your team.

React is the framework I have the most experience with, and the one I prefer to use, so I was pleased to discover that SAP provides two different component libraries. The first is UI5 Web Components. To use this library, create a new React application and install the component library with npm install @ui5/webcomponents --save. Then, you simply import the UI5 components into your files like you would for any other component when you need to use them. According to the documentation, there are two limits in using the component library with React. Event handling isn't supported without a ref and Boolean prop values must be set to undefined instead of false. Both those issues are solved by using the component library specifically for React. Here is the documentation for installation and the limits and here is an example of the UI5 Web Component library being used with React. 

The React specific component library is UI5 Component Library for React. It is currently in pre-release as of the writing of this post, but the first stable version is set to be released in the coming months. This is the version I have used in the past and has been wonderful to work with. There are even some extra components in this library, such as the AnalyticalTable, which are not included in the base UI5 Web Components. To use the React specific library, you can start with a template using create-react-app or add it to an existing app by running the command, npm install @ui5/webcomponents @ui5/webcomponents-react @ui5/webcomponents-fiori --save. Here is the documentation for the installation.

Angular

Another one of the frameworks that is still widely used but has been falling out of favor is Angular created by Google. I have used Angular in the past but that was during an internship over 4 years ago, so it's like I've never used it at all given how fast the tech industry changes. Angular has all your code, HTML template, CSS, and functional logic all in one place so everything is easy to find. It is also highly opinionated on how code is formatted and structured, so there is less need for you and your team to spend time making those decisions. 

SAPUI5 Web Components with Angular uses the same install command as React, npm install @ui5/webcomponents --save. From there, you need to import CUSTOM_ELEMENTS_SCHEMA in app.module.ts before the components can be used like any other component library in Angular. Here is the documentation for the installation. For an example of the implementation, there is this SAP Sample to check out.

Vue

Vue, created by Evan You, is the last of the frameworks directly supported by the team that works on UI5 Web Components. I have never used Vue before, but I did have a backend coworker use it and she mentioned it was quite easy to pick up, a sentiment I have heard repeated by many other developers. I think the best description of Vue is that you choose it if you like JavaScript in your HTML, as compared to React, which could be better described as HTML in your JavaScript. This makes Vue a viable choice for a beginner who is familiar with HTML and CSS.

Installation is like React and Angular, npm install @ui5/webcomponents --save, but there are some configuration steps that need to be done based on the version of Vue being used. If you're using Vue 2.x, you need to add Vue.config.ignoredElements = [/^ui5-/]; to main.js. For Vue 3.x, there are two options for configuring UI5 Web Components. You can add a custom rule in a build step if you are using something like Webpack or if you are using on-the-fly template compilation, you can pass a check for UI5 custom elements on the line after creating your app with app.config.isCustomElement = tag => tag.startsWith("ui5-");. Here is the link to the documentation for installation, which will have more information on how to configure your Vue app properly. And if you’re looking for a practical example of how Vue has been implemented, you can look at this repo here.

Svelte

The last framework is Svelte. While not directly supported by the UI5 Web Components, it is one of the most popular frameworks at the moment. Svelte, created by Rich Harris, is a lightweight, incredibly fast frontend framework that doesn't make use of the virtual DOM to reduce bloat and speed everything up. Here is a great article that compares Svelte to other popular frontend frameworks like React and Vue... While I have never used Svelte myself, if I were to create a new app for a private project, I would seriously consider trying out Svelte as it requires significantly less code to achieve the same things as some of the other more well-known frameworks.

Even though there is no direct support for Svelte, I found this repo in SAP Samples on GitHub that shows it is possible to use UI5 Web Components with this framework. This example shows that you can follow the same process of using UI5 Web Components in a Svelte app as you would with Vue, Angular, or React. You only need to install the library using the command, npm install @ui5/webcomponents --save, and can import the elements in a script tag like how you would with React. However, there may be some configuration needed like there is with Vue and Angular.

Closing

These are some of the most popular and most used frameworks used today, according to the 2021 State ... Regardless of which framework you choose, a UI5 Web Component library will be compatible. This will allow you to follow SAP Fiori design guidelines and streamline your development process without having to spend so much of your time creating all these UI elements from scratch. In all cases, using the component library is as simple as installing the library and importing the components like you would with any other library. This even includes frameworks not directly supported, like in the case of Svelte. Please let me know about your experience with implementing these frameworks with UI5 Web Components or about any other frameworks you might have combined with this component library! Now go out and use these libraries and let me know how it goes!