UI5 Tooling & Ecosystem

PETER MUESSIG, MARGOT WOLLNY
APR 01, 2020
UI5 TOOLING &
ECOSYSTEM
The modern CLI-based development experience to
develop, run and test UI5 applications and libraries

UI5

“Development Efficiency is Key!”

UI5 Tooling
The UI5 Tooling is developed as an open source project based on
Node.js. It offers a modular, configurable, and extensible
command line interface tailored for efficient development of
applications, libraries, and reuse components with the UI5
framework.
>_
Not the official logo, yet! ;-)

Increase the developer experience and thus the developer efficiency.
Motivation
Support for any IDE of choice
Flexible and extensible
Enable modern language features
Reuse of open source tooling
Easy to integrate

Architectural Overview
M Server Middleware
T Builder Task
Command Line
Web Browser
node.js script
…
SAP Business Application Studio
SAP Web IDE
LocalUI5 Tooling
Project
File
System
Server
Logger
Builder
CLI
MMM
TTT
M
T

Types define how a project can be configured and how it is built. The UI5 Tooling distinguishes
between the following types:
Project Types
Application
Defines the main or root project.
In a project’s dependency tree, there
should only be one project of type
application.
Theme-library
Defines a project with theming
resources for the controls of one or
multiple libraries.
Library
Defines a project with the aim to share
code across multiple projects in UI5
(e.g. for controls, reuse components).
Module
Defines a non-UI5 project like a
third party library. During build, it is
copied without modification.

Prerequisites & Installation
# Global installation of the UI5 CLI
npm install --global @ui5/cli
# Verify installation
ui5 --help
10 or higher
Or other Node.js package manager that
relies on package.json files

UI5 CLI usage
Commands
See: UI5 CLI.

The UI5 Tooling configuration of a project is located in a YAML
file named ui5.yaml.
 Must contain a project name, a project type, and a
specification version.
 Allows the definition of a path mapping (in case project
structure differs from expected structure), the file encoding
of properties files, a copyright string, and more…
 Defines build, server, and extension configuration
information.
 The build configuration can be extended with definition for
custom bundling.
Configuration
ui5.yaml
# Generate the ui5.yaml file
ui5 init
See: UI5 Tooling: Configuration
specVersion: '1.0'
metadata:
name: myapp
type: application
~
~
~
ui5.yaml

Demo Time
# Download the OpenUI5 Sample App
git clone https://github.com/SAP/openui5-
sample-app.git
# Start the development server
ui5 serve
# Build the OpenUI5 Sample App
ui5 build

Extensibility
The capabilities of the UI5 Tooling can be extended in three ways:
Extensions can be part of the configuration of a project or defined as modules to be shared across multiple
projects.
Custom Task
Enables the extension of the
build process by a custom build
task.
Custom Server Middleware
Enables the plugging of custom
middleware implementations
into the internal express server
of the UI5 server module.
Project Shim
Enables the definition or
extension of a project
configuration of a module.
(expert feature)

UI5 Tooling Ecosystem – an idea born at UI5con 2019
Peter, a proxy is
missing!Volker, the
UI5Tooling is
extensible, just
add it!
Ok, let‘s
proof this
together!
Hopefully…
”We can shape the UI5 development experience together!”
Volker Buzek; @vobu

UI5 Ecosystem
Showcase

UI5 Tooling – a modern CLI-based development experience!
Just a few steps ahead:
• Create a UI5 project in SAP Web IDE
• Download and enable the project to run locally
• Include custom tasks and middlewares
• Feel the difference of the development experience
>_
Not the official logo, yet! ;-)
# Start the development server
ui5 serve
Server started
URL: http://localhost:8080

Demo Time

UI5 Tooling Family &
Friends
Karma
>_
Yeoman
Migration TypeScript
…
…
…

OpenUI5 SAPUI5
>_
2.0

The UI5 Tooling 2.0 brings several enhancements:
 Advanced frontend package manager to avoid version
inconsistencies with a shared local dependency cache (not
per project, like npm)
 UI5 framework dependencies are managed in the
ui5.yaml and can be OpenUI5 or SAPUI5:
– Specify one version for all UI5 libraries of the framework
– Declare the required UI5 libraries
 New CLI commands:
– ui5 use: select a framework and the framework version
– ui5 add: add one or more library dependencies
 Introduces validation of the ui5.yaml file to improve the
error detection
 Properties files encoding now defaults to UTF-8
UI5 Tooling 2.0
Release: April, 01 2020
specVersion: '2.0'
metadata:
name: myapp
type: application
# UI5 dependencies
framework:
name: SAPUI5
version: 1.76.0
libraries:
- name: sap.ui.core
- name: sap.m
- name: themelib_sap_fiori_3
- name: sap.suite.ui.microchart
~
See: UI5 Tooling 2.0
# Use the 1.76.0 SAPUI5 framework version
ui5 use SAPUI5@1.76.0
# Add the dependency to microchart library
ui5 add sap.suite.ui.microchart
ui5.yaml
* New UI5 Tooling 2.0 features require specVersion: '2.0’ in ui5.yaml!

What else
 Project creation via a primitive SAPUI5 Yeoman generator
 Provides 3 templates: Worklist, Master Detail, Worklist OData V4
# Install the SAPUI5 Yeoman generator
npm install --global @sapui5/generator-sapui5-templates
# Run the generator (select the template from list in question step)
yo @sapui5/sapui5-templates
 Continuously deliver the TypeScript definitions for OpenUI5/SAPUI5
 Enables basic code-completion for UI5 development
