Native, Hybrid, Cross-Platform, PWA, Web - es wird mit sehr vielen Begriffen um sich geworfen.

Was ist Ionic

Write once, run anywhere

Ionic kann sowohl Hybrid als auch PWA als auch Web sein, und das macht es so besonders und einzigartig, denn im Grunde
ist Ionic ein UI Framework, welches sich zur Aufgabe gemacht hat den Systemlook der Geräte Android (Material Design) und iOS in HTML, CSS und JavaScript schlicht und einfach nachzubilden und als UI Komponenten anzubieten. Das schöne ist - theoretisch kriegen wir als Entwickler davon überhaupt nichts mit, denn wir implementieren eine Komponente nur und Ionic übernimmt für uns die Zuordnung des Systems und das schöne ist - wir können die komplette App im Browser bauen, wie eine normale Webseite.

Hier mal ein Beispiel:

Wir sehen eine Codebasis!

Hier ein weiteres Beispiel für eine Modal Komponente

Und auch das Verhalten ist gleich - man kann durch swipen das Modalfenster schließen.

Wichtig: Man ist nicht an dem Design gebunden, man kann auch alles im iOS oder Android Look darstellen lassen oder individuell verändern

Wir können den Look der Geräte angleichen, aber was ist mit den nativen Funktionen wie Kamera, Push etc.?

Abhängigkeiten

Ionic und Cordova

Cordova, früher PhoneGap, liefert uns vereinfacht gesagt die Brücke zu den nativen Plattformen. Sie spielt unsere Webapplikation in einem Container in der WebView der jeweiligen Geräte aus. Bei den nativen Funktionen verhält es sich ähnlich. Cordova liefert uns die Brücke zu den Systemen, in jedem Plugin gibt es iOS (Swift, Objective C) und Android (Java) Dateien und eben JS Dateien, diese dann letztlich über Ionic angesteuert werden. Es ist auch möglich eigene Plugins zu schreiben und direkt nativen Code zu implementieren.

Ionic und Capacitor

Seit 2019 gibt ist eine Capacitor welches über selbriges verfügt und zusätzlich die APP als PWA im Web ausspielen kann was natürlich bei der Auswahl der "Brücken" berücktsicht werden sollte. Capacitor ist zum aktuellen Zeitpunkt aber auch nur bedingt verfügbar denn Cordova ist Capacitor um Jahre voraus und wirkt nach meinen ersten Erfahrungen noch ein wenig ausgereifter und weniger fehleranfällig. Somit entscheidet am Ende die Anforderungen des Projekts die Auswahl der Brücken.

Flexibilität

Mit Ionic 4 wurde React und Vue, wobei letzterer noch in der Beta Phase ist, supportet, bis dahin war ausschließlich die Entwicklung mit Angular möglich. Aktuell kann man also zwischen React und Angular wählen was aufgrund der Popularität von React ein großer Vorteil für Ionic ist.

Ionic mit Angular oder React

Jetzt mit Ionic 5, welches enorme Performance Improvements verspricht (bis zu 2x schneller), wird aktuell (Stand 24.04.2020) nur React supportet, was sicherlich nochmal unterstreichen soll welche Priorität React in Zukunft bekommen soll. Auch hier gilt: in Verbindung mit Nativen Plugins scheint React zum aktuellen Zeitpunkt noch fehleranfälliger zu sein als Ionic mit Angular, deshalb würde ich noch zu Angular tendieren.

Performance

Performance bei Ionic Apps ist ein wichtiger Punkt, hier ist man sehr gut beraten sich die Anforderungen seines Projekts genau anzuschauen. Es gibt Anwendungsfälle wo Ionic zu 100 % geeignet ist und man es uneingeschränkt empfehlen kann und es gibt Anwendungsfälle wo man lieber darauf verzichtet, aus folgendem Grund: Wie erwähnt wird die App über einen nativen Container in der WebView des Gerätes ausgespielt der den Client zu mehr Rechenleistung fordert diese Applikation in der WebView zu rendern, generell kann man sagen - umso näher zu Hardware umso weniger Leistung braucht das Gerät. Vor allem auf schwächeren Geräten macht sich das bemerkbar. Wie erwähnt, die Komponenten sind alle nur im Web nachgebildet und werden nicht nativ kompiliert. Ich rede hier allerdings immer noch von Anwendungsfälle, es gibt genau so viele Fälle wo Ionic die perfekte Lösung ist und man kaum bis gar keinen Unterschied merkt zu einer nativen App.

Low Budget Projekte mit Ionic

Aktuell gibt es drei verschiedene Arten eine App zu entwickeln, entweder man baut sie komplett Nativ, dafür muss man zwei voneinander unabhängige Apps entwickeln mit in der Regel zwei verschiedenen Entwickler(teams), was natürlich sehr teuer ist. Dann kann man die App Hybrid bauen mit React Native, Native Script, Flutter, Xamarin, Ionic usw. Mit diesen Frameworks kann man mit einer Codebasis zwei Apps bauen. All diese Frameworks haben Ihre Vor- und Nachteile, Ionic ist jedoch das einzige Ui-Framework das vordefinierte Komponenten hat, so kann man sich sehr schnell eine App von der "Stange" programmieren ohne für jedes System eine eigene UI zu schreiben wie bei React Native zum Beispiel. Darüber hinaus kann man wie erwähnt die App mit Capacitor auch gleichzeitig im Web ausspielen was ebenfalls Zeit und Kosten spart, somit kann man mit einem Low Budget viel auf die Beine stellen.

Entwicklung und Zukunft

Ionic wird stetig weiterentwickelt und ist mittlerweile in der Version 5, mittlerweile gibts auch Ionic Pro als eine Weboberfläche und eine eigene Brücke zur Nativen APIs der Geräte mit Capacitor. Vue steht auch schon in den Startlöchern, damit würde Ionic die drei bekanntesten Frontend Frameworks supporten. Der Trend spricht für Ionic.