SAPUI5: Bootstrap einer Fiori-App im Überblick erklärt
Bootstrapping ist der erste Schritt, um SAPUI5 überhaupt verwenden zu können. Ohne diesen initialen Ladevorgang können Sie das Framework nicht verwenden. In den vorherigen Beiträgen dieser Serie haben Sie erfahren, wie Sie Ihr Projekt mit einer guten Grundlage starten können. Hier möchte ich Ihnen die Grundlagen erklären, um Bootstrap verwenden zu können.
Bootstrap lokalisieren
Da diese Funktionalität einer der ersten Schritte ist, die eine Anwendung durchlaufen muss, benötigt dieses Script einen Wurzel-Container. Daher eignet sich das Wurzel-HTML-Dokument „index.html“ perfekt dafür. Das Script wird direkt im Kopf dieser Datei verankert und zusätzlich mit den Applikationsdaten angereichert.
SAPUI5 Index.html
Wichtig ist hier das Schlüsselwort „src“. Damit wird festgelegt, von wo die SAPUI5-Kernbibliothek zu finden ist. Wenn sich die Anwendung am gleichen Speicherort wie die Bibliothek befindet, kann (wie hier in der Abbildung zu sehen) ein relativer Pfad angegeben werden. Ist die Bibliothek auf einem anderen Server gespeichert, müssen Sie den Pfad entsprechend anpassen. Sie können hier zum Beispiel ein öffentlichen Server wie https://sapui5.hana.ondemand.com/resources/sap-ui-core.js wählen.
Die weiteren Parameter können Sie dem Projekt entsprechend anpassen:
- theme: Wählen Sie aus den verschiedenen Standardthemes eines aus.
- resourceroots: Teilen Sie dem SAPUI5 Core mit, dass die Ressourcen für Ihre Anwendung den gleichen Wurzelordner (index.html) haben.
- oninit: Bestimmen Sie, was passieren soll, nachdem alle Ladevorgänge abgeschlossen wurden.
- async: Entscheiden Sie, ob das asynchrone Laden aktiviert werden soll.
Das Bootstrap Skript hat noch weitere Parameter, die hier aber weniger wichtig sind.
Varianten von Bootstrap
Die empfohlene Standardvariante habe ich Ihnen im oberen Abschnitt bereits vorgestellt. Hier können Sie zusätzlich noch den Parameter „async“ durch „data-sap-ui-preload“ austauschen. Dieser beeinflusst das Ladeverhalten der benötigten Ressourcen:
- async: Es verändert sich nichts zur oberen Variante. Die benötigten Ressourcen laden asynchron.
- sync: Die benötigten Ressourcen laden synchron, also nacheinander. Dies sollten Sie nicht verwenden, da es sich negativ auf die Ladezeiten auswirkt.
- auto: Das ist der Standardwert, wenn dieser Parameter nicht angegeben wird. Hierbei wird im Hintergrund geprüft, ob optimierte Ressourcen verwendet werden. Ist das der Fall, wird der Parameter auf „async“ gesetzt, um die Performance weiter zu optimieren.
SAP Fiori HCM - Quickstart
Innerhalb von nur 2 Wochen können Sie mit uns in die mobile Welt starten. Wir setzen in 5 Schritten Ihre erste HCM-App produktiv.
Bootstrapping von einem Netzwerk zur Kontentlieferung
Im oberen Abschnitt hatte ich bereits die Bedeutung des Attributs „src“ erklärt. Der Wert dieses Attributs kann auch auch ein Content Delivery Network „CDN“ zeigen. Dies hätte den Vorteil, dass der Server sehr häufig kürzere Ladezeiten bietet. Das ist der Fall, wenn sich dadurch Ihr Standort näher am Server befindet. Außerdem profitieren Sie von einigen Funktionen wie dem caching und dem automatischen Wechsel zu einer Default-Sprache, wenn die gewünschte Sprache nicht verfügbar ist.
Bootstrap CDN
Sie können innerhalb des Pfades auch eine spezielle Version angeben, die Sie verwenden wollen. Verwenden Sie immer die neueste Version, indem Sie die Versionsnummer einfach weglassen.
Damit habe Sie nun einen groben Überblick über Bootstrapping. Noch detailliertere Informationen erhalten Sie hier. Ich hoffe, ich konnte damit etwas Licht in die Standardfunktionalitäten Ihrer Anwendung bringen. Sind Sie schon auf SAPUI5 umgestiegen? War Ihnen bewusst, dass Sie die Performance steigern können, wenn Sie CDN verwenden? Sollten noch Fragen offen geblieben sein, beantworte ich diese gerne in den Kommentaren.
