Best Practices 23:28

Best Practices for Developers

SAP UI5 Demo Kit

DSAG´s UI5 Best Practice Guide

Sonstiges

Brandeis Consulting & Cadao

SAP UI5 Demo Kit

Den Best Practices Guide der SAP findet man im UI5 Demo Kit.

Da das SAPUI5 Framework laufend weierentwickelt wird, wird auch der Best Practice Guide der SAP regelmäßig angepasst.

Brandeis Consulting & Cadao

SAP UI5 Best Practices - Don't Use Depricatd or Experimental Features

Depricated Artifacts

  • Werden früher oder später "verschwinden"
  • Möglicherweise gibt es einen Nachfolger
  • Nach einem Upgrade (Neue UI5 Version) könnte es krachen

Experimenmtal APIs

  • Nicht für produktive Verwendung vorgesehen bzw. nur auf eigenes Risiko
  • Können jederzeit durch SAP geändert oder gelöscht werden
  • Niemals für produktiven Einsatz verwenden
Brandeis Consulting & Cadao

SAP UI5 Best Practices - Load Only What Your Really Need

Library Dependencies sollten Up To Date sein

  • In der manifest (oder im SAPUI5 bootstrap) sollten die benötigten Libraries angegeben sein
  • Dadurch werden die Libraries gleich beim Start geladen.
    "dependencies": {
	  "minUI5Version": "1.84.0",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {},
                "sap.f": {}
      }

Lokale Dependencies

  • In den Controller Files, sollten alle Dependencies via sap.ui.define definiert sein.
  • Nicht verwendet Depencencies sollten sofort entfernt werden
