Ionic 4 everyone: Was bietet die neue Framework-Version

Am 23. Januar haben die Macher von Ionic die mit Spannung erwartete Version 4 des beliebten Frameworks zum Bau von Multi-Plattform-Apps released. Unter dem Motto Ionic for everyone löst sich das Framework von Angular als Basistechnologie und verspricht, dass jeder Web Developer unabhängig vom verwendeten Framework Ionic Komponenten per HTML-Tag in seine Mobile und Web Apps einbauen kann. Außerdem stellt die neue Version eine deutliche Verbesserung in Sachen Stabilität und Performance dar.

Was ist neu

Für Ionic 4 hat das Team eigens einen Web Component Compiler namens Stencil entwickelt. Bisher nutzten Ionic Komponenten oft Librarys von Drittanbietern, weshalb man stark von externen Entwicklern abhängig war, wenn es um die Weiterentwicklung oder das Beheben von Bugs in diesen Komponenten ging. Mit Stencil hat das Ionic Team rund 100 Komponenten (und es werden noch mehr!) neu entwickelt. Diese Web Components basieren auf den allgemeinen Web Standards und können somit von allen modernen Browsern verarbeitet werden.

Durch das Nutzen von Web Components musste allerdings auch die Art, wie Nutzer Komponenten nach ihren Vorstellungen stylen können, überarbeitet werden. In Ionic 3 gelang dies über SCSS-Variablen und den Zugriff auf die automatisch von Ionic erstellten Selektoren.

// variables.scss - Definieren globaler Variablen

$tabs-background: color($colors, backgroundColor);
$toolbar-background: transparent;

// meine-komponente.scss - Überschreiben von Variablen

ion-toolbar {
  .toolbar-ios {
    padding-bottom: 20px;
  }
}

Nachteil davon war, dass Ionic-Upgrades die Selektor-Struktur veränderten und so Nutzer auf die Palme brachten, da sich die Klassen-Namen geändert hatten und die individuellen Styles nicht mehr griffen. Ionic 4 nutzt in seinen Komponenten nun native CSS-Variablen, die dem Entwickler über Web Component APIs zur Verfügung gestellt werden und womit dieser die Styles der Elemente innerhalb des Shadow DOM verändern kann. Damit sinkt die Hemmschwelle für Entwickler, auf neue Ionic-Versionen upzugraden, da keine Kompatibilitätsprobleme mehr zu befürchten sind.

// in den Ionic Docs findet ihr für jede Komponente
//  die Properties, welche direkt gestylt werden können.
// Bsp. <ion-button>: https://ionicframework.com/docs/api/button

ion-button {
  --background: #a23445;
  --padding-bottom: 20px;
}

Ionic und andere Frameworks

Als Ionic 2013 startete, begann das Team auf Basis von AngularJS Komponenten zu bauen, die sich mit individuellen HTML-Tags in Mobile App-Projekte einbinden ließen. Mit dem Rewrite von AngularJS, das ab Version 2 nur noch Angular hieß, war auch klar, dass Ionic die neuen Angular-Versionen integrieren muss, um weiterhin im Hybrid App-Universum eine Rolle zu spielen. Heute stehen Entwicklern neben Angular allerdings weitaus mehr Frameworks, wie z.B. Vue.js und React, zur Verfügung. Da augenscheinlich keines der Frameworks die alleinige Herrschaft an sich zu reißen schien, musste das Ionic Team sich hinterfragen, wie sie ihren Traum von Ionic-Komponenten für jedermann erreichen können. Oder anders gefragt: Wie können wir unabhängiger von Angular werden?

Zugute kam hierbei das Aufkommen der oben beschriebenen Web Components, die es erlauben, in HTML-Tags verpackte individuelle Komponenten plattformübergreifend darzustellen. Ionics Ziel ist es nun, dass es sich in jedes beliebige Framework integrieren lässt. Der Nutzer profitiert von qualitativ hochwertigen UI-Komponenten, kann aber z.B. zur Navigation die vom jeweiligen Framework gewohnte Syntax nutzen. Ionics UI-Komponenten werden also an die Infrastruktur der Frameworks angebunden. Aufgrund Ionics Vergangenheit ist die Angular-Integration bisher die ausgereifteste, aber das Ionic-Team arbeitet hart daran, die Integration in die Frameworks Vue.js und React voranzutreiben.

Performance

Bei der Entwicklung von Stencil wurde außerdem viel wert darauf gelegt, dass die kompilierten Komponenten außerdem eine hohe Performance aufweisen. So zeichnen sich die neuen Ionic-Komponenten durch geringe Bundle Sizes sowie eine schnelle Lade-Performance aus.

What's next

Als nächstes stehen die weitere Verbesserung der neuen Komponenten hinsichtlich der UI an. Dazu zählen unter anderem ein verbessertes Keyboard-Verhalten auf Mobilgeräten, noch mehr Optionen für das Erstellen individueller Themes und die Verbesserung von Animationen. Außerdem kümmert sich das Team um eine noch bessere Unterstützung von Desktop-spezifischen Anforderungen.

Wir haben bereits zwei Ionic 4 Projekte umgesetzt und waren begeistert, sowohl von der UI als auch der Performance der neuen Komponenten. Wir sind überzeugt, dass Ionic mit der neuen Version dem Traum von Ionic for everyone einen guten Schritt näher gekommen ist.