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 und wie funktioniert hybride Appentwicklung mit Ionic?
Ionic ist kein neuer Energy Drink, sondern ein kostenloses Open Source Framework für hybride Appentwicklung. Es ermöglicht, aus einer einzigen Codebasis heraus Apps gleichzeitig für Android, iOS und das Web zu entwickeln. 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.
Ionic wurde 2012 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 war die Entwicklung nur in Kombination mit Angular möglich. Der “Big Change” kam 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.
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.
Herausforderungen
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.
Persönliche Erfahrung, hybride Appentwicklung 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.
Wie der gesamte Entwicklungsprozess im Detail aussah und was die Österreichische Post AG über das Endresultat sagt, können Sie jetzt in unserer Erfolgsgeschichte lesen.
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.
Sie wollen mehr über Appentwicklung erfahren?
Mit individueller Appentwicklung zu einzigartiger User Experience!
