Inhaltsverzeichnis
SAP Fiori stellt seit 2013 die Grundlage für die neue Oberflächentechnologie im SAP-Umfeld dar und bietet im Gegensatz zur klassischen SAP GUI den Benutzern eine einfache und einheitliche User Experience.
Fiori-Applikationen können auf verschiedene Weisen entwickelt werden, zum Beispiel über SAPUI5, Fiori Elements oder mobisys. Eine neue Entwicklung der SAP sind die UI5 Web Components, die eine Nutzung moderner und hochperformanter „Frameworks“ wie Angular (Google) oder React.js (Facebook) zulässt. Doch bevor wir diese neuen Wege zu Fiori und deren Vorteile ins Auge fassen, wollen wir zunächst kurz beleuchten, was Fiori-Applikationen eigentlich sind, was diese auszeichnet und für welche Anwendungsgebieten sie relevant sind.
SAP Fiori-Anwendungsgebiete
SAP Fiori-Anwendungen sind mittlerweile fester Bestandteil der Benutzeroberflächen der meisten SAP S/4HANA-Implementierungen. Speziell in mobilen logistischen Anwendungen entlang des Materialflusses gibt es kaum noch ein Projekt, das auf die moderne Gestaltung und die gesteigerte Benutzerakzeptanz der Oberflächen verzichtet. Hierbei finden sich SAP Fiori-Anwendungen häufig in den Bereichen Kommissionierung, Staplerleitsysteme, Produktionsrückmeldungen oder auch Verladekontrollen wieder. Ganz besonders wird dies im SAP Extended Warehouse Management (SAP EWM) fokussiert, das somit auch in vielen Fällen die systemische Grundlage für SAP Fiori-Anwendungen bildet.
SAP Fiori Design Guidelines
Um das Ziel einer einheitlichen und optimalen User Experience zu erreichen, stellt die SAP mit den Fiori Design Guidelines ein Regelwerk für die Umsetzung von Fiori-Applikationen auf.
In diesem Regelwerk werden einerseits die verschiedenen UI-Elemente beschrieben, aus denen die Applikationen aufgebaut werden, andererseits aber auch, wie diese miteinander zu einheitlichen und einfachen Benutzeroberflächen verknüpft werden. Der Fokus liegt dabei auf den Anwendern, sodass die Anwendungen durch die klaren Design-Prinzipien einfach verwendbar sind und geräteübergreifend funktionieren.
Diese Designprinzipien werden in den Fiori Design Guidelines in den folgenden fünf Grundprinzipien zusammengefasst:
- Rollenbasiert: Jeder Benutzer sieht nur die für sein Aufgabengebiet notwendigen Informationen und Applikationen.
- Adaptiv: SAP Fiori-Applikationen können geräteübergreifend verwendet werden und erlauben somit das Arbeiten von überall.
- Einfach: Fiori-Applikationen erlauben dem Benutzer, sich auf die wichtigsten Sachen zu konzentrieren und sind daher speziell auf den Anwendungsfall zugeschnitten.
- Konsistent: Egal, welche Anwendung der Benutzer benutzt - durch die einheitliche Benutzeroberfläche und Interaktion findet eine konsistente User Experience statt.
- Begeisternd: Fiori-Applikationen sollen den Benutzern bei ihrer Arbeit unterstützen und durch die Vereinfachung begeistern.
SAPUI5
Da die Fiori Design Guidelines selbst nur ein Regelwerk zur Umsetzung der Oberflächen von Fiori darstellen, wird für die Entwicklung von Fiori-Applikationen ein sogenanntes Framework benötigt, das die UI-Elemente von Fiori implementiert und somit die Entwicklung von einheitlichen Fiori-Anwendungen überhaupt erst ermöglicht.
SAPUI5 ist ein solches Framework und stellt die Referenzimplementierung der Fiori Guidelines dar. Tatsächlich haben sich die Fiori Guidelines aus eben diesem Projekt als Notwendigkeit ergeben, um Konsistenz in die bis dato sehr unterschiedlichen Designausprägungen zu bringen.
Daher sollte es nicht weiter verwunderlich sein, dass SAPUI5 eine große Bibliothek an vorgefertigten UI-Elementen auf Grundlage der Fiori-Guidelines bereitstellt. Angefangen bei essenziellen Eingabemöglichkeiten (wie einer Checkbox) über modale Dialoge bis hin zu ganzen Seitenlayouts: Das Design einer Fiori-Applikation wirkt auf SAP-Benutzer vertraut, macht einen aufgeräumten und durchdachten Eindruck und stellt die User Experience in den Vordergrund.
Auf der anderen Seite – und hier geht SAPUI5 über Fiori hinaus – ermöglicht SAPUI5 die Erstellung der eigentlichen Webapplikation, wozu die Navigation, der Datenaustausch mit dem Server, Validierung, Formatierung u.v.m. gehören.
Aufgrund der langen Historie, die bis 2009 zurückreicht, sind hier viele Dinge über die Jahre gewachsen. Dies führt sowohl zu limitierenden Faktoren im Möglichkeitshorizont der Umsetzung als auch zu einer recht schnell höher werdenden Komplexität und erschwerten Wartbarkeit.
Fiori-Applikationen auf Basis von SAPUI5 sind die populärste Art, die Fiori Guidelines zu realisieren. Insbesondere Single-Task-Anwendungen im Sinne einer Transaktion lassen sich mit SAPUI5 hervorragend umsetzen.
Fiori Elements
Ein radikal anderer Ansatz zur Umsetzung von Fiori-Applikationen wird mittels Fiori Elements verfolgt. Bei diesem Ansatz werden Anwendungen auf Basis von vorgefertigten Templates, sogenannten Floorplans, konfiguriert und vollautomatisch generiert.
Das Versprechen ist hier, dass sich Entwickler*innen nicht mehr mit der UI auseinandersetzen müssen. Die Basis bildet immer eine bestimmte Datenbanktabelle oder -view, wobei die Standard-Operationen (anlegen, lesen, ändern, löschen) out-of-the-box mitgeliefert werden. Mittels Annotationen wird die Oberfläche dahingehend konfiguriert, welche Felder sichtbar oder editierbar sind, welcher Übersetzungstext benutzt werden soll usw.
Sofern sich die Applikation also um eine Datenbanktabelle oder -view dreht und die Basisoperationen im Vordergrund stehen, stellt SAP mit Fiori Elements eine einfache und kostengünstige Variante bereit, um Fiori-konforme Oberflächen zu generieren.
Angular und React.js
Abseits von SAPUI5 haben sich im Web eine Reihe von Frameworks zur Entwicklung von komplexen Oberflächen etabliert. Zu den bekanntesten Frameworks zählen unter anderem Angular (Google) und React.js (Facebook).
Insbesondere in den 2010er Jahren hat eine rasante, drastische und disruptive Evolution in dem gesamten Bereich der Webentwicklung stattgefunden. Gerade Angular und React.js haben neue Ideen und Ansätze beigesteuert und einen enormen Einfluss auf die Entwickler-Community gehabt. Letztlich ist es so möglich geworden, auch die komplexesten Oberflächen in einem vertretbaren Zeitaufwand zu realisieren.
Im Gegensatz zu SAPUI5 zeichnen sich Angular und React.js vor allem durch schnelle Ladezeiten und hervorragende Performanz bei der Benutzerinteraktion aus. Gründe dafür sind einerseits eine moderne Modulstruktur, die die Größe des Frameworks minimiert, sowie andererseits ein effizienter Algorithmus zum Rendering der Applikation. Darüber hinaus ist eine Unzahl an zusätzlichen Bibliotheken im Kosmos der Open-Source-Entwicklung entstanden. Somit lässt sich für fast jeden Anwendungsfall auf bereits Vorhandenes zurückgreifen.
Auch wenn alternative Webframeworks gegenüber SAPUI5 deutliche Vorteile bieten, die Implementierung der Fiori Design Guidelines – und damit ein einheitlicher Look & Feel – war bislang eine deutlich zu aufwändige und damit unerreichbare Zielsetzung.
UI5 Web Components als neue Basis
Im Zuge der Modernisierung von SAPUI5 ist dieses Problem adressiert und mit den UI5 Web Components eine Möglichkeit bereitgestellt worden, Applikationen unabhängig vom eingesetzten Framework nach den Vorgaben von Fiori zu entwickeln.
Die UI5 Web Components stellen eine Unmenge von vorgefertigten UI-Elementen nach den Designvorgaben von Fiori bereit. Von der Schriftart über Icons bis hin zu komplexen User Interfaces: Es sind alle Building Blocks für eine Fiori-Applikation enthalten. Und durch die Verwendung des Standards „Web Components“ können diese UI-Elemente unabhängig vom eingesetzten Framework in der Webentwicklung benutzt werden. Optisch ist es für den Endbenutzer dann nicht mehr ersichtlich, ob es sich um eine SAPUI5-Applikation oder um ein anderes Framework handelt.
Aktuell werden UI5 Web Components parallel zu SAPUI5 entwickelt, sollen aber in Zukunft ebenfalls von SAPUI5 genutzt werden und als Ersatz für die bisherigen UI-Elemente dienen. Somit handelt es sich bei den Web Components also um SAPs hauseigene Zukunftstechnologie.
React.js & UI5 Web Components
React.js hat einen klaren komponentenorientierten Fokus, der die Integration der UI5 Web Components besonders einfach macht. Hierin liegt wohl der Grund, warum SAP selbst aktiv das Projekt „UI5 Web Components for React“ vorantreibt. Neben einfachen Wrappern, die die Web Components React-tauglich machen, werden auch komplexere UI-Elemente wie die Filterbar, das Variant Management oder ganze Seitenlayouts angeboten.
Somit sind wir zum ersten Mal in der Lage, das Beste aus beiden Welten in einer Applikation zu bündeln: das vertraute Look & Feel von Fiori-Applikationen auf Basis von state-of-the-art-Technologien. Die unmittelbaren Vorteile sind schnellere Ladezeiten sowie eine hervorragende Performanz bei Benutzerinteraktionen. Wichtiger jedoch ist, dass selbst komplexeste Applikationen auf diese Weise realisierbar sind und wartbar bleiben. Aufgrund der Technologie ändert sich darüber hinaus das Entwicklungsparadigma: Die Komponente rückt in den Fokus - ein modernes Tooling bringt vielerlei Erleichterungen für Entwickler*innen und ein ganzes Ökosystem an Open-Source-Entwicklungen steht zur Verfügung.
Dieser Paradigmenwechsel lässt sich exemplarisch an einer Technologie namens „Storybook“ besonders deutlich nachvollziehen. Am Anfang steht die Realisierung, dass Storybook nicht mit SAPUI5 oder Fiori Elements genutzt werden kann, mit React jedoch steht uns diese Open-Source-Technologie zur Verfügung. Mittels Storybook wird das Tooling auf einfache, aber entscheidende Weise erweitert, denn es handelt sich hierbei um ein eigenes „Labor“ für die Komponentenentwicklung: Komponenten (von einfachen User Interfaces über zusammengesetzte Komponenten bis hin zu ganzen Seiten) lassen sich hier isoliert entwickeln und in jedem möglichen Zustand mittels einer „Story“ abbilden. Auf diese Weise rückt die Komponente in den Fokus der Entwicklung, um wiederverwendbare Building Blocks zu kreieren, die bestmöglich getestet und dokumentiert sind. Kein Wunder also, dass sowohl die Dokumentation der „UI5 Web Components“ als auch der „UI5 Web Component for React“ auf Storybook basieren.
Tatsächlich ist hiermit aber nur die Spitze des Eisbergs angesprochen. Der komponentenorientierte Ansatz harmoniert ideal mit Wireframing-Tools, die in der Konzeptionsphase genutzt werden, um gemeinsam mit dem Kunden die ideale Applikation zu entwerfen. Mittels TypeScript wird die JavaScript-Entwicklung auf erwachsene Beine gestellt, indem Typsicherheit genutzt wird; die Erstellung neuer User Interfaces oder die Nutzung von etablierten Open-Source-Lösungen lassen sich einfach realisieren; das Design lässt sich pixelgenau umsetzen u.v.m.
Bei der Umsetzung der ersten Applikationen auf Basis von React.js sind wir natürlich auf einige Herausforderungen getroffen. Insbesondere die Integration von React.js-Applikationen in das Fiori Launchpad sollte keinen Unterschied zu herkömmlichen SAPUI5-Anwendungen aufweisen. Wir haben uns diesen Herausforderungen gestellt und entsprechende Lösungen entwickelt, die wir als Open-Source zur Verfügung stellen. Somit ist es möglich, React.js-Anwendungen nahtlos in das Fiori Launchpad zu integrieren und ein konsistentes Benutzererlebnis zu wahren.
Resümee
Fiori-Applikationen lassen sich heutzutage mit unterschiedlichen Techniken und Technologien entwickeln. Durch das Fundament der Fiori Design Guidelines entsteht trotz unterschiedlicher Technologien eine einheitliche und einfache User Experience in Ihrem Unternehmensumfeld.
Der Fokus von Fiori-Applikationen sollte dabei immer auf den Key-Usern liegen, um den tatsächlichen Benutzern das bestmögliche Werkzeug für ihre tägliche Arbeit zur Verfügung zu stellen. Daher haben wir uns bei der CPRO conlog auf das UX-Design und die Entwicklung von Fiori-Applikationen spezialisiert. Durch den Einsatz von Techniken wie Wireframing und Prototyping legen wir von Anfang an den Fokus auf Ihre Geschäftsprozesse und deren Key-User, um eine optimale User Experience nach den Regeln von Fiori zu erzielen.
