UI5 Controls vs UI5 Web Components – Setup

[WouterLemaire]

In this blog post I want to describe my setup of the demo projects that I used at UI5con 2024: https://www.youtube.com/watch?v=V7ur_kPx8nE 

The same setup is used for the following blog posts:

• UI5 Controls vs UI5 Web Components: Technical differences - https://community.sap.com/t5/technology-blogs-by-members/ui5-controls-vs-ui5-web-components-technica...
• UI5 Controls vs UI5 Web Components: Why - https://community.sap.com/t5/technology-blogs-by-members/ui5-controls-vs-ui5-web-components-why/ba-p... 

UI5 Controls demo project

The UI5 Controls demo project exists out of two artifacts, a UI5 library that contains the UI5 controls and a UI5 app:

It can help to make a dedicated folder where you put in the different artifacts for the UI5 Control demo together. In this folder you can clone the following GitHub Repositories:

• UI5 Library: https://github.com/lemaiwo/ui5-control-space-library.git
• UI5 App: https://github.com/lemaiwo/ui5-control-space-demoapp.git

Run the following commands for both starting with the library:

• git clone <url-repo>
• npm i
• npm run build

Once done for both you can run the app using npm start or npm run start:dist. This last one will run from the dist folder as a prebuild version of the app like it runs in production.

The library is connected to the app using local npm dependencies in the package.json:

This is resolved by the UI5 tooling and load the library when starting the UI5 app.

UI5 Web Components demo project

The UI5 Web Components demo project exists out of tree artifacts:

• A UI5 Web Component package that contains the web components
• A UI5 Library that contains the UI5 control wrappers for the web components
• A UI5 app that consumes the Web Components through the UI5 controls from the UI5 library

It can again help to make a dedicated folder where you put in the different artifacts for the UI5 Web Component demo together. In this folder you can clone the following GitHub Repositories:

• Web Component package: https://github.com/lemaiwo/ui5-webc-space-package.git
• UI5 Library: https://github.com/lemaiwo/ui5-webc-space-library.git
• UI5 App: https://github.com/lemaiwo/ui5-webc-space-demoapp.git

Run the following commands for both starting with the library:

• git clone <url-repo>
• npm i
• npm run build
  • Use git bash for building the Web Component package

Once done for both you can run the app using npm start or npm run start:dist. This last one will run from the dist folder as a prebuild version of the app like it runs in production.

The UI5 library is connected to the UI5 Web Component package using local npm dependencies in the package.json of the UI5 Library:

This is needed for the library to build and generate the UI5 controls.

The UI5 app is again connected to the UI5 library also using local npm dependencies in the package.json of the UI5 app:

In addition, if you want to create your own UI5 Web Component and integrate it in your UI5 app you can follow this blog post series: https://community.sap.com/t5/technology-blogs-by-members/ui5con-2023-ui5-web-component/ba-p/13555277

Result

In the end, you should have a folder structure like this: