SAP Fiori im Vergleich zu React JS und Angular sowie älteren Technologien wie Web Dynpro

Mit der Einführung des SAPUI5 Frameworks und SAP Fiori findet ein Paradigmenwechsel im Bereich User Experience statt. Oberflächen können völlig neu gestaltet und gleichzeitig Ressourcen effizienter genutzt werden. Aber wie unterscheidet sich SAP Fiori von anderen Web-Apps wie React JS und Angular sowie von älteren Technologien wie Web Dynpro?

Mit Fiori stellte SAP im Jahr 2013 einen für das Unternehmen völlig neuen Ansatz in den Bereichen User Experience und Designsprache vor. Im Zeitalter von Smartphones, Tablets und browserbasierten Apps waren benutzerfreundliche Lösungen gefragt, mit denen sich visuell ansprechende Anwendungen für jede Plattform schnell und einfach erstellen lassen.

Das bis dahin gebräuchliche SAP GUI konnte diesem Anspruch mit seiner maskenhaften Designsprache und der programmierten Navigation nicht gerecht werden. Zumal SAP GUI ausschließlich für Windows-Desktoprechner konzipiert ist und in der Praxis geschulte Expert*innen erforderlich macht. Nur wer die komplexen Beziehungen innerhalb des Programms kennt, ist in der Lage, die benötigte Information im SAP-System zu finden. Die nicht vorhandene Trennung von Logik und UI schränkt die Möglichkeiten zusätzlich ein. Schnelle und flexible Anpassungen können nur mit einem hohen Aufwand realisiert werden.

Die Design-Prinzipien von SAP Fiori

Mit dem Design-Framework SAPUI5 und SAP Fiori ist nun der Weg frei für eine flexible UI-Technologie, die für Entwickler*innen und Anwender*innen gleichermaßen leicht zu bedienen ist. Dazu setzt SAP auf eine modulare Architektur, die sich zudem durch Performance, Offenheit,  Kompatibilität und Sicherheit auszeichnet.

Eine entscheidende Rolle spielt in diesem Zusammenhang OData. Das Protokoll bildet die Schnittstelle zwischen dem SAPUI5 Frontend und dem SAP Backend. Im Unterschied zum SAP GUI, werden über OData nur Daten abgerufen – und keine Informationen darüber, wie diese angezeigt werden sollen. Die grafische Darstellung ist vollständig in der mit SAP Fiori erzeugten App hinterlegt und passt sich responsiv an das jeweilige Endgerät an. Ein echter Meilenstein, wenn man bedenkt, dass bei der SAP GUI-Nutzeroberfläche jede Änderung im User Interface weitreichende Änderungen nahezu bis zur Datenbank bedingte.

Ähnlich verhält es sich mit der Suchfunktion. War es bei SAP GUI noch notwendig, spezielle Parameter zu verwenden und die (spezifisch programmierte) Suche präzise einzugrenzen, folgt SAPUI5 dem Google-Prinzip. Dies ermöglicht es auch dem Casual User sich ohne Schulungen oder lange Einlernphasen im Programm zurechtzufinden und dieses effizient zu nutzen.

SAP Fiori vs. React JS und Angular 

Im Kern geht es bei SAPUI5 und SAP Fiori darum, Daten möglichst einfach und visuell ansprechend konsumieren zu können. Dies lässt sich freilich auch mit anderen Frameworks realisieren. Etwa dem in der Google-Community beliebten Angular oder dem von Facebook entwickelten React. Aber es gibt gute Gründe, im SAP-Umfeld auch tatsächlich SAPUI5 einzusetzen.

SAP schreibt auf seiner Website: „Mit SAP-Fiori-UX können Sie neue Ideen in ansprechende Anwendungen umsetzen – so schnell der Markt es verlangt“ – und eben dieser Maxime folgt das gesamte Framework. Es gibt über 200 vordefinierte UI Controls, die bereits die Anforderungen der SAP Fiori Design Guidelines erfüllen – und das nicht nur in Bezug auf grafische Elemente, sondern auch in puncto Verhalten und Interaktionsfähigkeit. Diese UI Controls lassen sich out-of-the-box in personalisierbaren Apps verwenden. Zudem verfügt SAPUI5 von Haus aus über eine integrierte Theming-Funktion.

