Ionic vs. React Native: Der Vergleich

Ionic vs. React Native: Der Vergleich

Ionic vs. React Native: Der Vergleich

Möchten Sie mobile Apps entwickeln und sich außerhalb der nativen Tools umsehen, stolpern Sie wahrscheinlich irgendwann über Ionic und React Native. Aber wofür entscheiden Sie sich? Wir sagen es Ihnen!

Und der Gewinner ist…

… niemand. Ja, richtig gelesen: Leider(?) unterscheiden sich beide Frameworks im Detail zu stark, als dass wir einfach einen Sieger küren könnten. Stattdessen schauen wir uns also einfach die diversen Vor- und Nachteile von Ionic und React Native an. An der Oberfläche können zunächst beide Frameworks überzeugen: Sie bringen eine sehr große Community aus Entwicklern mit, werden häufig auch für sehr komplexe Apps genutzt und sind der Motor hinter vielen populären Apps in den diversen Stores.

Unter der Haube existieren außerdem weitere Gemeinsamkeiten, die zwar sehr technisch sind, aber die wir trotzdem erwähnen möchten. Ionic hatte immer das Ziel, Entwicklern die Möglichkeit zu geben, für „andere“ Plattformen zu entwickeln und daran teilzuhaben. Vielleicht möchten Sie eine native App basteln, die von den App Stores mithilfe von Web-Technologie heruntergeladen werden kann? Ionic kann das.

Dieses Konzept zieht sich wie ein roter Faden durch Frameworks wie eben Ionic oder React Native: Entwickler sollen Technologie nutzen, die Sie kennen, um Apps für andere Umgebungen zu entwickeln, die sie eben nicht kennen. Das ist die einfache Definition von Cross-Plattform-Frameworks, und das wird an den technischen Details deutlich:

Mit Ionic können Sie etwa HTML, CSS oder JavaScript nutzen, um iOS- oder Android-Apps zu entwickeln, PWAs zu entwerfen, klassische Desktop-Anwendungen zu programmieren und vieles mehr.

React Native greift auf das JavaScript-Framework React zurück, gleichzeitig werden native UI-Elemente aber zur Laufzeit gerendert, sodass auch damit die Entwicklung von iOS- und Android-Apps möglich ist.

Bis hierhin verfolgen Ionic und React Native also prinzipiell dasselbe Ziel: Verwende Technologie X, um für Plattform Y zu entwickeln, obwohl X und Y nicht dasselbe sind. In ihrer Philosophie sind also beide Frameworks recht ähnlich – aber hier hören die Gemeinsamkeiten dann auch schon fast auf.

Hybrid-Native oder Hybrid-Web?

Ionic und React Native lassen sich grob in zwei Kategorien einteilen. Schauen wir uns zuerst React Native an, das einen hybrid-nativen Ansatz verfolgt: eine native UI mit einem geteilten Code.

React Native (aber zum Beispiel auch Xamarin oder NativeScript) erlaubt es, das UI in einer bestimmten Sprache zu programmieren. „Cross-Plattform“ kommt in diesem Beispiel daher, dass React Native Calls aus JavaScript zu Calls transferiert, die für das native UI in bestimmten mobilen Plattformen genutzt werden. Ein Beispiel dazu: Um Text in einer mobilen App rendern zu lassen, ist [TextView] für Android und [UIView] für iOS notwendig. In React Native programmieren Sie dafür nur eine Komponente, die dann automatisch übersetzt wird. Es werden also nicht Komponenten geteilt, sondern Code.

Insgesamt versucht React Native also, eine „echte“ native App nachzubauen. JavaScript mag zwar die Basis bilden, aber React Native kümmert sich um die Übersetzung der Komponenten in die jeweilige Sprache der Plattform (also etwa Android oder iOS). Der Nachteil daran ist, dass React Native nur diejenigen Elemente ändern kann, die es auch unterstützt. Andernfalls lassen sich Komponenten weder nutzen noch ändern. Wieder ein Beispiel: Möchten Sie vielleicht den Rahmen um einen bestimmten Button im UI ändern, aber React Native kennt diesen Rahmen nicht, müssen Sie am Ende doch wieder manuell im Code arbeiten. Das kann die Arbeit verkomplizieren.

Ionic: der Hybrid-Web-Ansatz

Ionic löst diese Aufgaben technisch anders. Hier ist es nicht JavaScript-Code, der also Brücke verschiedene UI-Elemente kontrolliert. Stattdessen laufen die UI-Komponenten, die Sie in der App nutzen, tatsächlich auf allen Plattformen. In einer typischen mobilen App laufen diese Komponenten in einem Webview-Container, in einer PWA läuft alles im Browser und in einer nativen Desktop-App würde der Code etwa in einem Container wie Electron arbeiten.

Diese Vorgehensweise hat verschiedene Vorteile:

