Im diesem Beitrag aus meiner Reihe über iOS Entwicklung möchte ich euch von unseren Erfahrungen mit Ionic Capacitor berichten.
Nach meinem etwas qualvollen Quereinstieg in React Native wollte ich es einmal etwas entspannter angehen. Deshalb habe ich mich diesmal für ein Framework entschieden, bei dem ich zumindest bereits vorhandenes Know-how einsetzen konnte. Bei Ionic Capacitor kann man auch mit Angular arbeiten und das kam mir sehr gelegen. Es ist aber ebenso möglich, React oder Vue zu verwenden, sofern man das möchte und für die ganz besonders Mutigen gibt es noch die Möglichkeit, in reinem JavaScript zu coden.
Was ist Capacitor?
Bei Capacitor handelt es sich um einen Wrapper, der nichts anderes tut, als eine reine Webanwendung aussehen zu lassen, als wäre sie eine native App. Dem Benutzer wird also vorgegaukelt, eine App zu verwenden, und das funktioniert so überzeugend, dass man es weder bei der Bedienung noch am Aussehen der App ohne Weiteres erkennen kann.
Capacitor ist die Weiterentwicklung von Apache Cordova und verfolgt einen ähnlichen Ansatz, auch wenn es natürlich Unterschiede im Detail gibt.
Es werden vor allem, jetzt im direkten Vergleich zu React Native, keine nativen Komponenten erstellt und der Programmcode wird, wie bei Webanwendungen üblich, von der Webview ausgeführt.
Man befindet sich also tatsächlich auf einer Webseite. Das bedeutet aber auch, dass man mit herkömmlichen HTML Tags arbeitet, die man in gewohnter Manier mittels CSS stylen kann.
Capacitor kann gemeinsam mit dem Ionic Framework verwendet werden, wodurch man zusätzlich zu den bekannten HTML Tags Zugriff auf eine große Anzahl an sofort einsetzbaren Komponenten erhält. Diese Komponenten bieten auch das sogenannte „Adaptive Styling“. Sie passen sich auf iOS und Android Geräten den durch den jeweiligen Styleguide definierten Anforderungen an.
Aller Anfang ist leicht
Im Gegensatz zu React Native war Capacitor mit Angular für mich praktisch ein Heimspiel. Alles ist vertraut und die Einarbeitungszeit kann ich wirklich nur mit „kaum merkbar“ angeben. Das kann aber natürlich für jemanden, der noch nicht viel mit Webtechnologien zu tun hatte, völlig anders aussehen.
Hierin besteht auch einer der großen Vorteile von Capacitor: Man hat die freie Wahl und muss nicht zwangsläufig z.B. Angular oder React verwenden, sondern kann sich für ein Framework entscheiden, das man bereits gut beherrscht und damit die Einarbeitungszeit auf ein Minimum reduziert.
Mit Know-how in HTML, CSS sowie JavaScript bzw. TypeScript ist man für die Entwicklung mit Capacitor jedenfalls gut gerüstet.
Die Beispielapplikation
Als Beispielapplikation haben wir hier wieder dieselbe App entwickelt, wie zuletzt mit React Native, nämlich eine kleine Businessapp mit klassischem Aufbau, welche Daten und Bilder von einem Webservice lädt und diese Daten dann in Form einer Liste samt dazugehöriger Detailansicht anzeigt. Außerdem wurde auf gängige Sensordaten und die Kamera zugegriffen sowie verschiedene Formularfelder dargestellt.
Unser Fokus bei der Entwicklung lag wieder ganz klar auf iOS als Zielplattform, weshalb wir auch direkt auf MacBooks entwickelt haben.
Die Entwicklungsumgebung unserer Wahl war auch diesmal wieder Visual Studio Code.
Was mir bei der Entwicklung mit Capacitor sehr gut gefallen hat ist, dass man mit der mobilen App zugleich auch eine Webapplikation erstellt, welche ohne weitere Änderungen in einem Webbrowser lauffähig ist. Gerade während der Entwicklung fand ich das ungemein praktisch, denn man erspart sich dadurch, ständig einen ressourcenhungrigen iOS oder Android Emulator laufen zu lassen.
Das Ansteuern von Sensoren ist hier – in Form von Plugins – nur einen Import entfernt. Viel komfortabler kann man das kaum noch anbieten.
Etwas mühsam kann sich allerdings teilweise die Suche nach Infos im Web und in Foren gestalten. Sucht man nach dem Begriff „Capacitor“ findet man meist zu allererst Webseiten über Kondensatoren, was leider weniger nützlich ist. Deshalb sollte man besser nach „Ionic Capacitor“ suchen. Davon abgesehen gibt es aber sehr viele Ressourcen, Komponenten und Plugins für dieses Framework, schon alleine deshalb, weil man sich ja in einem reinen Webentwicklungsumfeld befindet.
Nicht verschweigen sollte man an dieser Stelle auch, dass die Performance darunter leiden kann, dass hier eine Webseite gerendert wird, anstatt native Komponenten darzustellen. Für eine Businessapplikation, die hauptsächlich textuelle und teilweise auch grafische Daten darstellen soll, ist das aber in der Praxis von untergeordneter Bedeutung. Ein Actionspiel würde ich mit Capacitor aber nicht entwickeln.
Fazit
Mit Capacitor und Angular ging die Entwicklung besonders schnell von der Hand. Das lag natürlich auch daran, dass ich mit Angular viel besser vertraut bin, als zum Beispiel mit React. Genau solche Dinge sind es aber auch, die den Unterschied bei der Entwicklungszeit letztendlich ausmachen können und daher bei der Wahl des Frameworks zu Projektbeginn unbedingt berücksichtigt werden sollten.
Möchte man neben einer Anwendung für mobile Geräte auch eine Webanwendung erstellen, so kann man mit Capacitor eine Menge Zeit sparen. Hier wird „Build once – run everywhere“ wirklich wörtlich genommen. Von programmatischen Fallunterscheidungen und unterschiedlichen Komponenten für iOS und Android bleibt man hier völlig verschont.
Nicht vergessen darf man aber, dass eine Capacitor App unter der Haube eigentlich die Anzeige einer Webseite ist und es somit zu Einbußen bei der Performance kommen kann. Gerade bei älteren und sehr günstigen Mobilgeräten kann das ein Nachteil sein. Je nach Zielgruppe muss man das dann von Fall zu Fall entscheiden.
Verfasst von Thomas Polaschek