# Install the DTS files for OpenUI5 (available for 1.60)
npm install @openui5/ts-types
# Install the DTS files for SAPUI5 (will be available for 1.71, >1.75)
npm install @sapui5/ts-types EXPERIMENTAL

What’s next
 Enable a modern development experience for UI5 by using a Babel toolchain (focusing on app development)
 Open-source solutions already exist, it is all about using them properly (*)
 Using TypeScript to benefit from code-completion and extended checks in any editor
 Utilize Babel to transpile ES6+ features back to UI5 APIs (such as import/export to sap.ui.define/require)
DISCLAIMER: no warranties / no timelines yet!(*) Independent from UI5 Tooling (integrated via extensibility)

Further resources
 UI5 Tooling Project on GitHub
 UI5 Tooling Documentation
 UI5 Tooling Feedback/Issues
 Introducing the UI5 Tooling for SAPUI5 projects Blog
 The UI5 Tooling and SAPUI5 – The Next Step Blog
 Utilize UI5 tooling's extension capabilities for an improved development experience Blog
 End to end setup of local development environment with ui5 tooling Blog
 UI5 Ecosystem Showcase on GitHub

More links:
 Karma UI5 Project on GitHub
 Migration Tools Project on GitHub
 Migration Tools Blog
 Yeoman SAPUI5 Templates Project on NPM.js
 TypeScript UI5 Project on GitHub

THANK
YOU
Peter Muessig
Chief Architect, SAPUI5
peter.muessig@sap.com
Twitter: @pmuessig
SAP Community: @peter.muessig
Margot Wollny
Product Expert, SAPUI5
margot.wollny@sap.com
SAP Community: @margot.wollny

© 2020 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of
SAP SE or an SAP affiliate company.
The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its
distributors contain proprietary software components of other software vendors. National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or
warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty
statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional
warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or
any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation,
and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platforms, directions, and
functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason
without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or
functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ
materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, and they
should not be relied upon in making purchasing decisions.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered
trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/copyright for additional trademark information and notices.
www.sap.com/contactsap
Follow us

www.sap.com/germany/contactsap
© 2020 SAP SE oder ein SAP-Konzernunternehmen. Alle Rechte vorbehalten.
Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer,
ohne die ausdrückliche schriftliche Genehmigung durch SAP SE oder ein SAP-Konzernunternehmen nicht gestattet.
In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden. Die von SAP SE oder deren
Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten auch anderer Softwarehersteller enthalten. Produkte
können länderspezifische Unterschiede aufweisen.
Die vorliegenden Unterlagen werden von der SAP SE oder einem SAP-Konzernunternehmen bereitgestellt und dienen ausschließlich
zu Informationszwecken. Die SAP SE oder ihre Konzernunternehmen übernehmen keinerlei Haftung oder Gewährleistung für Fehler
oder Unvollständigkeiten in dieser Publikation. Die SAP SE oder ein SAP-Konzernunternehmen steht lediglich für Produkte und
Dienstleistungen nach der Maßgabe ein, die in der Vereinbarung über die jeweiligen Produkte und Dienstleistungen ausdrücklich
geregelt ist. Keine der hierin enthaltenen Informationen ist als zusätzliche Garantie zu interpretieren.
Insbesondere sind die SAP SE oder ihre Konzernunternehmen in keiner Weise verpflichtet, in dieser Publikation oder einer
zugehörigen Präsentation dargestellte Geschäftsabläufe zu verfolgen oder hierin wiedergegebene Funktionen zu entwickeln oder zu
veröffentlichen. Diese Publikation oder eine zugehörige Präsentation, die Strategie und etwaige künftige Entwicklungen, Produkte
und/oder Plattformen der SAP SE oder ihrer Konzernunternehmen können von der SAP SE oder ihren Konzernunternehmen jederzeit
und ohne Angabe von Gründen unangekündigt geändert werden. Die in dieser Publikation enthaltenen Informationen stellen keine
Zusage, kein Versprechen und keine rechtliche Verpflichtung zur Lieferung von Material, Code oder Funktionen dar. Sämtliche
vorausschauenden Aussagen unterliegen unterschiedlichen Risiken und Unsicherheiten, durch die die tatsächlichen Ergebnisse von
den Erwartungen abweichen können. Dem Leser wird empfohlen, diesen vorausschauenden Aussagen kein übertriebenes Vertrauen
zu schenken und sich bei Kaufentscheidungen nicht auf sie zu stützen.
SAP und andere in diesem Dokument erwähnte Produkte und Dienstleistungen von SAP sowie die dazugehörigen Logos sind Marken
oder eingetragene Marken der SAP SE (oder von einem SAP-Konzernunternehmen) in Deutschland und verschiedenen anderen
Ländern weltweit. Alle anderen Namen von Produkten und Dienstleistungen sind Marken der jeweiligen Firmen.
Zusätzliche Informationen zur Marke und Vermerke finden Sie auf der Seite www.sap.com/corporate/de/legal/copyright.html.
SAP folgen auf

UI5 Tooling & Ecosystem

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à UI5 Tooling & Ecosystem

Similaire à UI5 Tooling & Ecosystem (20)

Plus de Peter Muessig

Plus de Peter Muessig (7)

Dernier

Dernier (20)

UI5 Tooling & Ecosystem