Modernizing SAPUI5 with React and UI5 Web Components: Simple Note App

[chrisobar]

Hello, SAP Community!

I’m excited to share a latest small demo project, where I experimented with modernizing SAP UI5 using UI5 Web Components and React. My goal was to create a Notes Application with a modern interface while maintaining the familiar UI5 experience. In this post, I’ll walk through the process, share some code, and hopefully inspire you to explore UI5 Web Components in your projects!

📸Project Overview

This notes app demonstrates how to use the latest UI5 Web Components in a React environment, leveraging Vite for a fast, modern development experience.

Why UI5 Web Components?

UI5 Web Components bring the familiar SAP Fiori design to the world of standard web components, making it easy to use UI5 components in frameworks like React, Vue, Angular, and more. They provide:

• Reusability across different JavaScript frameworks.
• Standardized web components that are lightweight and fast.
• Seamless integration with existing SAP UI5 controls.

🔨Tech Stack

• UI5 Web Components: Provides the core UI elements like Shellbar, Cards, BusyIndicator, etc.
• React & TypeScript: For component-based architecture and type safety.
• Vite: Modern build tool for super-fast development and bundling.

📝Key Features

• Add, Edit, and Delete Notes with a clean and responsive UI.
• Sorting and Filtering functionality using custom search and filter logic(automated).
• Theming support, allowing dynamic theme changes.
• State Management with React hooks to handle the component states.

Try the link below for Demo:

https://ui5-webcomponent-react-demo.vercel.app/

Note: Data provided are just Javascript arrays

[AbhishekSharma]

Hi @chrisobar this is very nice…

Thanks -

[Margot]

Sorry, this is really confusing: You write you are "modernizing SAP UI5 using UI5 Web Components and React". What do you mean with "SAP UI5"? My first thought was you mean SAPUI5, but then this framework is not mentioned anywhere in the tech stack. So, what exactly did you modernize?

[chrisobar]

@AbhishekSharmaThank you for your comment! Yes it is intended to be SAPUI5. Thank you for correcting

SAPUI5 and the subject of my post are indeed two different tech stacks. This side project utilizes the React framework in conjunction with UI5 Web Components, which are framework-agnostic and adhere to SAP's Fiori design principles.

When I mentioned "modernizing SAPUI5," I intended to convey that, instead of developing a traditional SAPUI5 application, we can leverage UI5 Web Components for React in small to medium-sized applications. This approach promotes a more flexible and modular development style, allowing for the creation of applications that maintain the Fiori look and feel without being constrained to a specific framework.

For more details, feel free to check out the following link: UI5 Web Components for React Documentation.

React Framework: https://react.dev/

Note: I edited my original post to SAPUI5 to avoid confusion

I hope this clarifies my intention!