Konsistenz

Möchten Sie bestimmte Elemente des Nutzerinterfaces über alle Apps nutzen – auch Kleinigkeiten wie etwa einzelne Buttons –, gibt es eigentlich nur einen Weg, das bequem zu erledigen: Indem Sie Komponenten über alle digitalen Plattformen teilen, also Mobile, Desktop, Native und Web. Web-Komponenten sind aktuell auch die einzige Methode, um Komponenten über mehrere Projekte hinweg wieder und wieder zu nutzen.

Portierbarkeit

Da Ionic auf HTML, CSS und JavaScript basiert, läuft das UI auf einem standardisierten Layer. Sie Suchen nach einer vollständig anpassbaren Komponente, die einfach automatisch funktioniert, völlig unabhängig von der Plattform, auf der die App läuft? Ionic kann dies dank der Nutzung offener Web-Standards. Das bezieht sich auch auf neue Plattformen wie etwa PWAs.

Anpassbarkeit

Ionic-Entwickler geben gerne damit an, wirklich alles an ihrem UI anpassen zu können. Beispielsweise haben Sie die volle Kontrolle über das UI durch die Nutzung von Web-Technologien, die im Auslieferungszustand bereits sehr viele Eigenschaften für die Stilisierung mitbringen. Mit einem einfachen div-Tag geht es los und dann gibt es eigentlich keine Grenzen mehr.

Stabilität

Der vielleicht wichtigste Punkt kommt zum Schluss: Offene Web-Standards werden von allen aktuellen Browsern unterstützt, und daran wird sich auch nichts ändern. Apps, die heute laufen, werden auch morgen noch funktionieren. Andere Frontend-Tools wachsen und verändern sich gerne, und dabei wird oftmals die Abwärtskompatibilität auf der Strecke gelassen.

Eine Code-Basis für alles

Der Hybrid-Web-Ansatz bringt durch den Fokus auf HTML, CSS und JavaScript viele Vorteile mit. Nicht mehr das gesamte User Interface ist abhängig von der nativen Plattform, sondern nur noch einige wenige Features (wie vielleicht die Kamera). Apps laufen also einfach überall: unter iOS und Android, in Browsern, auf dem Desktop (bzw. Electron), als PWA und vieles mehr. Dadurch kann auch der UI-Layer über alle Plattformen hinweg genutzt werden. Auch, wenn Entwickler Look & Feel eines Interfaces sehr spezifisch an die jeweilige Plattform anpassen, entstehen daraus niemals mehrere Apps mit unterschiedlicher Code-Basis.

Wie steht es um die Performance?

„Nativ“ klingt zunächst immer nach der bestmöglichen Performance. Und insgesamt stimmt das auch in diesem Fall: Kommt es wirklich darauf an, haben Hybrid-Nativ-Ansätze wahrscheinlich eine leicht höhere Performance als Hybrid-Web-Lösungen. Ob das am Ende für den Nutzer wirklich eine Rolle spielt, ist jedoch eine andere Sache. Außerdem gilt: Auch nativer Code kann natürlich einfach schlecht geschrieben sein, wodurch die App unter mangelhafter Performance leiden wird.

Falls es wirklich auf jedes Quäntchen Performance ankommt, sind wahrscheinlich echte native Lösungen am Ende sowieso am besten geeignet, also Apps, die sich direkt der Toolsets von Android und iOS beispielsweise bedienen. Die nativen SDKs, bereitgestellt von den Plattformentwicklern, sind dann nach wie vor die beste Lösung – aber das dürfte nur auf einen kleinen Teil der erhältlichen Apps zutreffen.

Fazit: Was heißt das alles?

Einen klaren Gewinner gibt es, wie eingangs erwähnt, somit nicht. Sowohl Ionic als auch React Native sind grundsolide Frameworks, mit denen die App-Entwicklung am Ende schnell und effizient über die Bühne geht. Beide unterscheiden sich jedoch in Nuancen, die unter Umständen wichtig sind. Der Blick auf die Technik ist dabei weniger entscheidend – wichtiger ist die übergreifende Vision und die Zukunft der App.

Wenn Sie selbst nach dieser Erklärung noch immer nicht ganz sicher sind, welchem Framework Sie den Vorteil geben sollten, können Sie sich einfach mit uns in Verbindung setzen. Wir hören Ihnen gerne zu und lassen uns von Ihrem App-Projekt überzeugen – und dann beraten wir Sie auch gerne noch einmal in Bezug auf Ionic vs. React Native und welcher Variante Sie den Vorzug geben sollten.

Mehr Informationen zu Mobile App Entwicklung

Einheitliche Codebasis und plattformübergreifende Entwicklung, das gehört für Orlyapps einfach zusammen. Denn genau das macht Ihre App flexibel und pflegeleicht, egal für welches Endgerät. Oder gleich mehrere.