Seite 2: Framework-agnostische Web Components

Inhaltsverzeichnis

Da sich die Webentwicklung seit der ersten Version deutlich weiterentwickelt hatte, konnte das Framework mit Version 4 die ursprüngliche Vision wieder aufgreifen, ein Set von UI-Komponenten unabhängig von konkreten Frontend-Frameworks anbieten zu können. Der Schlüssel dazu sind Web Components. Mit der Anfang 2019 erschienenen Version 4 von Ionic liegen alle UI-Komponenten als eigenständige Web Components vor. Sie haben keine Abhängigkeiten zu weiteren Libraries und Frameworks und sind daher flexibel einsetzbar. Um den Entwicklungskomfort zu erhöhen, existieren fertige Integrationen für Angular, React und Vue.js. Im Rahmen der Entwicklung von Ionic 4 entstanden auch der Web-Components-Compiler Stencil und die Cordova-Alternative Capacitor. Ionic 4 ist dadurch deutlich mächtiger und flexibler als seine Vorgänger.

Da die Ionic-Komponenten nun als Web Components vorliegen, können Entwickler sie wie normale HTML-Elemente einsetzen. Dazu reicht es, die JavaScript- und CSS-Definition der Library einzubinden:

<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet" />
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>

Anschließend kann man die Ionic-Komponenten wie in folgendem Beispiel verwenden:

<ion-app>
    <ion-header>
        <ion-toolbar mode="ios">
            <ion-title>Ionic 4</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-card button="true" onclick="helloWorld()">
            <img src="https://images.unsplash.com/photo-1560732488-6b0df240254a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" />
            <ion-card-header>
                <ion-card-subtitle>Ionic 4</ion-card-subtitle>
                <ion-card-title>Ionic 4 Web Components</ion-card-title>
            </ion-card-header>
            <ion-card-content>
                Die Ionic Web Components können wie normale HTML-Elemente eingesetzt werden!
            </ion-card-content>
        </ion-card>
    </ion-content>
</ion-app>

Obwohl hier ein einzelnes JavaScript-Bundle eingebunden ist, wird die Definition der einzelnen Komponenten erst asynchron geladen, wenn die jeweilige Komponente eingesetzt wird. Ionic nutzt dabei ein Verfahren, zunächst nur eine leere Proxy-Definition der Web Component zu registrieren. Dadurch bleibt der initiale Download auch für eine dreistellige Anzahl an Komponenten sehr klein. Erst wenn eine Web Component im DOM  Verwendung findet, lädt Ionic deren Funktionen asynchron und stellt sie bereit. Dabei kommen in zeitgemäßen Browsern dynamische Importe von ES-Modulen zum Einsatz. Durch dieses Verfahren wird eine optimale Startzeit der App erzielt. Gleichzeitig kann das Framework nahezu beliebig viele UI-Komponenten enthalten. Für die Entwicklung ist es komfortabel, dass nur ein einziges Bundle einzubinden ist.

Die Web Components können Nutzer über HTML-Attribute konfigurieren. Einige Web Components haben zusätzlich auch eine JavaScript-API. Um sie zu verwenden, benötigt man eine Referenz auf das zugehörige DOM-Element:

const modalController = document.querySelector("ion-modal-controller");
await modalController.componentOnReady();
    
const modalElement = await modalController.create({
    component: "modal-content"
});
    
await modalElement.present();

Das obige Beispiel ermittelt eine ion-modal-controller-Komponente im DOM, deren asynchrone Initiierung componentOnReady abwartet und anschließend die create-Methode aufruft, um einen modalen Dialog zu erzeugen. Die Anzeige des Dialogs erfolgt anschließend mit present.

Um die Ionic-Komponenten einzusetzen, muss man keine Web Components selbst schreiben. Sie können aber sehr hilfreich sein, wenn man auf ein zusätzliches JavaScript-Framework verzichten möchte. So kann man zum Beispiel den Inhalt eines modalen Dialogs als Web Component definieren:

customElements.define(
    "modal-content",
    class extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `
                <ion-header>
                    <ion-toolbar>
                    <ion-title>Ein modaler Dialog</ion-title>
                    </ion-toolbar>
                </ion-header>
                <ion-content padding>
                    Der Inhalt dieses Dialogs ist selbst eine Web Component!
                </ion-content>`;
        }
    }
);

Die hier definierte Web Component modal-content kann dann wie im vorhergehenden Beispiel gezeigt die ion-modal-controller-Komponente in der create-Methode referenzieren, um den Inhalt eines modalen Dialogs festzulegen.