UI5 Web Components Data Binding Example

This repository contains two sample applications that use the UI5 Web Components in a very lightweight and performant way. While taking an as-lightweight-as-possible approach is great for performance, user and developer experience are just as important. To satisfy the latter, the applications additionally show how to implement data binding with UI5 Web Components using

a custom approach (see vite application)
the Vue framework (see vue application).

Data Binding is a much beloved feature of the UI5 framework, which the applications in this repository do not use. This repository aims to showcase the performance, power, flexibility, compatibility and ease of use of the UI5 Web Components on their own.

Overview

Both applications in this repository have the same content. They display a simple list of products with a few interactive buttons. It has similarities to the SAP Fiori list report and object page floorplans.

Vite Application

The vite application does not use any framework - vite is only used as a web server and build tool. This makes the application very lightweight and performant - reaching a lighthouse performance score of up to 97. The application implements custom data binding - including list bindings, property bindings and i18n (internationalization). For more information visit the vanilla-data-binding section.

Vue Application

The Vue application uses the built-in data binding capabilities of Vue 3. Vue's template syntax is similar to property bindings and its list rendering is similar to list bindings. A component's reactive state can be a data object, which is similar to creating data model.

Requirements

Node.js version 16 or higher is required to run this project.

Download and Installation

Clone this repository (or a forked version of it).
In the project's root directory, run npm install.
To start the dev server of one application, run npm run vite or npm run vue.

The best performance can be achieved when the applications get built:

To build both applications, run npm run build.
To serve the static build result of one application, run npm run vite:dist or npm run vue:dist.

Support

Create an issue in this repository if you find a bug or have questions about the content.

For additional support, ask a question in SAP Community.

Contributing

If you wish to contribute code, offer fixes or improvements, please send a pull request. Due to legal reasons, contributors will be asked to accept a DCO when they create the first pull request to this project. This happens in an automated fashion during the submission process. SAP uses the standard DCO text of the Linux Foundation.

SAP-samples/ui5-webcomponents-data-binding-example