sap.ui.define([
    "db/com/dbadvanced/controller/BaseController",
	"sap/m/MessageToast"
],
Brandeis Consulting & Cadao

SAP UI5 Best Practices - Load Only What Your Really Need

Lazy Loading

Manche Controls können Daten selektiv nachlesen.

  • sap.m.List bietet z.B. growing und growingThreashold
Brandeis Consulting & Cadao

SAP UI5 Best Practices - MVC

XML Views

Es gibt ja einige weitere View-Typen: JavaScript, JSON oder HTML.

  • Es wird dringend geraten nur XML Views zu verwenden
  • XML können einfach geändert werden und sind für Tools einfach zu parsen

Controller

Jeder View hat seinen eigenen Controller. In Javascript oder TypeScript

  • Ausnahme BaseController. Hat keinen View, dient als "Mutter" für die View Controller
Brandeis Consulting & Cadao

SAP UI5 Best Practices - Views sollten kurz und einfach sein

Default Namespace sap.m.

  • Es hat sich durchgesetzt, dass sap.m. immer als Default Namespace verwendet wird
  • Weitere Controls bekommen einen eigenen Namespace. Kurz und einfach wenn möglich

Ausnahmen können die Regel bestätigen:

<mvc:View
    controllerName="db.com.dbadvanced.controller.MainView"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns:m="sap.m"
	xmlns="sap.ui.table"

Aufräumen

  • Nicht verwendet Aliases entfernen
  • Default Aggegrationen (lines, items, ... ) können weggelassen werden (sagt SAP)
    • Unsere Empfehlung ist, diese zu verwenden
  • "Self-Closing" verwenden <StandardListItem title="Test" />
  • View Modularisierung mit XML Fragments (wie Include)
  • Immer nach dem "einfachsten" Control ausschau halten
Brandeis Consulting & Cadao

SAP UI5 Best Practices - Stabile IDs verwenden

SAPUI5 generiert dynamische IDs wenn keine vergeben sind. Im ersten Moment ganz gut, später kann dies jedoch zu Problemen führen.

Wie bekomme ich stabile IDs

  • Einfach mit id="abcd". Beispiele <page id="page">, <Table id="table">
  • Zumindet bei jenen Controls, welche von den nachfolgenden Tools unterstützt werden sollen:
    • SAPUI Flexibility
    • Automatisierte Tests
    • Key User Tools
    • Screen Reader
Brandeis Consulting & Cadao

SAP UI5 Best Practices - Asynchrones Loading

SAPUI5 wurde im Hinblick der Ladevorgänge nach und nach verbessert. Um diese Verbesserungen zu nutzen wird empfohlen, das asynchrone Laden einzuschalten.

  • Dadurch werden die Dateien parallel aufgerufen
  • Ohne asynchrones laden, weden die Dateien sequentiell geladen

Manifest.json

  "sap.ui5": {
    "flexEnabled": false,
    "rootView": {
      "viewName": "db.com.dbadvanced.view.MainView",
      "type": "XML",
      "async": true,

index.html

<script 
	id="sap-ui-bootstrap"
	src="/resources/sap-ui-core.js"
	data-sap-ui-theme="sap_horizon"
	data-sap-ui-compat-version="edge"
	data-sap-ui-async="true"
Brandeis Consulting & Cadao

SAP UI5 Best Practices - Public APIs

Alle SAPUI5 APIs sind einem möglichen "Typ" zugeordnet. Es sollten nur public APIs verwendet werden.

Welche "Typen" gibt es?

  • public - generell verfügbar und kann verwendet werden
  • protected - wenn überhaupt, dann nur bei der Control Entwicklung verwenden
  • private, ui5-restricted, sap-restricted - nicht verwenden
  • Die SAP Dokumenten enthält nur APIs welche public oder protected sind.
Brandeis Consulting & Cadao

SAP UI5 Best Practices - Performance Checklist

Es gibt eine umfangreiche Performance Checkliste zu SAPUI5. Hier ein paar ausgewählte Highlihts

  • Asynchrones laden aktivieren
  • OData Model Preload aktivieren
  • Verwenden von $select bei Aggregats-Binding (OData V2)
  • OData V4 ist schneller als OData V2

Performance Checklist ui5.sap.com

Brandeis Consulting & Cadao

DSAG's UI5 Best Practice - i18n

SAPUI5 bietet die Möglichkeit, sprachunabhängige Anwendungen zu implementieren. Die nötigen sprachabhängigen Texte werden im Projekt als Key-Value-Paare hinterlegt.

Diese Dateien werden normalerweise in dem Ordner i18n abgelegt.

  • i18n
    • i18n.properties
    • i18n_en.properties
    • i18n_de.properties
    • i18n_de_AT.properties <--- Regionen, Subtags wenn möglich vermeiden
Brandeis Consulting & Cadao

DSAG's UI5 Best Practice - i18n - CamelCase, Punkte und Platzhalter

CamelCase und Punkte

Bei den Keys ist CamelCase möglich und Punkte können ebenso verwendet werden

mainView.buttonTextAccept=Accept
mainView.table.column.streetName=Street

Platzhalter

Ähnlich wie bei den T100 Messages in SAP können sprachabhängige Texte Platzhalter enthalten. Diese werden zur Laufzeit dynamisch durch die Anwendungslogik befüllt.

mainView.buttonTextAccept=Accept {0} {1}

Eine Platzhalterdefinition besteht aus einer öffnenden und einer schließenden Kammer

Brandeis Consulting & Cadao

DSAG's UI5 Best Practice - i18n - Textklassifizierung (Annotation)

Meist werden die Übersetzungen nicht vom Entwickler erstellt. Damit die "Übersetzer" zusätzliche Informationen bekommen, können Textklassifizierungen verwendet werden.

Die Annotaiton sieht wie folgt aus:

#<TextType>,<MaximumLength>:<AdditionalContextInformation>
  • MaximumLength und AdditionalContextInformationen sind optional
  • Vordefinierte Texttypen z.B. XBUT, XFLD, XCOL, XMSG, ...
 #XBUT,20
 btnSave=Speichern
 btnCancel=Abbrechen
 #XMSG,20: Message Toast Meldung für fehlerhaftes Datum
 txtParameterDateError=Datum ungültig {0}
Brandeis Consulting & Cadao

DSAG's UI5 Best Practice - i18n - supportedLocals und fallbackLocale

Seit UI5 1.77 können in der Manifest ergänzende Angaben zu den Language Files gemacht werden.

  • supportedLocals - Welche Sprachen werden unterstützt?
  • fallbackLocal - Fallbacksprache
  "i18n": {
    "bundleUrl": "i18n/i18n.properties",
    "supportedLocales": ["en", "de"],
    "fallbackLocale": "en"
Brandeis Consulting & Cadao

DSAG's UI5 Best Practice - Naming Conventions - XML Views

XML Views

In den XML Views eines UI5 Projekts sollten immer die gleiche Bibliothek (meist sap.m) als default namespace verwendet werden. Die Controls dieser Bibliothekten benötigen kein prefix

XML View

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:layout="sap.ui.layout"
    xmlns:form="sap.ui.layout.form"
    xmlns="sap.m">
</mvc:View>
Brandeis Consulting & Cadao

DSAG's UI5 Best Practice - Naming Conventions - Modelname

Modelname

In manchen UI5 Projekten werden mehrere Model verwendet. Ein gut gewählter Name tragt wesentlich zu einer bessereren Übersicht bei.

Controller

this.getView().setModel(oModel, "DisplayModel");

XML View

<Title text="Hello {DisplayModel>/recipient/firstName} {DisplayModel>/recipient/lastName}" />
Brandeis Consulting & Cadao

DSAG's UI5 Best Practice - Error Handling

Man kann Fehlermeldungen in zwei Kategorien einteilen:

  • Fehlermeldungen welche lokal in der UI5 Anwendung erzeugt und ausgegeben werden
  • Fehlermeldungen welche durch das Backendservice (OData) ausgelöst werden

Lokale Fehlermeldingen

  • Werden durch die UI5 Anwendung erzeugt und an passender Stelle ausgegeben
  • Der Fehlertext kommt aus den Language Files (i18n)

Backend Fehlermeldungen

  • Meldung kommt aus dem Backend und wird lediglich visualisiert oder ausgewertet
Brandeis Consulting & Cadao

DSAG's UI5 Best Practice - Error Handling - Backend Fehlermeldungen (OData)

SAPUI5 bietet dafür bis 1.118 den MessageManager und ab 1.118 den Nachfolger Messaging an.

  • sap.ui.core.message.MessageManager - depricated ab 1.118
  • sap.ui.core.Messaging - Verfügbar ab 1.118

Controller

sap.ui.define([
	"sap/ui/core/Messaging",
...
// set message model
this.getView().setModel(Messaging.getMessageModel(), "message");
// activate automatic message generation for complete view
Messaging.registerObject(this.getView(), true);
Brandeis Consulting & Cadao

DSAG's UI5 Best Practice - Data Binding

Property Binding

Eigenschaft eines Controls wird gegen einen Modellparameter gebunden.

text="{OverallStatusText}" 
text="{i18n>tableTitle}"

Element Binding

Bindet das gesamte Objekt in der Oberfläche gegen ein Objekt im Model.

oProductDetailPanel.bindElement({ path: sPath, model: "products" });

Aggregation Binding

Hier wird die Aggregation eines Controls gegen einen Modellparameter gebunden.

<Table
   rows="{/Travel}"
Brandeis Consulting & Cadao

Expression Binding

Ein Expression-Binding erlaubt uns, JavaScript-Ausdrücke in einem begrenzten Umfang in XML-Views zu verwenden.

Die Syntax für ein Expression-Binding ist {= JS-Ausdruck }

enabled="{= ${OverallStatus} === 'O' ? true : false }"
visible="{= ${status} === 'critical' }"
text="{= ${/amount} > 10000 ? ${i18n>/high} : ${i18n>/normal} }"
visible="{= ${/rating}.toUpperCase() === 'VIP' || ${/orderAmount} > 10000 }"
text="Hello {=${gender}==='male' ? 'Mr.' : 'Mrs.'} {lastName}"
type="{= ${Evaluation} === 'A' ? 'Success' : ${Evaluation} === 'R' || ${Evaluation} === 'F' ? 'Negative' : 'Emphasized' }"
type="{= ( ${ZzQuantCheckError} === true || ${to_order/OrderConfirmedYieldQty} * 1 === 0 )  &amp;&amp; ${Plant} === '0001' ? 'Negative' : 'Emphasized' }"

Ein paar Punkte sollten beachtet werden:

  • Vergleichsoperator < kann nicht verwendet werden -> &lt (oder den Vergleich umdrehen :-) )
  • Auch & muss durch &amp ersetzt werden
  • Komplexe Expressions durch eine custom formatter function ersetzen

Weitere Details: UI5 Demo Kit Expression Binding Dokumentation

Brandeis Consulting & Cadao

Expression Binding - custom formatter

  • Komplexe Expression Bindings können schwer zu verstehen sein
  • Der View wird dadurch komplizierer zu lesen
  • Mit einem custom formatter können wir die komplexität im View reduzieren

XML view

<Icon src="sap-icon://message-warning" visible="{path:'status', formatter:'.myFormatter'}">

Controller

myFormatter: function(sStatus) {
  return sStatus === "critical";
}
Brandeis Consulting & Cadao

Property Metadata Binding

Mit dem Property Metadata Binding können wir Inahlte aus den Metadaten wie z.B. den Inhalt von sap:label verwenden.

<m:Label text="{/#Travel/TravelID/@sap:label}" />
Brandeis Consulting & Cadao

Sonstiges

  • Datumsformatierungen: sap.ui.core.format.DateFormat verwenden
  • sap.base.log statt console.log
  • Fiori Elements first, Smart Controls second
  • Design Guidelines beachten
  • ...
Brandeis Consulting & Cadao