This page contains some of the complementary offerings from the UI5 ecosystem - toolchains, generators, and other cool community projects.
UI5 CLI is a state-of-the-art way to develop SAPUI5 projects by consuming SAPUI5 via npm. It's an open-source, modular, configurable, and extensible CLI for efficient development of applications, libraries, and reuse components with the SAPUI5 framework. Here's what you get with this CLI:
- Open source
- Flexibility and extensibility
- Easy integration
- Enablement of modern language features
- Support for any IDE of your choice
UI5 linter is a static code analysis tool for SAPUI5 projects. It checks JavaScript, TypeScript, XML, JSON, and other files in your project and reports findings.
UI5 linter scans your SAPUI5 project and detects issues that can prevent the project from running smoothly with SAPUI5 2.x.
- Usage of deprecated SAPUI5 libraries
- Usage of deprecated SAPUI5 framework APIs
- Usage of global variables
- Possible CSP violations
- Deprecated component and manifest configurations
- and many more
Easy-UI5 is an open-source Yeoman generator that should be used by everybody working with CLI tools to create simpleSAPUI5-based web-apps and other SAPUI5-related projects within seconds.
This generator has been created to simplify the creation of SAPUI5 prototypes. Now you can scaffold simple SAPUI5 projects from the shell/terminal of your choice. The current best practices (such as async) are already baked into our templates so you don't have to worry about the definition of the metadata files.
The purpose of this generator is to guide you through your first steps with SAPUI5 and SAP BTP deployments. Once you're familiar with those technologies, you might want to tweak the projects to adapt them for productive use cases (such as continuous deployment pipelines and full i18n).
- Easy-UI5 on GitHub
- Easy-UI5 on NPMJS
- Blog post: Easy-UI5 3.0 – From Community Contributions to Community Plugins
TypeScript is an extension of JavaScript that adds type information to the language. It helps developers catch errors early through type checking and by providing code assist in many supporting code editors (for example, through code completion and inline documentation). Browsers can't execute TypeScript directly, it needs to be transpiled to JavaScript, which can then be executed as usual.
For SAPUI5, we have published definition files that contain type definitions describing the SAPUI5 APIs and types. With the help of these definitions, you can write SAPUI5 apps in TypeScript and enjoy all the benefits that come with it.
Main topic: TypeScript Support in UI5
External resources:
- Documentation and resources: UI5 & TypeScript
- Tutorial: Learn App Development in UI5 and TypeScript
npm packages (check the individual packages for licensing information):
- UI5 type signatures on npm
- Babel preset UI5 transformer on npm to transform ES modules and classes to classic UI5 code
- TypeScript interface generator for control development on npm to support UI5 control development in TypeScript
Web Components are custom HTML tags based on standard web APIs like Custom Elements and Shadow DOM, supported by all modern browsers and compatible with most HTML-based UI frameworks.
UI5 Web Components is an open-source library developed by the UI5 team according to the SAP Fiori design, offering lightweight, framework-agnostic components with theming, accessibility, and internationalization support. Built on native Web Components, they integrate easily into any UI framework.
SAPUI5 supports embedding UI5 Web Components, translating their metadata into SAPUI5 controls. This enables seamless integration, including properties, events, and methods, within SAPUI5 applications. For more information, see Using Web Components.
wdi5 is a Webdriver.IO service that uses SAPUI5's test API. It is designed to run cross-platform end-to-end tests on a SAPUI5 application with selectors that are compatible to OPA5.
The Best of UI5 page lists a number projects related to the UI5 ecosystem. It includes UI5 CLI extensions (tasks and middlewares), Easy-UI5 subgenerators, custom UI5 libraries, as well as custom UI5 controls (as standalone NPM packages). It's the central place to find reusable projects around UI5.
It's entirely community-based, so any new additions are welcome!