Seite 4: Ionic mit Angular, React oder Vue.js

Inhaltsverzeichnis

Die Ionic-Komponenten können Entwickler als eigenständige Web Components direkt einsetzen. Für größere Projekte bringen moderne Frontend-Frameworks aber viele Vorteile mit. Es wäre möglich, die Ionic Web Components direkt in einem Framework wie Angular oder React einzusetzen, das erfordert aber, dass man selbst die Integration in das Komponentenkonzept des gewünschten Frameworks vornimmt.

Um die Arbeit mit Ionic zu vereinfachen, hat das Ionic-Team die Integration für Angular, React und Vue.js übernommen und stellt sie fertig bereit. Dadurch lassen sich die Ionic-Komponenten einsetzen, als wären sie für das jeweilige Framework entwickelt worden. Zusätzlich ist für jedes der drei Frameworks dessen Standard-Router integriert. Dadurch wird es möglich, bei Seitenwechseln automatisch eine geeignete Animation einzublenden und dabei auch zwischen Vorwärts- und Rückwärtsnavigation zu unterscheiden.

Vorsprung für Angular

Angular hat aufgrund der Historie die ausgereifteste Unterstützung. Ein neues Projekt initiiert man mit dem Ionic CLI per ionic start. Das Ionic CLI nutzt den Angular-CLI-Befehl ng create zur Erzeugung des Projekts, so dass die Projektstruktur dem Angular-Standard entspricht. Es gibt verschiedene Start-Templates, die man als Ausgang für das eigene Projekt nutzen kann.

Die Ionic-Komponenten lassen sich wie Angular-Komponenten nutzen und im Vergleich zu Ionic 3 hat sich in der Verwendung wenig geändert. Intern kommen aber nun leichtgewichtige Wrapper zum Einsatz, um die Web Components zu kapseln. Neben den Komponenten stellt Ionic einige Angular-Services zur Steuerung von Overlay-Komponenten wie modalen Dialogen, Popups und Alerts oder Funktionen wie virtuelles Scrolling zur Verfügung.

Um einen modalen Dialog zu öffnen, benötigt man daher nicht wie im vorhergehenden Beispiel ein ion-modal-controller-Element  im DOM, sondern erzeugt den Dialog über den ModalController-Service:

import { Component } from "@angular/core";
import { ModalController } from "@ionic/angular";
import { UserEditPage } from "../user-edit/user-edit.page";
    
@Component({
    selector: "app-home",
    templateUrl: "home.page.html",
    styleUrls: ["home.page.scss"]
})
export class HomePage {
    
    constructor(public modalCtrl: ModalController) {}
    
    async openEditModal() {
        const modal = await this.modalCtrl.create({
            component: UserEditPage,
        });
        await modal.present();
    }
}

Nun auch mit React

Die React-Integration von Ionic ist mittlerweile allgemein verfügbar. Auch hier sorgt die Integration dafür, dass Entwickler die Komponenten so nutzen können, als ob es native React-Komponenten wären. Ein Projekt lässt sich per Ionic CLI mit ionic start --type=react initialisieren. Dafür nutzt das Ionic CLI intern create-react-app und erzeugt ein TypeScript-Projekt. Als Router dient der React-Router.

Die Namen der Komponenten notiert man in Pascal Case im Gegensatz zum Kebab Case bei Angular: aus <ion-button> wird <IonButton>. Ansonsten ist die Verwendung sehr ähnlich zu Angular, da es sich natürlich auch weiterhin um die gleichen Web Components handelt.

Da React kein Service-Konzept bietet, kann man die API für modale Dialoge und andere Funktionen über eine Wrapper-Komponente ansprechen. Ein modaler Dialog wird mittels IonModal definiert und die Sichtbarkeit über eine Variable gesteuert. Darüber können Anwender auch Lifecycle-Callbacks definieren. In folgendem Beispiel wird der Komponente UserEdit eine Funktion zum Schließen des Dialogs als Render Prop übergeben:

<IonModal
    isOpen={this.state.showEditModal}
    onDidDismiss={() => this.setState(() => ({ showEditModal: false }))}
>
    <UserEdit
        dismissModal={() => this.setState(() => ({ showEditModal: false }))}
    ></UserEdit>
</IonModal>

Zu beachten ist, dass man alle eingesetzten Komponenten aus @ionic/react importieren muss.

Aller guten Dinge sind drei: Vue.js

Die Vue.js-Integration befindet sich aktuell noch im Beta-Status. Das Ionic CLI unterstützt noch keine Erzeugung eines Ionic-Vue-Projekts. Stattdessen fügt man Ionic als Plug-in zu einem vorhandenen Vue-Projekt hinzu:

npm install @ionic/vue

In der main.js des Projekts wird das Plug-in geladen und zusätzlich eine Ionic-CSS-Datei eingebunden:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
    
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
    
Vue.use(Ionic);
Vue.config.productionTip = false;
    
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Das Plug-in registriert die Ionic-Komponenten global. Entwickler können sie daher direkt verwenden.

Über eine Vue-Prototyp-Erweiterung macht Ionic die Controller der Overlay-Komponenten in der gesamten Anwendung verfügbar. Man kann sie über this.$ionic aufrufen.

Ein modaler Dialog lässt sich somit wie folgt öffnen:

const modal = await this.$ionic.modalController.create({
    component: UserEdit,
});
    
await modal.present();

Derzeit unterstützen die Formular-Komponenten von Ionic noch kein Binding mittels v-model. Da v-model aber nur eine Kurzform für die Übergabe des Werts und Registrierung eines Event-Listeners ist, können Entwickler folgende Form verwenden:

<ion-input 
    :value="name"
    @ionInput="name = $event.target.value"
></ion-input>

Upgrade von Ionic 3

Da Ionic 3 nur für Angular zur Verfügung steht, kann ein Upgrade auch nur Angular-Projekte betreffen. Die empfohlene Vorgehensweise zum Upgrade auf Ionic 4 ist, ein neues Projekt mit Ionic 4 anzulegen und dann die Funktionen Schritt für Schritt aus der alten App zu übernehmen. Die meisten Ionic-Komponenten sind in ihrer Verwendung unverändert. Trotzdem kann ein Upgrade für eine komplexe Anwendung mehrere Tage Arbeit bedeuten, denn es findet gleichzeitig auch ein Angular-Upgrade von Version 4 auf 7 statt und es sind diverse kleinere Anpassungen zu berücksichtigen.

Hier nun ein kurzer Überblick über die wesentlichen Änderungen:

• CSS: das Styling der Komponenten muss auf die Verwendung der CSS Custom Properties umgestellt werden.
• Die Projektstruktur wurde leicht angepasst und folgt nun der offiziell empfohlenen Struktur von Angular. Der Ordner "pages" entfällt und wird in den "app"-Ordner integriert.
• Man muss vom Ionic-Router auf den Angular-Router umstellen.
• Angular 4 wird auf Angular 7 angehoben.
• Mit dem Angular-Upgrade ist auch ein Upgrade von RxJS 5 auf 6 verbunden.
• In den Templates gibt es diverse Markup-Anpassungen.
• Overlay-Komponenten haben nun eine asynchrone API.
• Mehrere Lifecycle-Events wurden auf Angular-Events umgestellt.

Die meisten Umstellungsaktivitäten sind Fleißarbeit. Es gibt ein Set von TS-Lint-Regeln, die bei der Umstellung der Markup-Anpassungen unterstützen und einen Teil auch automatisch übernehmen können. Bei RxJS hat es von der Version 5 auf 6 größere Veränderungen gegeben. Über das Paket rxjs-compat kann man aber Kompatibilität zu Version 5 erreichen, sodass keine Anpassungen am eigenen Code erforderlich sind. Man sollte aber überlegen, ob nicht direkt die Umstellung auf die Syntax von Version 6 sinnvoll ist.

Beim Umstellen auf den Angular-Router ist man damit konfrontiert, dass der Ionic-Router und die Controller für Overlays das Laden von Seiten über die Angabe der Seiten-ID als String erlaubten. Zukünftig wird eine Referenz auf die Komponente benötigt. Wenn man die Seiten in eigene Module kapselt, bedeutet das festzulegen, ob Overlay-Komponenten in einem eigenen Modul definiert werden oder zusätzlich im Modul der aufrufenden Seite integriert sind. Die Komponente muss man dann in den EntryComponents des Moduls aufführen. Weiterhin muss die API der Overlay-Komponenten von synchronen Aufrufen auf eine asynchrone API umgestellt werden.

In der Ionic-Dokumentation unter "Guide | Building | Migration" ist die offiziell empfohlene Vorgehensweise dokumentiert.

Fazit

Die Ionic-UI-Komponenten können mit der Version 4 als generische Web Components flexibler als bisher eingesetzt werden. Für die bekannten Frontend-Frameworks Angular, React und Vue.js stehen fertige Integrationen bereit, die den Komfort erhöhen. Im zweiten Teil des Artikels werden die Schwesterprojekte Capacitor und Stencil betrachtet, die Ionic um interessante Möglichkeiten ergänzen.

Norbert Frank
ist seit mehr als 15 Jahren in der IT als Entwickler, Berater und Softwarearchitekt tätig. Er ist passionierter Full-Stack-Entwickler und JavaScript-Enthusiast bei der Lucom GmbH. (bbo)