Auf die Developer Experience kommt es an

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.

  • cli des easy-ui5 Generators (Screenshot: Volker Buzek)
  • UI5: Tooling zum lokalen Starten einer Anwendung (Screenshot: Volker Buzek)
  • Typescript Controller in UI5 (Screenshot: Volker Buzek)
  • Quellcode einer UI5 Webcomponent (Screenshot: Volker Buzek)
  • "Horizon"-Theme (Screenshot: Volker Buzek)
  • "SAP Belize"-Theme (Screenshot: Volker Buzek)
  • Ein "dark theme" darf nie fehlen (hier: "SAP Belize dark"). (Screenshot: Volker Buzek)
Typescript Controller in UI5 (Screenshot: Volker Buzek)
Stellenmarkt
  1. (Senior) Software Developer (m/w/d)
    STABILO International GmbH, Heroldsberg
  2. Junior IT Business Consultant (w/m/d)
    Banijay Germany GmbH, Köln-Mülheim
Detailsuche

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.

  • cli des easy-ui5 Generators (Screenshot: Volker Buzek)
  • UI5: Tooling zum lokalen Starten einer Anwendung (Screenshot: Volker Buzek)
  • Typescript Controller in UI5 (Screenshot: Volker Buzek)
  • Quellcode einer UI5 Webcomponent (Screenshot: Volker Buzek)
  • "Horizon"-Theme (Screenshot: Volker Buzek)
  • "SAP Belize"-Theme (Screenshot: Volker Buzek)
  • Ein "dark theme" darf nie fehlen (hier: "SAP Belize dark"). (Screenshot: Volker Buzek)
Quellcode einer UI5 Webcomponent (Screenshot: Volker Buzek)

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.

  • cli des easy-ui5 Generators (Screenshot: Volker Buzek)
  • UI5: Tooling zum lokalen Starten einer Anwendung (Screenshot: Volker Buzek)
  • Typescript Controller in UI5 (Screenshot: Volker Buzek)
  • Quellcode einer UI5 Webcomponent (Screenshot: Volker Buzek)
  • "Horizon"-Theme (Screenshot: Volker Buzek)
  • "SAP Belize"-Theme (Screenshot: Volker Buzek)
  • Ein "dark theme" darf nie fehlen (hier: "SAP Belize dark"). (Screenshot: Volker Buzek)
"Horizon"-Theme (Screenshot: Volker Buzek)

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.

Golem Akademie
  1. Advanced Python – Fortgeschrittene Programmierthemen: virtueller Drei-Tage-Workshop
    23.-25.01.2023, Virtuell
  2. Adobe Photoshop Aufbaukurs: virtueller Zwei-Tage-Workshop
    02./03.06.2022, Virtuell
Weitere IT-Trainings

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.

SAP Fiori Elements: Das praktische Entwicklerhandbuch. Mit Implementierungsbeispielen für alle Floorplans (SAP PRESS)

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.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed
 Ein breit aufgestelltes Framework
  1.  
  2. 1
  3. 2
  4. 3


OutOfCoffee 13. Apr 2022 / Themenstart

Egal in welcher Version. Die SAP GUI war schon immer der größte Rotz mit der Anmutung...

OutOfCoffee 13. Apr 2022 / Themenstart

Garnicht fähig überhaupt ein Auto auf die Straße zu bringen. Die heutigen Autobauer sind...

ernstl 10. Apr 2022 / Themenstart

Sorry, aber selbst ohne SAP und unabhängig vom UI-Framework kann es je nach Datenquelle...

Techn 09. Apr 2022 / Themenstart

Es ging um eine übermäsige komplexe API, nur kurz dargestellt das es doch recht einfach...

Kommentieren



Aktuell auf der Startseite von Golem.de
Strange New Worlds Folge 1 bis 3
Star Trek - The Latest Generation

Strange New Worlds kehrt zu episodenhaften Geschichten zurück und will damit Star-Trek-Fans alter Schule abholen. Das gelingt mit Bravour. Achtung, Spoiler!
Eine Rezension von Oliver Nickel

Strange New Worlds Folge 1 bis 3: Star Trek - The Latest Generation
Artikel
  1. LTE-Patent: Ford droht Verkaufs- und Produktionsverbot in Deutschland
    LTE-Patent
    Ford droht Verkaufs- und Produktionsverbot in Deutschland

    Ford fehlen Mobilfunk-Patentlizenzen, weshalb das Landgericht München eine drastische Entscheidung gefällt hat. Autos droht sogar die Vernichtung.

  2. Flowcamper: Elektro-Wohnmobil Frieda Volt auf VW-Basis vorgestellt
    Flowcamper
    Elektro-Wohnmobil Frieda Volt auf VW-Basis vorgestellt

    Das elektrische Wohnmobil Frieda Volt basiert auf einem umgebauten Volkswagen T5 oder T6 und ist mit einem 72-kWh-Akku ausgerüstet.

  3. Cariad: Aufsichtsrat greift bei VWs Softwareentwicklung durch
    Cariad
    Aufsichtsrat greift bei VWs Softwareentwicklung durch

    Die Sorge um die Volkswagen-Softwarefirma Cariad hat den Aufsichtsrat veranlasst, ein überarbeitetes Konzept für die ehrgeizigen Pläne vorzulegen.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • Borderlands 3 gratis • CW: Top-Rabatte auf PC-Komponenten • Inno3D RTX 3070 614€ • Crucial P5 Plus 2 TB 229,99€ • Preis-Tipp: Kingston NV1 2 TB 129,90€ • AVM FRITZ!Repeater 1200 AX 69€ • MindStar (u. a. Palit RTX 3050 339€) • MMOGA (u. a. Total War Warhammer 3 29,49€) [Werbung]
    •  /