Basierend auf den Arbeitsstunden der Entwickler war das Ionic-Framework (das von Drifty entwickelt und unterstützt wird) im Jahr 2021 das viertmeist genutzte plattformübergreifende oder hybride Framework für die Entwicklung mobiler Apps weltweit. Während Flutter und React Native derzeit mit einigem Abstand die beliebtesten Frameworks zur Entwicklung hybrider Apps sind, liegt Ionic mit 16 % Marktanteil auf einer ähnlichen Popularität wie Cordova und leicht vor Xamarin und Unity.
Ionic behauptet, dass 15 % der Apps im App Store von Apple mit dem Framework entwickelt wurden, sowie Zehntausende von Anwendungen, die von Unternehmen und Organisationen für interne Zwecke entwickelt wurden.
Von Softwareentwicklern weltweit verwendete plattformübergreifende mobile Frameworks von 2019 bis 2021
Quelle: Statista.com
In diesem Blog stellen wir Ihnen die Anwendungsfälle, Stärken und Schwächen des Ionic-Frameworks vor. Und wann und warum es gegenüber plattformübergreifenden Alternativen wie Flutter und React Native oder einem vollständig nativen Ansatz vorzuziehen ist.
Der Aufstieg der plattformübergreifenden (hybriden) mobilen Anwendungen
Wenn Sie noch keine klare strategische Entscheidung darüber getroffen haben, ob Ihre nächste App plattformübergreifend oder nativ sein soll, gehen wir hier auf die jeweiligen Vor- und Nachteile der beiden Ansätze ein – Web-Apps vs Native Apps: ein Vergleich.
Um es kurz zu machen: Native Apps, die speziell für die mobilen Betriebssysteme Android oder iOS entwickelt wurden, bieten eine bessere Integration mit der Gerätehardware wie Kameras, Mikrofonen und GPS.Native Apps sind in der Regel die erste Wahl für Apps, deren Funktionen eng an die Nutzung der Gerätehardware gebunden sind, und für solche, bei denen eine reibungslose Reaktionszeit im Vordergrund steht.Plattformübergreifende oder hybride Apps gibt es in zwei Varianten – Progressive Web Apps und traditionelle WebView-Apps. Letztere sind adaptive Webseiten, die innerhalb einer Anwendung gerendert und mit denselben Programmiersprachen wie Webseiten erstellt werden. Dazu gehören JavaScript, CSS und HTML auf dem Frontend und Python, Java und Ruby auf der Server-Seite.
WebView-Anwendungen sind relativ billig und einfach zu erstellen, haben aber nur begrenzten Zugriff auf die Gerätehardware, was nur über Plugins möglich ist. Dennoch können diese Apps eine gute Wahl sein, wenn es darum geht, eine benutzerdefinierte mobile Version von einfachen, inhaltsvermittelnden Webanwendungen anzubieten.
Progressive Web-Apps (PWAs) befinden sich in der Mitte zwischen WebView und nativen Apps. Dabei handelt es sich im Wesentlichen um kleine Websites, die in einer Browser-Shell innerhalb einer App laufen, die Zugriff auf die native Plattformschicht bietet. Die Entwicklung von plattformübergreifenden Frameworks wie Ionic, Flutter, React Native, Cordova und Xamarin bedeutet, dass PWAs inzwischen dem Verhalten und der Leistung der nativen Äquivalente ziemlich nahe kommen können.
Es wird nur eine Kern-Codebasis für Android und iOS entwickelt, wodurch plattformübergreifende Apps kosten- und zeiteffizienter sind als native. Die Frameworks gelten im Allgemeinen als einfacher zu erlernen und schneller zu erstellen als die für native Anwendungen verwendeten. Und bei vielen plattformübergreifenden Anwendungen gibt es, wenn sie gut gemacht sind, fast keine spürbaren Kompromisse bei Leistung und Zuverlässigkeit.
Moderne PWAs sind zwar immer noch (je nach Funktionalitäten der Anwendung in unterschiedlichem Maße) ein Kompromiss gegenüber der Leistung nativer Anwendungen, aber sie kommen dem nahe genug, um eine echte strategische Wahl darzustellen. Und für einige Arten von Anwendungen sogar die bessere Wahl.
Hier einige Beispiele für bekannte plattformübergreifende PWAs, die zeigen, wie effektiv diese Technologie sein kann:
- Tinder
- Financial Times
- Twitter Lite
- Starbucks
- Uber
- Spotify
Das Ionic-Framework für plattformübergreifende Anwendungen
Ionic wurde 2013 veröffentlicht und ist ein HTML5-SDK (Software Development Kit), das als Grundlage für die Entwicklung hybrider mobiler und Desktop-Apps mit Webtechnologien entwickelt wurde. Ionic-Apps werden in der Regel hauptsächlich in HTML, CSS und JavaScript geschrieben und das Framework ist mit den beliebten Javascript-Frameworks und -Bibliotheken wie Angular, Vue und React integriert.
Einige Beispiele für erfolgreiche Apps, die mit dem Ionic-Framework entwickelt wurden, sind:
- Untappd – das soziale Netzwerk für Bierliebhaber.
- MarketWatch – Medien-App für Finanz-, Börsen- und Wirtschaftsnachrichten und -daten.
- Sworkit – Fitness-App mit über 25 Millionen Nutzern für Android, iOS und Web-App im Browser.
- TD Trading – Börsenmakler- und Trading-App.
Bei Ionic geht es nicht mehr nur um Angular und Cordova
In der Vergangenheit wurde das Ionic-Framework als UI-Kit für in Angular oder Cordova geschriebene Hybrid-Apps entwickelt. Dies änderte sich jedoch mit der Entwicklung von Capacitor, einer neuen nativen Laufzeitumgebung, die von Ionic als langfristige Alternative zu Cordova selbst entwickelt wurde. Im Jahr 2019 fügte Ionic seiner ursprünglichen Angular-Unterstützung die Unterstützung für React hinzu, gefolgt von der Unterstützung für Vue.js, dem am dritthäufigsten verwendeten JavaScript-Framework.
Ionic beschreibt sich nun nicht mehr als Framework für Cordova und Angular, sondern als Framework für Capacitor, „mit offizieller Unterstützung für Angular, React und Vue und inoffizieller Unterstützung für so ziemlich jeden JS-Stack da draußen.“
Capacitor von Ionic – Erstellung nativer Anwendungen mit Webtechnologien
Ionic verspricht für Capacitor, dass dessen Schnittstelle für den Zugriff auf native SDKs, native UI-Steuerelemente und native APIs auf jeder Plattform ermöglicht. Das bedeutet, dass Anwendungen, die auf der Laufzeitumgebung entwickelt werden, als wirklich nativ und plattformübergreifend bezeichnet werden können.
Ionic.io veröffentlicht folgende Erklärung, was Capacitor zu bieten hat:
„Es ist vielleicht praktisch, sich Capacitor als einen leistungsstarken neuen Browser für moderne Web-Apps vorzustellen, der die volle native Funktionalität jeder Plattform durch konsistente plattformübergreifende APIs freischaltet. Mit Capacitor können Entwickler eine App erstellen und einen Satz von APIs ansteuern, unabhängig von der Plattform, auf der die App läuft, im Gegensatz zur Verwaltung mehrerer APIs für jede Zielplattform.“
„Das bedeutet, dass zum Beispiel der Zugriff auf die Kamera auf iOS/Android denselben Code verwendet wie auf Electron und im Web. Das macht es einfach, eine Web-App zu entwickeln, die nativ auf dem Handy, dem Desktop und im Web als Progressive Web App läuft!“
Der Vorteil von Capacitor mit Ionic im Vergleich zu Cordova ist, dass letzteres über eine Abstraktionsschicht arbeitet und nicht direkt mit nativen SDKs, APIs und UI-Steuerelementen verbunden ist.
Capacitor (Capacitor 3 wurde Anfang 2021 veröffentlicht) wurde im vergangenen Jahr rund 1,5 Millionen Mal installiert und in Kombination mit dem Ionic-Framework von Unternehmen wie Burger King und der Fluggesellschaft Southwest zur Erstellung interner und verbraucherorientierter Apps verwendet.
Wer sich für einen tieferen Einblick in die Funktionsweise von Capacitor interessiert, sollte sich diesen Blog von Max Lynch von Ionic anschauen. Er umreißt die Funktionsweise der Laufzeitumgebung auf niedriger Ebene und erklärt die Native API und die abgespeckte WebView-Schicht.
Warum das Ionic Framework nutzen?
Die Schwäche von Ionic in der Vergangenheit war es, dass die Verwendung von WebView bedeutete, im Hinblick auf große Anwendungen oft als suboptimal angesehen wurde, insbesondere bei Anwendungen, die stark von der Gerätehardware abhängig waren. Vor Capacitor fehlte Ionic auch die Unterstützung nativer Plugins, was zu einem Mangel an Stabilität und potenziellen Konflikten zwischen Plugins führte. Manchmal gab es auch keinen nativen Plugin-Zugang, so dass Entwickler gezwungen waren, Lösungen von Grund auf neu zu konzipieren.
Die Verwendung der neuesten Version von Ionic (6 zum Zeitpunkt der Erstellung dieses Artikels) mit Capacitor trägt dazu bei, die traditionellen Schwächen des Frameworks beim effizienten Zugriff auf Gerätehardware sowie die zuvor suboptimale Geschwindigkeit und Größe von Apps zu minimieren.
All diese Nachteile ergaben sich aus der Tatsache, dass mit Ionic erstellte Apps WebView-basiert sind. Capacitor ist immer noch WebView, aber eine abgespeckte Version, bei der unnötige iOS- und Android-WebView-Funktionen entfernt wurden.
Mit Capacitor kann eine App auch mit der nativen Funktionalität von Android Manifest/Info.plist/etc. arbeiten, während Cordova versuchte, alles selbst zu machen; ein Ansatz, der nicht immer erfolgreich war. Capacitor gibt dem Entwicklungsteam zudem die volle Kontrolle über die Entwicklungsumgebung.
Migrieren von Ionic-Anwendungen von Cordova zu Capacitor
Während Ionic auf Capacitor als Grundlage für die Zukunft des Frameworks setzt, wird es Cordova noch mindestens ein paar Jahre lang unterstützen. Und das Cordova-Ionic-Plugin-Ökosystem ist reichhaltig und ausgereift. Die mit Cordova erstellten Ionic-Apps aus der Zeit vor Capacitor auf die neuesten Versionen zu aktualisieren, wird auf absehbare Zeit weiterhin eine praktikable Option sein.
Aber für Unternehmen, die Ionic-Apps zukunftssicher machen wollen, indem sie sie auf Capacitor migrieren, ist dies ein relativ problemloser Prozess. Capacitor wurde speziell mit Blick auf die Abwärtskompatibilität mit Cordova entwickelt, so dass Legacy-Apps einfach migriert werden können.
Eine kleine Anwendung kann möglicherweise in nur wenigen Stunden von Cordova zu Capacitor migriert werden. Es gibt einen Migrationsleitfaden in der Capacitor-Dokumentation – er ist relativ einfach und überschaubar.
Akzeptiert der App Store plattformübergreifende Apps, die mit Ionic erstellt wurden?
Es gab fälschlicherweise Berichte, dass Apple in letzter Zeit plattformübergreifende Apps, einschließlich solcher, die mit dem Ionic-Framework erstellt wurden, aus dem App Store ablehnt oder auswirft. Dies ist nicht ganz richtig. Apple hat die Einreichung von Apps, die die veralteten UIWebView-APIs verwenden, zugunsten des neuen plattformspezifischen WKWebView eingestellt.
Sowohl die neuesten Versionen von Capacitor als auch Cordova können diese Anforderung für mit Ionic entwickelte Apps erfüllen.
Die technischen Stärken von Ionic
Einige der bemerkenswertesten Vorzüge von Ionic aus technischer Sicht sind:
Plattformübergreifende Einheitlichkeit des Designs
Das Adaptive Styling von Ionic, das die Komponenten an den Stil der Plattform anpasst, auf der die App läuft, ist nicht immer eine exakte Übereinstimmung, was manchmal ein Kritikpunkt ist. Aber wenn es für ein App-Projekt wichtiger ist, dass das Design an ein bestimmtes System gebunden ist oder konsistent aussieht, kann Ionic viel weniger Zeit für die plattformübergreifende Standardisierung benötigen.
Während die Freiheit, die React Native und Flutter bei der Anpassung des Komponentenstylings bieten, bedeutet, dass sie genau an das native Styling angepasst werden können, kann dies für mehrere Plattformen ein unerwartet zeit- und ressourcenaufwändiger Prozess sein.
Native Code-Überbrückung
Es wird oft behauptet, dass der Prozess der Überbrückung von nativem Code in React Native reibungsloser abläuft als derselbe Prozess in Ionic. Die Einführung von Capacitor, das native Projekte als Source-Artefakte hinzufügt, bedeutet jedoch, dass dies nun im Wesentlichen auf die gleiche Weise geschieht.
Integration von nativen Funktionen
Vor Capacitor konnten Ionic-Apps, die mit Cordova erstellt wurden, nativen Code nur über Plugins installieren. Entwicklungsteams mussten oft neue Cordova-Plugins parallel zur App-Entwicklung erstellen, wenn nicht bereits etwas Geeignetes vorhanden war. Das konnte bedeuten, dass lange Zeit verging, bis Plugins entwickelt und benutzerdefinierter nativer Code für die Interaktion mit der eigentlichen App getestet wurde.
Die Einführung von Capacitor bedeutet nun, dass, wie bei React Native, Plattformprojekte als Quellcode verwendet werden können. Dies vereinfacht den Prozess der Überbrückung von nativem Code in eine App und bedeutet, dass benutzerdefinierter nativer Code im selben Projekt wie die App getestet werden kann.
Die technischen Nachteile von Ionic
Einige der Schwachpunkte von Ionic sind:
In einigen Bereichen weniger Performance als React Native oder Flutter
Als webbasiertes Framework sind Ionic-Apps auf Plugins angewiesen, um auf Native-APIs zuzugreifen. Je komplexer eine App ist, desto mehr Plugins werden benötigt. Und Plugins, die funktioniert haben, können Zuverlässigkeitsprobleme haben und plötzlich Fehler zurückgeben, wenn die Pakete nicht gut verwaltet werden.
Im Gegensatz zu React Native, das wie Flutter tatsächliche native Komponenten nutzt und standardmäßige native Projekte erstellt, die die gemeinsame Nutzung von JavaScript und nativem Code ermöglichen, ist Ionic auf Plugins angewiesen. Das verschafft React Native-Apps einen Leistungsvorteil. Die Behauptung, dass React Native die leistungsfähigere Plattform ist, hat jedoch ihre Tücken.
Zum Beispiel können die Bibliotheken, die für die Navigation mit React Native verwendet werden, langsamer sein als der Router von Angular, der mit Ionic verwendet wird. Allerdings haben React Native und Flutter einige Vorteile, wenn es um den Zugriff auf Gerätehardware geht.
Ähnlichkeit mit dem Styling der nativen Plattform
Das Ionic-Framework verfügt über ein adaptives Styling, mit dem das Aussehen der Komponenten an den Stil der Plattform angepasst werden soll, auf der die App ausgeführt wird. Nicht jedes Element entspricht jedoch genau den nativen Gegenstücken aller Plattformen, was dem Design von Ionic-Apps einen etwas weniger nativen Charakter verleihen kann.
Wie ist Ionic im Vergleich zu React Native und Flutter?
Es wäre naiv, zu behaupten, eines dieser beliebten plattformübergreifenden mobilen Frameworks sei „das beste„. Die Realität ist, dass sie alle unterschiedliche technologische Qualitäten und Eigenschaften haben, was bedeutet, dass die Frage besser anders formuliert werden sollte.
Alle wichtigen aktuellen Frameworks für die plattformübergreifende App-Entwicklung sind „gut„. Wären sie es nicht, würden sie auf dem hart umkämpften Markt der Softwareentwicklung nicht existieren. Welches Framework für Ihre Bedürfnisse am besten geeignet ist, hängt von einer Reihe von Faktoren ab.
Anstatt zu fragen, welches der Frameworks „besser“ ist, sollte die Frage lauten: „Welches ist das richtige für dieses bestimmte Projekt?“ Das ist eine viel differenziertere und berechtigte Frage.
Die Antwort hängt von einer Kombination aus den Anforderungen der App, den Ressourcen und der Strategie auf Unternehmensebene (d. h., ob das Unternehmen über interne Softwareentwicklungsressourcen und/oder Richtlinien für den bevorzugten Tech-Stack verfügt) sowie von den Vorlieben und der Erfahrung derjenigen ab, die mit der Erstellung der App beauftragt sind.
Wenn Sie daran interessiert sind, React Native und Flutter als Technologien für hybride Apps zu erforschen, können Sie unsere vergleichende Analyse Flutter vs. React Native – wann ist welche Lösung besser?
Für welche Art von App oder Organisation ist Ionic eine gute Wahl?
Das Ionic-Framework sollte für Ihre App dann in Betracht gezogen werden, wenn:
- Sie möchten die App sowohl für iOS und Android als auch für eine Website und möglicherweise sogar Desktop-Apps bereitstellen können.
- Sie haben weder die Zeit noch die Ressourcen, um mehrere Codebasen für eine Vielzahl von nativen Tech-Stacks zu erstellen und zu pflegen.
- Sie haben Zugang zu einem Softwareentwicklungsteam, das hauptsächlich über Kenntnisse und Erfahrungen in der Webentwicklung verfügt.
- Sie haben keinen unmittelbaren Zugang zu mehreren Softwareentwicklungsteams, die in mobilen und nativen Sprachen wie Dart (Flutter), Kotlin, Swift usw. programmieren können.
- Ihre App ist nicht stark von der Gerätehardware abhängig.
- Die absolut optimale Leistung der App auf jeder Plattform ist strategisch nicht entscheidend. Aber eine App, die gut genug funktioniert, um die Bedürfnisse der Nutzer zu befriedigen und über mehrere Plattformen hinweg verfügbar ist, ist wichtig.
Ionic kann zum Erstellen von Apps verwendet werden, die meist dieselbe Codebasis für diese verschiedenen Plattformen verwenden. Es wäre zum Beispiel eine kostengünstige Wahl für ein Start-up, das eine Anwendung für das Web erstellen muss, die auch als Android- und iOS-App verfügbar ist. Alles kann sich in einem Repository, einem Framework und einer Sprache befinden und kann überall eingesetzt werden.
Oder wenn Sie ein MVP erstellen möchten, um einen bestimmten Markt oder eine Geschäftsfunktion zu testen, um zu sehen, ob die Benutzer den Wert der App erkennen, eignet sich das vorgefertigte Design von Ionic für eine schnelle Markteinführung.
Wann könnte Ionic nicht das optimale Framework für Ihr App-Projekt sein?
Wenn Sie nur native Anwendungen entwickeln müssen und keine Website benötigen oder wollen, dann könnte eine andere Wahl wie Flutter (obwohl jetzt Web- und Desktop-Unterstützung für Flutter eingeführt wurde, was zu seiner wachsenden Beliebtheit beiträgt) oder React Native für Sie sinnvoller sein. Oder ein komplett nativer Ansatz wie Kotlin oder Java für Android oder Swift oder Objective-C für iOS.
Wenn Sie eine große, komplexe App entwickeln, die hohe Anforderungen an die Gerätehardware und die Speichernutzung stellt – dann ist Ionic möglicherweise nicht die optimale Wahl für optimale technische Performance auf allen Plattformen.
Wenn Ihre App darauf angewiesen ist, das Design nativer Funktionen zu erweitern, z. B. wie eine App wie Snapchat über die Kamera eines Geräts gelegt wird, ist Ionic wahrscheinlich nicht die beste Wahl.
Und wenn Sie über das Budget verfügen, um die einzelnen Codebases vollständig nativer Anwendungen für mehrere Plattformen zu entwickeln und zu pflegen, sowie über strategische Gründe, warum dies vorteilhaft oder entscheidend für den Erfolg Ihrer App ist, ist Ionic wahrscheinlich auch nicht das Framework Ihrer Wahl.
Fazit
Letztendlich sollte die Wahl des Frameworks für ein App-Projekt von den Anforderungen des Kunden, der Projektkomplexität und den organisatorischen Bedürfnissen abhängen, die mit den technischen Anforderungen und Präferenzen abgeglichen werden. Es ist nicht immer strategisch entscheidend, die optimale Geschwindigkeit für Bilder pro Sekunde zu erreichen. Aber eine optimale Markteinführungszeit und eine einheitliche Codebasis, die von einem Softwareentwicklungsteam, das hauptsächlich Webtechnologien einsetzt, erstellt und gewartet werden kann, können entscheidend sein.