Verglichen mit UI Controls, die auf React oder Angular basieren, senkt dies die Kosten in der Frontend-Entwicklung deutlich. Allerdings gilt das nur, wenn man sich innerhalb der Fiori Design Guidelines bewegt. Möchte man von diesen abweichen, lässt sich dies mit React oder Angular deutlich einfacher realisieren, da SAP den Fokus bei SAPUI5 nicht auf die Entwicklung kundeneigener Controls legt. Weiterhin gelten React und Angular als performanter, nicht zuletzt weil sie eleganter die Hardware von Server und Client nutzen können (Isomorphie). Unter SAPUI5 ist die Aufteilung dagegen vorgegeben und große Teile des Codings laufen auf Client-Seite ab.

Beim Clickjacking werden Teile des User Interface von Objekten überlagert, so dass Nutzer*innen scheinbar harmlose Mausklicks durchführen und so sensible Daten preisgeben.

Dafür punktet SAPUI5 im Bereich Security mit einer Reihe bereits ins Framework integrierter Schutzkomponenten. Zu nennen wären in diesem Zusammenhang etwa der Schutz gegen Clickjacking, die Möglichkeit Trusted Domains zu pflegen sowie das URL Whitelisting. In anderen Frameworks müssen solche Funktionen erst implementiert werden.

Zusammenfassend lässt sich festhalten, dass SAPUI5 und SAP Fiori in sich „geschlossener“ sind, als Frameworks wie React oder Angular. Demgegenüber stehen eine Reihe wichtiger Funktionen und vordefinierter UI Controls, die von Unternehmen out-of-the-box verwendet werden können. SAPUI5 macht es möglich, flexibel und kosteneffizient auf die sich ständig verändernden Anforderungen im Business-Umfeld reagieren zu können. Mit Fiori lassen sich im SAP-Umfeld schnell und einfach kleinere Apps entwickeln, die mit ihrem modernen, intuitiven Design ein angenehmeres Arbeiten ermöglichen – egal, ob am Desktop, Tablet oder Smartphone.

SAP Fiori vs. ältere Webtechnologien wie Web Dynpro 

Viele SAP Web-Oberflächen basieren auch heute noch auf Web Dynpro – einer Technologie, die von SAP kurz nach der Jahrtausendwende im Rahmen der NetWeaver-Strategie eingeführt wurde. as damals state-of-the-art war, kann den heutigen Anforderungen an UX Design (inbesondere bei Non-Expert- und Consumer-Anwendungen) bei weitem nicht mehr gerecht werden.

Letztendlich folgt Web Dynpro in der Designsprache dem SAP GUI. Lediglich auf Windows ist man nicht mehr angewiesen, da Web Dynpro browserbasiert ist. Dennoch ist die Usability gerade auf mobilen Endgeräten wie Smartphones oder Tablets stark eingeschränkt. Auch die Suche muss bei Web Dynpro noch spezifisch programmiert werden. War beim SAP GUI die Zielgruppe noch der geschulte Experte, ist man bei Web Dynpro immerhin bei bestimmten Personas angelangt. Von einer zeitgemäßen User Experience für Casual User und Non-Expert- bzw. Consumer-Anwendungen, wie sie SAP Fiori bietet, ist man aber noch weit entfernt.

Es ist davon auszugehen, dass SAPUI5 und Fiori ältere Technologien wie Web Dynpro langfristig komplett ablösen, wenn SAP auch für On-Premise Installationen eine einfache Nutzungsmöglichkeit schafft. Aus diesem Grund ist es sinnvoll, besser früher als später umzusteigen – zumal eine zeitgemäße User Experience auf die Mitarbeiter*innen motivierend wirkt, wodurch die Produktivität insgesamt steigt.

Ebenfalls erwähnenswert: SAPUI5 orientiert sich stark an bereits existierenden Standards wie HTML5 und JavaScript. Zudem ist SAPUI5 mit der innovativen Web Community connected, wie die Aktivitäten von SAP im Bereich Web Components eindrucksvoll zeigen. Das vereinfacht den Einstieg für Entwickler*innen, macht es gerade für junge Profis reizvoll – und senkt den Pflegeaufwand für SAP. Durch die Verwendung eher konservativer Design Pattern, wie der MVC-Architektur, wird das Softwaredesign trotzdem einfacher und fehlerrobuster.