Kategorien: Technologien


Ionic ist ein kostenloses Open Source Framework für hybride App Entwicklung. Es ermöglicht, aus einer einzigen Codebasis heraus Apps gleichzeitig für Android, iOS und das Web zu entwickeln. 

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 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 App Entwicklung 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?

Ionic ist kein neuer Energy Drink, sondern ein kostenloses Open Source Framework für hybride App Entwicklung. 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.

Noch eine Schicht mehr bitte!

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

Im Team arbeiten wir seit einigen Monaten an einer Hybrid App für Android und iOS sowie das Web unter Einsatz von Ionic und React sowie Capacitor. Der in unserer Situation überragende Vorteil ist die gemeinsame Codebasis. Sie ermöglicht es uns, als Team auf eine Technologie 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 basieren auf Jest und Enzyme, End-to-End Tests werden mit Selenium durchgeführt. 

 

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 App Entwicklung erfahren? 

Mit individueller App Entwicklung zu einzigartiger User Experience! 

JETZT MEHR ERFAHREN!

Für E-Mail-Updates anmelden

Suchen