Ionic – hybride Appentwicklung für Android, iOS und das Web, aus einer einzigen Codebasis heraus

Der Trend in der Entwicklung von Anwendungen geht immer mehr in Richtung mobiler Geräte. Multi-Plattform-Lösungen, die im Web und auf mobilen Geräten als iOS- und Android-App laufen, werden immer stärker nachgefragt.

Um alle drei Plattformen bedienen zu können, müsste dieselbe Applikation einmal in Kotlin für Android, einmal in Swift für iOS und einmal fürs Web programmiert werden. Das bedeutet normalerweise, dass zwei bis drei Entwicklerteams an derselben Applikation arbeiten, was neben dem erhöhten Ressourceneinsatz auch mit einem entsprechenden Koordinationsaufwand in der digitalen Produktentwicklung verbunden ist. Mitberücksichtigt werden muss auch der künftige Mehraufwand für Wartung und Betrieb.

Eine mögliche Lösung zur Vermeidung dieser Probleme stellt die hybride Appentwicklung mit Ionic dar, die zu diesem Zweck mit einem der beiden Frontend Frameworks Angular oder Vue.js oder der Library React kombiniert werden muss.

‍

Was ist Ionic?

Auf der Seite von Ionic Framework ist zu lesen: “An open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base.” Ionic ist also kein neuer Energy Drink, sondern ein kostenloses Open Source Framework für hybride Appentwicklung. Es ermöglicht die Entwicklung von Apps für Android und iOS sowie Progressive Web Apps und Desktop-Webanwendungen aus einer einzigen Codebasis. 

Im Zusammenspiel mit Capacitor vereint Ionic die Webentwicklung mit nativen Elementen von mobilen Plattformen, wie zum Beispiel Kontakten, Kalender oder Security Features. Die gemeinsame Codebasis für alle Plattformen führt zu einer erhöhten Wartbarkeit und effizienteren Entwicklung.

‍

‍

Seit wann gibt es Ionic?

Ionic wird seit 2012 entwickelt. Die Alpha-Version wurde im November 2013 veröffentlicht und gehört in den letzten Jahren zu den beliebtesten Frameworks für Cross Plattform Development im mobilen Bereich. Bis inklusive Version 3, die am 1. April 2017 veröffentlicht wurde, war die Entwicklung nur in Kombination mit Angular möglich. Der “Big Change” kam am 23. Januar 2019 mit Version 4, in der das Framework komplett überarbeitet wurde. Im Hintergrund setzt es nun auf Web Components und unterstützt daher nicht nur Angular, sondern auch React. Seit Oktober 2020 wird auch Vue.js offiziell unterstützt.

‍

‍

Wie funktioniert Ionic?

Hier ist eine kurze Übersicht darüber, wie Ionic funktioniert.

Architektur von Ionic

Ionic basiert auf einer Kombination von verschiedenen Technologien und Tools, um die Entwicklung von mobilen Anwendungen zu erleichtern. Dazu gehören Angular, ein populäres Framework für die Entwicklung von Webanwendungen, und früher Cordova, eine Plattform für die Erstellung von nativen mobilen Anwendungen mit Webtechnologien.

Mit Ionic 4 wurde Cordova durch Capacitor ersetzt. Capacitor ist ein Open-Source-Projekt, das von Ionic selbst entwickelt wurde und ähnliche Funktionalitäten wie Cordova bietet, aber auch eine verbesserte Plattform-Konsistenz und eine bessere Integration mit modernen JavaScript-Frameworks.

Ionic verwendet nun also Angular für die Struktur und Organisation des Codes und Capacitor für den Zugriff auf native Gerätefunktionen. Ab Ionic Version 4 kann es auch mit anderen Frameworks wie React oder Vue.js verwendet werden.

Entwicklung mit Ionic

Die Entwicklung mit Ionic beginnt in der Regel mit der Erstellung einer neuen App mit dem Ionic CLI (Command Line Interface). Dieses Tool bietet eine Reihe von Befehlen, die das Erstellen, Testen und Bereitstellen von Ionic-Apps erleichtern.

