vogel304 value added content about Digitization and Software Engineering

UI5 Web Components – Fiorisiert SAP nun das WWW?!

U

Im ersten Quartal des Jahres 2019 wurde seitens der OpenUI5 Community das initiale Release von UI5 Web Components in ihrem GitHub Repository veröffentlicht. In diesem Artikel werde ich kurz Web Components im allgemeinen erläutern, danach Bezug auf die UI5 Web Components nehmen und abschließend mögliche Synergieeffekte erläutern, die sich in Zukunft durch die Web Components ergeben werden.

Web Components – ein Thema welches den Enterprise Software Hersteller SAP umtreibt.

Was sind Web Components eigentlich?

Einfach ausgedrückt sind Web Components selbst-definierte HTML Tags. HTML Tags geben einer Webseite Struktur und ermöglichen die Darstellung von bspw. Aufzählungen und Tabellen. Die Optik und das Verhalten der Elemente wird wiederum durch CSS und JavaScript erzielt. Bevor es Web Components gab musste man beim Kopieren und Einfügen von HTML/CSS & JavaScript Code darauf achten, dass es nicht zu unschönen Vererbungen kam. Dieses Problem wurde entsprechend durch Web Components angegangen und gelöst. D.h. Web Components sind selbst-definierte HTML Tags deren Funktionalität und Darstellung gekapselt (Shadow DOM) ist und so eine Wiederverwendbarkeit gewährleistet ist.

Anbei ein Beispiel: Ein Youtube Video auf seiner Webseite einzubetten erfolgt i.d.R. durch das Einbetten eines Iframes / Verwendung des HTML Tags <iframe></iframe> (siehe Code).

<iframe width="560" height="315" src="https://www.youtube.com/embed/9P5Jk4S3438" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

In dem Iframe werden verschiedene Attribute mitgegeben, wie bspw. Breite und Höhe mitgegeben. Das Ziel einer einer eignen Webkomponente könnte nun sein ein Youtube Video in der entsprechenden Größe nur durch Einfügen des Youtube Codelinks darzustellen (siehe Code). Das Verhalten und die Darstellung ist gekapselt im Tag <my-youtube>. [Das Erstellen eines eigenen HTML Tags wird in einem späteren Artikel beschrieben.]

<my-youtube>9P5Jk4S3438</my-youtube>

Browser Support

Web Components werden von den gängigsten Browsern unterstützt. Außerdem wird durch sog. Polyfills der Support für ältere Browser garantiert. Da der Edge Browser in naher Zukunft auf Chromium basiert wird auch hier eine bessere Untersützung vorhanden sein.

Web Components werden von den meisten Browsern unterstützt.
Quelle: https://www.webcomponents.org

Und was können UI5 Web Components nun?

Ganz klar! UI5 Web Components sind Web Components im Fiori Look & Feel. Genauer gesagt sind die UI5 Web Components an den Fiori Design Guidelines ausgerichtet und befolgen diese. Unter der folgenden URL
https://sap.github.io/ui5-webcomponents/playground/ sind die einzelnen Komponenten ersichtlich und können ausprobiert werden.

Intro Video der OpenUI5 Community.

Wo können UI5 Web Components verwendet werden?

So gut wie überall! Im Web oder in Frameworks wie bspw. Angular, React oder Vue.js. Des Weiteren lassen sich die Web Components auch in Ionic Framework einbinden. [Mit dem Ionic Framework können hybride Applikationen erstellt werden, auch für den Desktop mit Electron.] Dies könnte einer der Gründe dafür sein warum man den Weg gegangen ist und UI5 Web Components entwickelt hat.

Zeit für ein Beispiel: UI5 Datepicker in einer Angular App.

Zunächst standardmäßig mit einer Angular App starten:
https://angular.io/tutorial/toh-pt0. Danach in dem Ordner mit dem Befehl:

npm install @ui5/webcomponents

Danach füge ich in der app.component.html den DatePicker Tag hinzu.

<ui5-datepicker id="myDatepicker1"></ui5-datepicker>

Des Weiteren gebe ich in der app.module.ts bekannt, dass es „CustomElements“ gibt und importiere die eig. Webkomponente.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

import "@ui5/webcomponents/dist/DatePicker";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
UI5 DatePicker in einer Angular App.
UI5 DatePicker in einer Angular App.

Fazit: Mit UI5 Web Components gewinnt das Fiori Designkonzept weiter an Relevanz.

Durch die UI5 Web Components gelingt es der SAP das Fiori Designkonzept weiter zu verbreiten und bekannt zu machen. Es wird interessant sein zu sehen inwieweit Applikationen entwickelt werden, die eher als SAP fern zu bezeichnen sind (Applikationen für Privatpersonen). Falls Sie weitere Fragen zu Thema UI5 Web Components haben schreiben Sie gerne einen Kommentar.

Vielen Dank fürs Lesen!

Über den Autor

Julian Vogel, M. Sc.

Moin! Ich bin Julian und auf meinem Blog findet ihr Beiträge, um die Themen mobile Entwicklung insb. PWAs. Natürlich komme auch ich nicht an Trendthemen wie Blockchain, IoT und AR/VR vorbei.

Kommentar hinzufügen

vogel304 value added content about Digitization and Software Engineering

Neue Beiträge

Neue Kommentare

Über den Autor

Moin! Ich bin Julian und auf meinem Blog findet ihr Beiträge, um die Themen mobile Entwicklung insb. PWAs. Natürlich komme auch ich nicht an Trendthemen wie Blockchain, IoT und AR/VR vorbei.