hacking-away-sampleapp
A UI5con 2022 demo app showing an end-to-end TypeScript setup for a UI5 application with a custom UI5 library, backed by a CAP service, in a pnpm monorepo with wdi5 tests.
The repository is a pnpm monorepo with three packages: a UI5 application, a custom UI5 library consumed as a regular dependency, and a CAP server that the application proxies to. The TypeScript compilation and the conversion from ES6 module syntax to UI5's own module loading run together through Babel, using babel-plugin-transform-modules-ui5 for the latter step. End-to-end tests run with wdi5wdio-ui5-serviceEnd-to-end testing for UI5 as a WebdriverIO service that drives a real browser through UI5's own test API, so a test addresses controls with OPA5-compatible selectors rather than DOM nodes.community org, ui5.
Facts
Where it sits
Who is behind it
In the atlas: maintains 69@ui5-communitymaintainerWouter LemaireContributes to this
In the atlas: maintains 25, contributes to 39, wrote 12@lemaiwoPeter MuessigContributes to this
In the atlas: maintains 14, contributes to 80, wrote 1@petermuessigVolker BuzekContributes to this
In the atlas: maintains 7, contributes to 53, wrote 2@vobu3 contributors
What it declares
Every artifact
- Type
- Sample
- Origin
- By a community org
- Use as
- A reference
As a sample
- Form
- A reference application
Connections
Writing UI5 apps and libraries in TypeScript
Download
README
quoted from ui5-community/hacking-away-sampleapp under Apache-2.0, readSample ToDo app UI5con 2022
Description
This app demonstrates a TypeScript setup for developing UI5 applications containing a custom UI5 Library with a custom control and a CAP project as a backend.
The ui package is inspired by the SAP-samples/ui5-typescript-helloworld project which also contains a detailed step-by-step guide. It explains how this setup is created and how all the bits and pieces fit together
| ☝️ Overview of TypeScript-related Entities |
|---|
The UI5 type definitions (*.d.ts files) are loaded as dev dependency from npm. They are work in progress, so while they should be working well already, we are still improving them, which might also lead to breaking changes. |
The file tsconfig.json contains the configuration for the TypeScript compilation, including a reference to these UI5 *.d.ts files. |
Normally, the UI5 JavaScript files (controllers, Component.js etc.) would reside in the webapp folder. Now they are in the src folder. The TypeScript compilation will create the webapp folder and put all output there. |
In addition to the TypeScript compilation, there is also a conversion from the ES6 module and class syntax used in the source files to the classic UI5 module loading and class definition syntax (sap.ui.define(...) and superClass.extend(...)). This conversion is using the babel-plugin-transform-modules-ui5 project from Ryan Murphy. |
| Both, the TypeScript compilation and the ES6 syntax transformation, are executed by Babel, as configured in the file .babelrc.json |
This combined transformation is triggered by both the build:ts and watch:ts scripts in package.json. |
Project setup
PNPM as package manager for monorepo
Separate packages for:
- UI5 application: packages/ui/
- UI5 library: packages/library/
- CAP server: packages/server/
CAP server is proxied by UI5 application
UI5 application depends on the UI5 library project which is consumed as regular dependency
UI setup
This UI app demonstrates on how to get the most out of TypeScript using classes, generic types and much more. This is all explained in details in the following blog post: https://blogs.sap.com/2021/12/07/my-first-experience-with-typescript-in-ui5-classes-and-state-model-manager/
The app is separated in multiple layers:
- Service layer which handles the communication to the backend
- Data model layer which contains a virtual replication of the data model in the backend and handles everything related to the internal data model
- View/controller will be dedicated to handle user interaction
UI Library
More information regarding custom UI5 Libraries and custom controls can be found here: https://github.com/SAP-samples/ui5-typescript-control-library
Testing
The end-to-end tests are done by using WDI5: https://github.com/ui5-community/wdi5
Requirements
npm for dependency management.
Preparation
Use npm to install the dependencies:
npm iRun the App
Execute the following command to run the app locally for development in watch mode (the browser reloads the app automatically when there are changes in the source code):
npm startAs shown in the terminal after executing this command, the app is then running on http://localhost:8080/index.html. A browser window with this URL should automatically open.
Debug the App
In the browser, you can directly debug the original TypeScript code, which is supplied via sourcemaps (need to be enabled in the browser's developer console if it does not work straight away). If the browser doesn't automatically jump to the TypeScript code when setting breakpoints, use e.g. Ctrl+P in Chrome to open the *.ts file you want to debug.
Build the App
Execute the following command to build all packages at once:
npm run buildReferences
Once you have understood the setup and want to inspect the code of a slightly more comprehensive UI5 app written in TypeScript, you can check out the TypeScript version of the UI5 CAP Event App Sample.
License
This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.
Details
Sources
Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.
Compatibility and provenance
Contributors
History in the atlas
- First seen.
For your agent
- Ref
artifact:ui5-community-hacking-away-sampleapp- JSON
- /artifacts/ui5-community-hacking-away-sampleapp.json
- MCP
- Connecting an agent