Die App-Entwicklung erfolgt dann mit Webtechnologien. Entwickler können die umfangreiche Bibliothek von UI-Komponenten von Ionic nutzen, um das User Interface ihrer App zu erstellen. Diese Komponenten sind anpassbar und können an die spezifischen Anforderungen der App angepasst werden.

‍

Capacitor zur Kommunikation mit Ionic

Doch wie kommuniziert ein Framework wie Ionic mit iOS oder Android? Die Antwort heißt Capacitor. Dabei handelt es sich um eine native Runtime, welches es ermöglicht, eine mit Ionic entwickelte App in einem Container mit WebView auf iOS oder Android auszuführen.

Zusätzlich stellt Capacitor eine node.js Library zur Verfügung, die den Zugriff auf native Elemente (Kamera, Galerie etc) in Form von Plugins für React, Angular oder Vue.js ermöglicht. Damit schafft Capacitor die Voraussetzung, sowohl native Apps als auch Progressive Web Apps zu bauen. Progressive Web Apps sind Webseiten mit ähnlichen Eigenschaften wie native Apps (zum Beispiel Zugriff auf Gerätefunktionen), die jedoch weiterhin im Browser ausgeführt werden. Komfortabel ist die Funktion, in Capacitor selbstgeschriebene, native Plugins einzubinden.

Bereitstellung der Web App

Sobald die Entwicklung abgeschlossen ist, kann die Ionic-App auf verschiedene Plattformen bereitgestellt werden, darunter iOS, Android und das Web. Dies wird durch die Verwendung von Cordova oder Capacitor ermöglicht, die die Web-basierte Ionic-App in eine native App verpacken, die auf den jeweiligen Plattformen ausgeführt werden kann.

‍

Vorteile und Herausforderungen von Ionic

Wie jedes große Framework bringt auch der Einsatz von Ionic Nachteile mit sich. Nicht immer entspricht der Funktionsumfang der mittels Capacitor eingebunden nativen Elemente den Anforderungen des Projekts. Anpassungen für den jeweiligen Anwendungsfall sind nicht immer trivial, manchmal sogar unmöglich. In diesem Fall muss das Plugin für das Projekt neu implementiert werden, was in der nativen Sprache der Plattform geschehen muss (Kotlin oder Swift). Plugins sind mitunter veraltet und werden von der Community nicht mehr gewartet. Ein Blick in das jeweilige GIT-Repository verrät, wie es um die Wartung des Plugins steht.

Die meisten User Interface Element von Ionic sind nach dem Mobile First Ansatz umgesetzt und brauchen dementsprechend Anpassungen für Desktop Web Applikationen. 

‍

Ionic im Vergleich mit anderen Hybrid Apps

Die Wahl des richtigen Frameworks für die hybride App-Entwicklung kann eine Herausforderung sein. Es gibt verschiedene Optionen auf dem Markt, und jede hat ihre eigenen Stärken und Schwächen. In diesem Abschnitt werden wir Ionic mit zwei anderen beliebten Frameworks vergleichen: React Native und Flutter.

Ionic vs. React Native

React Native ist ein weiteres beliebtes Framework für die hybride App-Entwicklung, das von Meta entwickelt wurde. Es ermöglicht es Entwicklern, native Apps mit JavaScript und React zu schreiben. Wie schneidet Ionic im Vergleich zu React Native ab? Welche Vorteile bietet Ionic gegenüber React Native und umgekehrt?

Wie schneidet Ionic im Vergleich zu Flutter ab?

Flutter und Ionic sind ebenfalls konkurrierende Frameworks für die App-Entwicklung und haben unterschiedliche Stärken.

• Sprache: Flutter verwendet die Programmiersprache Dart, die weniger verbreitet ist als die Webtechnologien, die Ionic verwendet. Dies könnte eine Lernkurve für Entwickler darstellen, die neu in Dart sind.

• Performance: Flutter kompiliert zu nativem Code, was in der Regel zu einer besseren Performance führt als bei Ionic, das in einem WebView läuft.

