© Chawalit Banpot/Shutterstock.com
Entwicklung von Enterprise-Webanwendungen mit UI5 Web Components

Nativ im Browser – UI5 für jedermann


Web Components als eine Gruppe von Webtechnologien ermöglichen die Entwicklung von nativen und wiederverwendbaren HTML-Komponenten. Mit UI5 Web Components bietet SAP eine Sammlung von leichtgewichtigen und wiederverwendbaren Enterprise-ready-Komponenten, die den SAP Fiori Design Guidelines entsprechen und in Enterprise-Anwendungen abseits der hauseigenen Frameworks SAPUI5 bzw. OpenUI5 eingesetzt werden können. Dieser Artikel gibt einen Überblick über UI5 Web Components und zeigt deren Einsatz an einer Beispielanwendung.

Web Components [1] sind eine Sammlung von Web-APIs, die die benutzerdefinierte Entwicklung von sauber gekapselten und wiederverwendbaren HTML-Komponenten erlauben. Die Komplexität von HTML, CSS und Komponentenverhalten wird dabei hinter dem benutzerdefinierten HTML-Element gekapselt. Web Components können sowohl auf statischen Webseiten als auch mit einem beliebigen JavaScript Framework verwendet werden, da sie ausschließlich auf nativen Browsertechnologien und APIs basieren. Damit können UI-Elemente über unterschiedliche Lösungen hinweg konsistent eingesetzt werden. Code wird überdies lesbarer, die Größe von Anwendungen reduziert und Debugging vereinfacht. Die Interaktion mit den benutzerdefinierten HTML-Elementen passiert unter Verwendung des Standard-DOM-API, wodurch Web Components nahtlos in darunterliegende Frameworks, Application Programming Models und Technologiestacks integriert werden können. Mit Web Components zieht also ein natives Komponentenmodell in den Browser ein. Web Components basieren auf den folgenden vier Spezifikationen:

  • Custom Elements stellen die Basis für den Entwurf und die Verwendung benutzerspezifischer DOM-Elemente dar.

  • Shadow DOM erlaubt die Kapselung von Styles und Markups.

  • ES Modules beschreibt die Implementierung und Wiederverwendbarkeit von JavaScript-Modulen.

  • HTML Templates definieren die Deklaration von HTML-Fragmenten, die erst bei Bedarf und zur Laufzeit instanziiert werden.

Das UI5 Framework und Fiori

Im Jahr 2009 startete SAP unter dem Codenamen „Phoenix“ die Entwicklung eines Frameworks zur Implementierung von Enterprise-ready Webanwendungen. Nachdem das Framework in SAPUI5 [2] umbenannt wurde, wurde der Kern des Frameworks im Jahr 2013 als OpenUI5 [3] unter der Apache-2.0-Lizenz Open Source zur Verfügung gestellt.

Das UI5 Framework ist ein JavaScript Framework für die Entwicklung von clientseitigen, responsive und Enterprise-ready Webanwendungen. Das Attribut Enterprise-ready versichert in diesem Zusammenhang Internationalität, hohe Sicherheit, Barrierefreiheit, Brandingmöglichkeiten und Rückwärtskompatibilität. Das Framework basiert auf Open-Source-Bibliotheken wie jQuery, DataJS oder URI.js und bietet bekannte Konzepte wie das Model-View-Controller-Pattern, Routing, bidirektionales Data Binding oder Internationalisierung. Besonders hervorzuheben ist die sehr umfangreiche Sammlung vorgefertigter Komponenten. Vor allem in diesem Bereich unterscheidet sich die kommerzielle SAPUI5-Variante, die etwa auch Smart Controls beinhaltet, von der offenen OpenUI5-Variante.

Um Kohärenz von UI5-Anwendungen und Standards für Entwickler zu garantieren, entwickelte SAP zusätzlich ein umfangreiches Set an UI Guidelines, die SAP Fiori Design Guidelines [4]. SAP Fiori ist somit im Gegensatz zu UI5 kein technisches Framework, sondern ein Designstandard für adäquate User Experience im Enterprise-Umfeld. Ziel von SAP Fiori ist es, durch moderne UX-Designprinzipien eine rollenbasierte, mit Consumer-Apps vergleichbare Benutzererfahrung für alle Geschäftsbereiche, Aufgaben und Geräte zu schaffen. SAP Fiori basiert auf den folgenden fünf Designprinzipien:

  • Rollenbasiert: Eine Anwendung soll auf einen Anwendungsfall zugeschnitten sein und den Benutzer optimal in seiner Aufgabe unterstützen.

  • Einheitlich: Durch ein einheitliches Design soll eine intuitive und konsistente User Experience garantiert werden.

  • Einfach: Fiori soll eine schnelle und intuitive Bedienung der Anwendung ermöglichen.

  • Adaptiv: Der Benutzer soll überall mit der gleichen Anwendung arbeiten können, unabhängig vom verwendeten Gerätetyp.

  • Begeisternd: Fiori-Anwendungen sollen dem Benutzer seine Arbeit vereinfachen und ihn begeistern.

Die aktuelle SAP-Fiori-Version 3 definiert das neue minimalistische Theme SAP Quartz Light und eine schlank gehaltene Kopfleiste (die sogenannte Shell Bar) als Standard. Im Vordergrund der Konzeption von Fiori 3 standen Personalisierung und betriebswirtschaftliche Effizienz. Das Ziel von SAP ist es, mit Fiori 3 Anwendungen mit möglichst hohem Bedienkomfort zu bieten, um so die Voraussetzungen für das intelligente Unternehmen zu schaffen.

UI5 im Zusammenspiel mit SAP Fiori stellt heute die führende UI-Technologie für SAPs User-Experience-Strategie dar und wird so mittlerweile für zahlreiche Anwendungen der SAP Business Suite, SAP S/4 HANA und anderer SAP-Produkte wie SuccessFactors oder Ariba verwendet. Dem Designansatz müssen beispielsweise alle Fiori-Entwickler und Oberflächenentwickler in S/4 HANA folgen.

Seit 2017 arbeitet SAP an unterschiedlichen Innovationen für das Framework. Das UI5-Evolution-Projekt hat zum Ziel, UI5 in Richtung neuer Technologien und innovativer Features zu entwickeln. Das soll durch Konzepte wie Modularisierung oder Asynchronität und durch die Annäherung an etablierte Webstandards erreicht werden. Entwickler und Kunden sollen folglich durch eine bessere Performance, Modularisierung, Kompatibilität und einer neuen Offenheit gegenüber bek...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang