Mobile Entwicklung: Ionic 7 erhöht die Performance für Angular, React und Vue

Die siebte Ionic-Hauptversion ist erschienen. Nach mehr als einem Jahr Entwicklungszeit kann das quelloffene UI-Toolkit zum Erstellen mobiler Anwendungen mit HTML, CSS und JavaScript einige Neuerungen vorweisen. Dazu zählen eine erhöhte Tab-Performance, deklarative Overlays auf allen Overlay-Komponenten und eine überarbeitete Vite-Unterstützung. Eine erneuerte Formularsteuerungssyntax steht ebenfalls bereit, die sich besser mit Unterstützungstechnologien (Assistive Technologies) nutzen lassen sowie weniger Boilerplate-Code erzeugen soll.

Erhöhte Performance und Vite-Anbindung

Die in Ionic 7 enthaltenen Features hat das Entwicklungsteam bereits mit Erscheinen der Beta bekanntgegeben. So soll sich die Performance beim Wechseln zwischen Tabs für Ionic React und Ionic Vue um 70 Prozent erhöht haben. Entwicklerinnen und Entwickler, die Ionic Angular verwenden, können von einer beschleunigten Geschwindigkeit der Ionic-Komponenteninitialisierung profitieren. Diese basiert auf Optimierungen in Stencil, einem Compiler für Web Components, der ebenfalls aus dem Hause Ionic stammt.

Um die Verwendung von Packages mit dem Build-Tool Vite und dem Testing-Framework Vitest zu erleichtern, entfallen in Ionic 7 die CommonJS-Zugangspunkte für Ionic React und Ionic Vue.

Lesen Sie auch

Vite.js: Rasantes Build-Tool aus der Vue.js-Schmiede

Inline Overlays

Version 6 brachte die Möglichkeit, die Modal- und Popover-Komponenten innerhalb von Anwendungs-Templates deklarativ zu verwenden. Das aktuelle Release versieht weitere Komponenten mit dieser Funktion, sodass sie nun für alle Overlay-Komponenten gilt: Action Sheet, Alert, Loading, Picker und Toast. Dadurch lassen sich Daten als Eigenschaft auf der Komponenteninstanz weitergeben, ohne einen Controller zu verwenden.

Daneben hat das Entwicklungsteam die Eigenschaften isOpen und trigger hinzugefügt. Sie sollen die Menge an Code reduzieren, der zum Präsentieren und Verwerfen dieser Overlays benötigt wird.

<ion-button id=”open-loading”>Open Loading</ion-button>
<ion-loading trigger=”open-loading” message=”Loading…”></ion-loading>

Vereinfachte und sparsamere Syntax

Für Formularsteuerelemente wie Toggle oder Input bietet Ionic 7 eine vereinfachte Syntax. Die Notwendigkeit der Item- und Label-Komponenten – ion-item- und ion-label – entfällt und jedes Formularsteuerelement verwaltet den Labelinhalt direkt. Manche Features wie Hilfstext (Helper Text) sind von ion-item zu den entsprechenden Formularsteuerelementen umgezogen, beispielsweise ion-input, ion-textarea oder ion-select.

Diese Neuerungen sollen verschiedene Vorteile bringen. So soll der Wegfall der ion-item- und ion-label-Bedingungen weniger Boilerplate-Code bedeuten. Die Kompatibilität mit Unterstützungstechnologien soll sich dadurch erhöhen, dass die Verbindung eines Steuerungselements mit einem Label sichergestellt ist und schließlich soll sich die Developer Experience durch die Verdeutlichung der Intention von Form-Komponenten-APIs verbessern.

Ein Beispiel zeigt die Syntax vor den Änderungen

<ion-item fill=”outline”>
  <ion-label>Email:</ion-label>
  <ion-input placeholder=”hi@ionic.io”></ion-input>
  <div slot=”helper”>Please enter a valid email address</div>
</ion-item>

und nach den Änderungen

<ion-input
  label=”Email:” 
  placeholder=”hi@ionic.io” 
  fill=”outline” 
  helper-text=”Please enter a valid email address”
></ion-input>

Dabei sind die Syntaxneuerungen abwärtskompatibel. Bei der Migration auf die neue Ionic-Version ist ein Umstellen der Syntax deshalb nicht erforderlich. Was es beim Upgrade von Ionic 6 auf 7 generell zu beachten gilt, zeigt ein Migrationsguide.

Alle neuen Features sind dem Ionic-Blog zu entnehmen.

(mai)