SAP UI5 und Fiori: Die Optik von SAP

Fiori ist ein UX- und Designkonzept von SAP. Was im SAP-Universum gut genug ist, kann für den Rest der Welt nicht schlecht sein - oder?

Artikel von Volker Buzek veröffentlicht am 6. April 2022, 9:00 Uhr

Fiori gibt SAP eine moderne Optik. (Bild: SAP/Montage: Golem.de)

UI5 als offenes Framework mit Enterprise-Qualitäten und Fiori als Usability-Richtline mit einer Vielzahl aufeinander abgestimmter Oberflächenelemente stehen stellvertretend für eine Software-Generation, die nicht mehr das SAP deiner Großmutter ist. Framework, Themes mit CSS-basierten UI-Elementen, UX-Richtlinien: All das bekommt man als Entwicklerin out of the box an die Hand, nichts davon ist technologisch an SAP gekoppelt.

Eine UI5-Anwendung kann auf jedem Webserver laufen, die Anbindung von Backends über Proxy-Mechanismen und OData/REST ist infrastrukturell die gleiche wie für alle Webanwendungen. Wenn das unter Apache 2.0 stehende OpenUI5 verwendet wird (anstelle von SAPUI5), spricht auch lizenztechnisch nichts mehr gegen den Einsatz von UI5 außerhalb des SAP-Universums.

Die Fiori-Optik hat aber einen hohen Wiedererkennungswert und wird direkt mit SAP assoziiert. Durch die enge Verbindung zwischen UI/UX und Framework verhält es sich mit UI5 etwas nach dem "duck typing"-Prinzip: Wenn es läuft wie SAP und aussieht wie SAP, dann muss es wohl von SAP sein.

SAP, das moderner aussieht und besser bedienbar ist

Seit 2013 bemüht sich SAP in seinen Produkten um ein einheitliches "Look and Feel". War die Mensch-Maschinen-Interaktion jahrzehntelang geprägt vom spröden Charme des SAP-GUI, soll jetzt Fiori für eine moderne Optik und Bedienbarkeit sorgen.

"Fiori" hat im SAP-Kontext mehrere Bedeutungen. Es bezeichnet einen Designkanon, der die optische Gestaltung von Oberflächen definiert. Es steht für ein UX-Konzept, das die Interaktion mit Web- und Desktop-Anwendungen des Konzerns beschreibt. Und drittens ist es ein Oberbegriff für Apps des SAP-Kosmos generell: Es gibt beispielsweise die Fiori Reference Library als eine Übersicht von Standard-Webanwendungen; ebenso dient der Begriff "Fiori-Einführung" häufig als Synonym für den Einsatz von (mobilen) Anwendungen im Unternehmen.

Dieser Artikel betrachtet Fiori als Design- und UX-Paradigma in Webanwendungen - was technisch vom UI5-Framework implementiert wird. Auch hier ist eine Begriffsklärung notwendig. UI5 existiert in zwei Varianten, OpenUI5 und SAPUI5. Wie der Name bereits vermuten lässt, steht OpenUI5 unter der freien Apache-2.0-Lizenz. Es bildet außerdem den Kern von SAPUI5, das OpenUI5 um Closed-Source-Komponenten erweitert. Da technologisch gleich und um die Verwirrung möglichst gering zu halten, hat sich UI5 als Synonym für OpenUI5 und SAPUI5 etabliert.

UI5 folgt dem Model-View-View-Model-Prinzip

Ein Blick unter die Haube zeigt UI5 als SPA-(Single Page Application)-Javascript-Framework, bestehend aus einer geschickten Kombination von bekannten Bibliotheken und selbst entwickelten Modulen. XML-Dateien bilden deklarative "Views", Javascript-Dateien zugehörige Controller für Geschäftslogik und JSON-Dateien definieren lokale (View- und State-)Modelle.

Hier wird klar: UI5 folgt dem Model-View-View-Model-Prinzip, um UI-, Geschäftslogik- und Datenversorgungsschicht zu trennen. First-class citizens im UI5-Universum sind OData (v2 und v4) als Protokoll zur Anbindung von Backend-Systemen. "Plain" REST ist über oben erwähnt JSON-Modelle möglich, weitere Adapter (wie z.B. GraphQL) lassen sich dank Plugin-Mechanismen nachrüsten.