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?
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.
Um eine UI5-Anwendung mit Fiori-Optik und -UX zu generieren, hat sich der auf dem populären Yeoman basierende Easy-ui5-Generator der UI5 Community etabliert. Zusätzlich zur Abfrage vieler Einstellungen integriert Easy-ui5 Teile der SAP-Open-Source-Initiative Open UX Tools und bezieht auch gleich Deployment-Szenarien mit in die Generierung ein. Ein npx yo easy-ui5 auf der Kommandozeile genügt, um loszulegen.
Tooling für UI5-Anwendungen
Das offizielle UI5-Tooling von SAP ermöglicht das lokale Entwickeln von UI5-Anwendungen. Wie Easy-ui5 ist es in Node.js implementiert.
ui5 init bestückt eine (bestehende) UI5-App mit dem Tooling (Easy-ui5 erledigt das out of the box), ui5 use OpenUI5@latest wählt Framework-Variante und -Version. Anschließend genügt ein ui5 serve, um lokal einen Webserver samt UI5-Anwendungen zu starten - voilà!
Über die UI5-Community und die SAP Fiori Tools stehen zudem eine Menge npm-Module zur Verfügung, die das UI5-Tooling um spezielle Features erweitert. Der UI15 Ecosystem Showcase demonstriert diesen Plugin-Ansatz und ist Heimathafen verschiedener solcher Erweiterungen. Stellvertretend zu nennen seien Proxies zur Anbindung von Backend-Systemen sowie Live-Reloading zum (na ja) automatischen Neuladen der UI5-App nach Quellcode-Änderung.
Hauptsache, das Testing funktioniert
Für Unit- und Komponententests stehen QUnit und dessen Erweiterung namens OPA5 zur Verfügung. QUnit gehört sicher nicht zu den Hipstern der Testing-Frameworks, ist aber langjährig einsatzerprobt und etabliert. Ein Charakteristikum, das kongruent ist mit den Enterprise-Eigenschaften von UI5 an sich, wo Rückwärtskompatibilität und Verlässlichkeit vor Unterstützung von Buzzword-Trends gehen (einen in Rust geschriebenen Bundler zur Optimierung von "Island Architectures" wird es für UI5 wahrscheinlich niemals geben).
Für Integrationstests wurde kürzlich auf wdi5 gewechselt - ein Plugin für Webdriver.IO, das die Fernsteuerung von Browsern über das Webdriver-Protokoll ermöglicht. Mit wdi5 lassen sich so UI5-Anwendungen sprichwörtlich durchklicken, um die Funktionen der Oberfläche nachhaltig abzusichern.
Einen Schritt in Richtung etablierter, SAP-externer Standard wurde mit der kürzlich eingezogenen Typescript-Unterstützung getan. Nebst den immanenten Vorteilen der Javascript-Erweiterung an sich hat sie vor allem eine Verbesserung der Developer Experience für UI5 zur Folge: Autovervollständigung während des Codings wird durch die TS-Unterstützung des jeweiligen Editors gegeben, Geschäftslogiken ("Controller") sehen als Klassenerweiterung semantisch passender aus als reine AMD-artige Javascript-Definitionen.
Mit den als Standard-Programmiermodell gesetzten UI5 Web Components für die UI-Schicht ist ein weiterer Schritt näher an einen etablierten Standard erfolgt. Waren vorher sogenannte Controls die gesetzten UI-Elemente, von UI5 direkt im Rendering erzeugt, bieten Web Components einen leichtgewichtigeren Ansatz, der sich in geringerer Dateigröße und besserer Performance niederschlägt.
Vorgefertigte Themes nutzen
Sowohl Web Components als auch Controls folgen standardmäßig den Fiori-Gestaltungsrichtlinen. Dadurch hat man bei der Nutzung des UI5-Frameworks gleichzeitig CSS-formatierte UI-Elemente und grafische Entwurfsmuster zur Verfügung. Sie sind einheitlich in sogenannten Themeszusammengefasst, mit SAP Horizon als aktuellster Inkarnation.
Die Anpassung der Optik kann über den Theme Designer erfolgen, einem SaaS-Angebot von SAP auf der hauseigenen Cloud-Plattform Business Technology Platform, oder per CSS. Für den Theme Designer spricht, dass damit nicht nur Themes für UI5 erstellt und bearbeitet werden, sondern diese auch in anderen UI Komponenten von SAP wie beispielsweise Screen Personas zum Einsatz kommen können.
Die Anpassung der Themes per Hand in Stylesheets folgt der Standard-CSS-Entwicklung, etwas komfortabler auch dank der Unterstützung von CSS-Variablen und LESS in UI5. Trotzdem zeigt sich hier ein Nachteil der engen Verzahnung zwischen Optik und Framework: Die Themes an sich sind aufgrund ihres Anspruchs auf Homogenität über alle UI-Elemente hinweg bereits komplex.
Größere Anpassungen bedingen schnell einen hohen Aufwand - und müssten sich streng genommen selbst an die Fiori Design Guidelines halten, um nicht mit den in den Themes enthaltenen UX-Mustern zu brechen. Jedoch werden gerade in solchen Freestyle-UI5-Projekten Regelbrüche bewusst herbeigeführt, um spezielle Design- und/oder Usability-Ziele zu erreichen.
Outside the Box
Für die meisten Anwender wird eine UI5-Anwendung, die in Fiori-Optik erscheint, sofort einer SAP-Anwendung gleichgesetzt - obwohl aus technologischer und Usability-Sicht nichts gegen UI5 und Fiori "da draußen" spricht. Templates und Framework gibt es schlüsselfertig aus der Cloud über das Content Delivery Network zu beziehen, die UI-Elemente müssen nur noch zu einer Oberfläche kombiniert werden.
Innerhalb des SAP-Kosmos führt sowieso kein Weg mehr an UI5 und Fiori vorbei. Beides ist im kompletten Softwareportfolio des Konzerns strategisch gesetzt zur Erstellung von (Web-) Oberflächen. Im Vorzeigeprodukt S/4HANA sollen wo immer möglich SAP-GUIs durch Fiori-/UI5-Oberflächen ersetzt werden. Wer im SAP-Umfeld Software entwickelt, ist daher gut beraten, schnellstmöglich auf Fiori/UI5 umzusteigen.
Quellcode für alle Beispiele dieses Artikels gibt es bei Github.
SAP UI5 und Fiori: Die Optik von SAP - Golem.de - Golem.de
Read More
No comments:
Post a Comment