UI5 Ecosystem Showcase

The ui5-tooling-modules package is a UI5 CLI extension that allows UI5 applications to consume NPM packages as if they were AMD modules. It automates the conversion of CommonJS and ES6 modules from node_modules into the UI5-compatible AMD format using Rollup during both development and build processes.

Key Capabilities:

• Zero Configuration NPM Integration: Import NPM packages directly using sap.ui.define(["npm-package"], ...).
• Automatic Transformation: Transparently converts ES6/CommonJS to UI5 AMD format.
• Web Components Support: Automatically generates UI5 control wrappers for Web Components.
• Performance Optimization: Utilizes caching, bundling, and code splitting for production builds.

The ui5-ecosystem-showcase is a monorepo containing 28 community-maintained UI5 CLI extensions (tasks, middlewares, and full extensions) and several showcase applications that demonstrate how to use them.

Key Capabilities

• Tasks: Extend the UI5 build process (e.g., ui5-task-zipper, ui5-task-minify-xml).
• Middlewares: Extend the UI5 development server (e.g., ui5-middleware-livereload, ui5-middleware-simpleproxy).
• Tooling: Enhance the development experience (e.g., ui5-tooling-transpile, ui5-tooling-modules).

Repository Structure

• packages/: Contains the source code for the published UI5 CLI extensions.
• showcases/: Contains demo applications (e.g., ui5-tsapp, cds-bookshop) that exercise the extensions.

The ui5-bookshop application serves as a demonstration of how to consume custom UI5 CLI extensions within a real-world application context.

To understand the specific configuration and dependencies used in this showcase, you should examine two key files:

1. ui5.yaml: Contains the UI5 CLI configuration, including the enabled extensions.
2. package.json: Lists the npm package dependencies and their associated configuration options.

WARNING

This sample currently uses a JSONModel to load CAP (Cloud Application Programming Model) data. For production use cases, you should replace this with an ODataModel to properly consume CAP services.

The ui5-bookshop-viewer is a standalone sample application designed to demonstrate how to consume a CAP (Cloud Application Programming Model) server, specifically cds-bookshop, within a UI5 server environment. It serves as a practical implementation guide for using the ui5-middleware-cap middleware.

To understand the specific configuration and dependencies used in this demo, inspect the following files in the repository:

• ui5.yaml: Contains the UI5 CLI configuration, including middleware setup.
• package.json: Lists the npm package dependencies and configuration options.

The UI5 CLI is designed to be extensible. The ecosystem consists of community-maintained custom tasks and middlewares that enhance the development experience.

Common use cases for these extensions include:

• Live reloading and TypeScript transpilation.
• Backend proxies for connectivity.
• PWA enablement and copyright headers.
• Direct consumption of NPM modules within UI5 applications.

The cds-bookshop-ui5-viewer is a sample application designed to demonstrate how a UI5 application consumes a CAP (Cloud Application Programming Model) server, specifically showcasing the usage of the ui5-middleware-cap middleware.

To understand the specific configuration and dependencies used to integrate UI5 with the CAP server, inspect the following files in the repository:

• ui5.yaml: Contains the UI5 CLI configuration, including middleware setup.
• package.json: Lists the npm package dependencies and configuration options required for the viewer.

This showcase provides a complete setup for developing UI5 libraries using TypeScript. It includes a development server, build processes, linting, type checking, JSDoc generation, and Karma-based unit testing.

To understand the specific UI5 CLI configuration and npm dependencies used in this setup, inspect the ui5.yaml and package.json files in the project root.

The ui5-ecosystem-showcase monorepo maintains and publishes 28 UI5 CLI extensions to NPM under the ui5-community ownership. These extensions are categorized into Middleware, Task, Tooling, CDS Integration, Test Tooling, and Utility.

To find the right extension for your needs, you can browse the catalog in this repository or use Best of UI5, which indexes a wider range of community packages including tasks, middlewares, libraries, controls, generators, and more.

The cds-bookshop application is a SAP Cloud Application Programming Model (CAP) project designed to showcase UI5 development on a CAP server. It follows the standard recommended CAP project layout:

• app/: Contains all content for UI frontends.
• db/: Contains domain models and data definitions.
• srv/: Contains service models and custom service logic.
• package.json: Contains project metadata and configuration.

This sample application demonstrates how to consume custom UI5 CLI extensions within a TypeScript-based UI5 application. To understand the specific configuration and dependencies used, inspect the following files in the repository:

• ui5.yaml: Contains the UI5 CLI configuration, including the enabled extensions and their settings.
• package.json: Defines the npm package dependencies and specific configuration options required for the TypeScript environment and extensions.