• UI-Komponenten: Wie Ionic bietet auch Flutter eine umfangreiche Bibliothek von UI-Komponenten. Ein Unterschied besteht jedoch darin, dass Flutter seine eigenen Rendering-Engine verwendet, was bedeutet, dass es nicht auf die nativen Widgets des Betriebssystems angewiesen ist.

• Community und Support: Flutter wird von Google unterstützt und ist ein jüngeres Framework als Ionic. Dennoch hat es bereits eine größere Community und eine Vielzahl an verfügbaren Ressourcen.

‍

Was sind die Vor- und Nachteile von Ionic im Vergleich zu diesen beiden Alternativen?

Jedes Framework hat seine eigenen Vor- und Nachteile. Was sind die spezifischen Vor- und Nachteile von Ionic im Vergleich zu React Native und Flutter? Welche Faktoren sollten Entwickler bei der Wahl zwischen diesen Frameworks berücksichtigen?

Die Wahl zwischen Ionic, React Native und Flutter hängt von verschiedenen Faktoren ab, einschließlich der Anforderungen des Projekts, der vorhandenen Fähigkeiten des Entwicklungsteams und der Präferenzen für bestimmte Technologien.

• Vorteile von Ionic: Ionic's Stärken liegen in seiner Verwendung von weit verbreiteten Webtechnologien, seiner umfangreichen Bibliothek von UI-Komponenten und seiner Fähigkeit, aus einer einzigen Codebasis Apps für mehrere Plattformen zu erstellen.

• Nachteile von Ionic: Zu den Nachteilen von Ionic gehören möglicherweise eine geringere Performance im Vergleich zu React Native und Flutter und eine geringere Integration mit nativen Plattformfunktionen im Vergleich zu React Native.

• Vorteile von React Native und Flutter: React Native und Flutter können in einigen Fällen eine bessere Performance und eine engere Integration mit nativen Plattformfunktionen bieten. Flutter hat auch den Vorteil, dass es seine eigene Rendering-Engine verwendet.

• Nachteile von React Native und Flutter: React Native kann eine geringere Auswahl an UI-Komponenten haben, und Flutter verwendet die weniger verbreitete Programmiersprache Dart. Beide können auch eine größere Lernkurve für Entwickler darstellen, die neu in diesen Technologien sind.

‍

Persönliche Erfahrung, Entwicklung für die Österreichische Post

Im Team haben wir an einer Hybrid App für Android und iOS sowie das Web unter Einsatz von Ionic und React sowie Capacitor gearbeitet. Der in unserer Situation überragende Vorteil war die gemeinsame Codebasis. Sie ermöglichte es uns, uns als Team auf eine Technologie zu konzentrieren und mit nur einem Team alle drei Plattformen zu bedienen.

Auch die Performance von Ionic lässt nicht zu wünschen übrig. Die App läuft flüssig auf allen drei Plattformen. 

Durch die Kombination von Ionic mit React war es uns auch möglich, die eigene UI Component Library des Kundens mit einzubinden. Im Bezug auf Testing ist Ionic auch sehr flexibel. Unit Tests in unserem Projekt basierten auf Jest und Enzyme, End-to-End Tests wurden mit Selenium durchgeführt. 

Gemeinsam haben wir so erfolgreich das Post KartenStudio der österreichischen Post als Hybrid App für Android, iOS und Web entwickelt. Die Hybrid App ermöglicht die individuelle Gestaltung von Post- und Grußkarten mit der Option für personalisierten Massenversand.  Da die App sowohl über das iPhone, Android als auch im Web benutzt werden kann, profitieren User von intuitiver Handhabung, zahlreicher neuer Features und top User Experience.

‍

‍

Mein persönliches Fazit lautet: Mit dem Einsatz von Ionic ist ein Projekt auch für die Zukunft gerüstet, da die Codebasis Webstandards entspricht, die im Gegensatz zu proprietären Frameworks und Libraries nicht einfach so verschwinden. 

‍