Cross-Plattform-Entwicklung mit Ionic 4, Stencil und Capacitor, Teil 2
Capacitor und Stencil sind zwei Tools, die Entwicklern in der neuen Ionic-Version das Leben einfacher machen sollen und auch eigenständig einsetzbar sind.
- Norbert Frank
Wenn eine Ionic-Anwendung nicht als Web-App, sondern als native mobile App erscheinen soll, konnte man seit der ersten Ionic-Version komfortabel eine Cordova-App für Android und iOS erzeugen. Diese Möglichkeit besteht mit Ionic 4 weiterhin, aber mit dem Projekt Capacitor ist eine Alternative hinzugekommen. Zwar vom Ionic-Team entwickelt, kann Capacitor wie Cordova auch unabhängig von Ionic zum Einsatz kommen.
Das Ionic-Team hat in der Vergangenheit einiges zu Cordova beigetragen und angekündigt, dies auch weiterhin zu tun. Aufgrund seiner langen Historie und weiten Verbreitung muss Cordova allerdings bei der Weiterentwicklung immer die Kompatibilität zu bestehenden Plug-ins und Versionen berücksichtigen. Bei einem neuen Projekt ist dass nicht erforderlich, sodass mit Capacitor eine zeitgemäße Alternative bereitsteht. Sie ist grundsätzlich ähnlich zu Cordova aufgebaut. Es wird ebenfalls der native Browser von iOS oder Android gekapselt und darin eine Webanwendung mit Schnittstellen zu nativen Gerätefunktionen ausgeführt. Auch das Plug-in-Konzept ist vergleichbar.
Artikelserie: Cross-Plattform-Entwicklung mit Ionic 4, Stencil und Capacitor
- Teil 1: Ionic mit Angular, React oder Vue.js
- Teil 2: Stencil und Capacitor
Unterschied zu Cordova
Capacitor unterscheidet sich von Cordova vor allem darin, dass es die nativen Build-Tools der jeweiligen Plattform stärker einbindet. Cordova bringt eigene Build-Tools mit, die das komplette Erzeugen der nativen App übernehmen. Dazu verwendet Cordova zwar die offiziellen SDKs der jeweiligen Plattform, hat aber den Anspruch, den Vorgang vollständig zu automatisieren. Das führt dazu, dass man jede Einstellung des nativen Projekts in der Cordova-Konfiguration vornehmen muss, weil sie ansonsten beim nächsten Build überschrieben werden. Auch muss man Cordova laufend an neue Versionen anpassen.
Capacitor geht einen anderen Weg, indem es die nativen Entwicklungsumgebungen integriert. Dazu erzeugt das CLI nur einmalig ein natives Projekt, das Entwickler dann mit XCode oder Android Studio weiter verwalten können. Capacitor sorgt lediglich dafür, die Webressourcen bei Änderungen in das native Projekt zu kopieren, lässt aber alle anderen Einstellungen unverändert. Das bringt mehrere Vorteile: Entwickler nativer Apps finden sich direkt zurecht, die offizielle Dokumentation ist auch für Capacitor-Projekte gültig und Capacitor ist leichtgewichtiger und flexibler.
Natürlich ist Capacitor für den Einsatz mit Ionic optimiert, aber auch für beliebige Webanwendungen einsetzbar. Als Zielplattform werden neben Android und iOS auch Electron und Progressive Web Apps (PWA) unterstützt. Die PWA-Unterstützung bedeutet, dass die Capacitor-Plug-ins – sofern technisch möglich – die Browser-API als Alternative zu nativen APIs nutzen. Auf diese Weise kann man zum Beispiel die Kamera in einer Web-App mit der gleichen API verwenden. Ein weiterer Unterschied zwischen Capacitor und Cordova ist, dass alle Plug-ins direkt zum App-Start zur Verfügung stehen und die App nicht auf ein deviceready-Event warten muss.
Eigene Plug-ins und Cordova
Capacitor bringt einige Plug-ins mit und es gibt zusätzliche Community-Plug-ins. Das Angebot ist bei dem noch jungen Projekt allerdings noch deutlich kleiner als bei Cordova, wächst aber ständig. Allerdings kann Capacitor auch Cordova-Plug-ins ausführen, sodass viele Cordova-Plug-ins auch problemlos mit Capacitor nutzbar sind. Die Capacitor-Dokumentation enthält eine Liste von inkompatiblen Plug-ins, aber die Mehrheit der Cordova-Plug-ins ist direkt einsetzbar. Das bedeutet, dass auch Ionic-Native-Plug-ins funktionieren.
Ionic-Native ist ein weiteres Projekt des Ionic-Teams und umfasst eine große Anzahl von Wrappern für bekannte Cordova-Plug-ins. Die Wrapper ergänzen Typescript-Informationen und überführen die häufig Callback-basierten APIs der Plug-ins in eine Promise-basierte API, was die Nutzung vereinfacht. Für den Einsatz eines Ionic-Native-Plug-ins müssen Nutzer immer den Wrapper und zusätzlich das Plug-in selbst installieren. Wenn das Plug-in kompatibel zu Capacitor ist, kann man auch den Ionic-Native-Wrapper mit Capacitor einsetzen.
Derzeit unterscheiden sich Capacitor und Cordova also überwiegend in der Vorgehensweise und weniger darin, dass Capacitor grundsätzlich neue technische Möglichkeiten bietet oder einen deutlichen Performance-Vorteil hätte. Von daher muss man für bestehende Projekte abwägen, ob eine Umstellung sinnvoll ist. Man wird sehen, wie sich das Projekt in der Zukunft entwickelt. Angedacht ist, eine bessere Unterstützung zur Einbettung in bestehende native Applikationen zu schaffen. Auch überlegt das Ionic-Team, einen generischen Wrapper für native SDKs zu entwickeln, um deren Funktionen aus JavaScript heraus direkt nutzen zu können und die Abhängigkeit zu spezialisierten Plug-ins zu verringern.
