Ionic vs. Flutter im direkten Vergleich

Ionic vs. Flutter im direkten Vergleich

Ionic vs. Flutter im direkten Vergleich

Flutter erblickte erstmals 2017 das Licht der Welt, Ionic schaffte seinen ersten Release bereits im Jahr 2013 – und trotz des noch jungen Alters ist Flutter bereits zur großen Konkurrenz von Ionic herangewachsen. Ob es diesen Wettbewerb jedoch überhaupt gibt oder ob sich beide Frameworks nicht vielleicht eher unterstützen, schauen wir uns in unserem Vergleich genauer an.

Eine Mission, zwei Ansätze

Im Kern gleicht sich die Vision der Entwickler sowohl von Ionic als auch Flutter: Das Ziel ist es, ein UI-Framework bereitzustellen, das einfach überall funktioniert, dabei exzellente Performance garantiert und am besten in den Händen des Endanwenders auch noch ansprechend aussieht. Das ist ein Unterschied zu beispielsweise React Native, das sich den mobilen Markt ausgesucht hat und dort auch einen guten Job erledigt. Flutter und Ionic nehmen sich jedoch nicht nur Mobilgeräte vor, *sondern auch den Desktop und das Web *– und das alles innerhalb einer einzigen Codebasis.

Der Unterschied liegt also nicht in der Vision der beiden Frameworks begraben, sondern in der Art und Weise, wie sie ihr Ziel erreichen und welche Erfolge sie dabei erzielen.

Die unterschiedlichen Philosophien im Vergleich

Schauen wir uns zuerst Ionic an: Dort hat man es sich zum Ziel gesetzt, vor allem die Plattform selbst – in diesem Fall also das Web – zu nutzen und ihre Möglichkeiten möglichst vollständig auszureizen. Deshalb setzen Entwickler, die sich für Ionic entscheiden, auch nicht wirklich auf Ionic,** sondern vielmehr auf etablierte Web-Standards**. Die sind teilweise schon seit Jahrzehnten im Geschäft und damit praktisch unantastbar: Das Framework und die Tools basieren auf bekannten, quelloffenen Web-Standards, was bei den verwenden Sprachen (wie HTML, CSS oder JavaScript) losgeht und bei den UI-Komponenten der App aufhört (denn auch die setzen auf etablierte Standards).

Flutter kommt praktisch aus der entgegengesetzten Richtung: Es handelt sich eher um ein neues, komplett geschlossenes Ökosystem, das aus dem Nichts geschaffen wurde. Dart ist eine Sprache, die keinen Standards folgt, außerdem wurde eine eigene Rendering-Engine für die UI-Elemente geschrieben.* Flutter setzt somit komplett auf eigene Standards* und die Vorteile moderner Browser – wie die erwähnten Web-Sprachen oder auch JavaScript-Bibliotheken – werden von Flutter bewusst gar nicht eingesetzt. Das heißt nicht, dass Flutter zwingend schlechter ist. Vielmehr ist es einfach „anders“ und versucht, das Problem, das auch Ionic lösen möchte, aus einem anderen Ansatz zu betrachten.

Wie funktioniert Flutter?

Einen genaueren Blick werfen wir zuerst auf Flutter: Kern des Frameworks ist, wie bereits erwähnt, Dart. Die Sprache existiert schon seit 2011 und insgesamt gibt es nur sehr wenige Entwickler (einer Umfrage von StackOverflow zufolge sind es nur 2 %), die Dart beherrschen. Abseits von Flutter spielt die Sprache außerdem kaum eine Rolle.

Wenn Entwickler eine mobile App entwickeln, benutzt Flutter den Compiler von Dart, um den Code in für das Smartphone nativen Maschinencode umzuwandeln. Zusätzlich gibt es dann noch die eigene Rendering-Engine, die sich um die Darstellung der UI-Elemente in der mobilen App kümmert. Vorhandene, native UI-Elemente, bleiben außen vor, auch Web-Komponenten kennt Flutter nicht. Stattdessen bringt das Framework eine eigene Bibliothek aus UI-Widgets mit.

Um diverse Funktionen des besagten Geräts nutzen zu können, greift Flutter (ebenso wie Ionic) auf eine kleine Plug-in-Bibliothek zurück. Dafür existieren auch vorgefertigte Pakete, um auf typische Gerätefunktionen zuzugreifen. Bei Bedarf können Entwickler auch eigenen, plattformspezifischen Code schreiben, falls es für den gewünschten Einsatzzweck (noch) kein Plug-in gibt. Dafür stellt Flutter eine Plattform bereit, welche die Kommunikation zwischen Client (das UI) und Host (das OS) regelt.

Um eine Flutter-App im Web verfügbar zu machen, muss man sich ein wenig anstrengen: Flutter benutzt den Dart-Compiler, um JavaScript zu generieren, das dann im Browser sichtbar ist. Grafik- und Text-Rendering wird dann durch die eigene Rendering-Engine ersetze und typische Browserfähigkeiten wie Copy & Paste oder Textauswahl werden von Grund auf neu aufgebaut. Insgesamt ähnelt dieser Prozess ein wenig dem Umgang mit Adobe Flash. Desktop-Support gibt es übrigens noch nicht (bzw. nur in Form eines Previews).

Wir können also festhalten: Das Flutter-Team erreicht sein Ziel eines portablen UI, das überall funktioniert, indem sehr viele eigene Standards verwendet werden. Insgesamt reflektiert die Arbeitsweise von Flutter die Philosophie der Entwickler: Wir gehen den Weg allein und nutzen eine Standalone-Architektur und Web-Standards sind uns egal. Das muss nicht zwingend schlecht sein.

So funktioniert Ionic

Im Vergleich dazu werfen wir noch einmal einen kurzen Blick auf Ionic: Das Framework setzt ausschließlich auf HTML, CSS und JavaScript. Entwickler werden keinen einzigen Schnipsel Code aus anderen Sprachen darin finden. Wer also eine typische Web-App basteln kann, wird auch mit Ionic keine Probleme bekommen.

Die geteilte Codebasis erlaubt die Auslieferung von Apps sowohl für iOS und Android als auch für Desktop und Web (in der jeweils für die Maschine nativen Variante). In der mobilen Variante verwendet Ionic einen nativen Container wie Cordova (in letzter Zeit auch Capacitor), um auf die Funktionen des jeweiligen Geräts vollständig zuzugreifen. Das gesamte UI läuft hingegen in WebView, was sich laienhaft als ein Browser beschreiben lässt, der um sein eigenes UI erleichtert wurde. Handelt es sich um eine Desktop-App, greift Ionic auf einen Container wie Electron zu oder die App läuft direkt im Browser als Progressive Web App.

Die UI-Komponenten in der Ionic-App nutzen nur Web-Standards, also arbeiten sie auch in jedem Browser und sind mit anderen Frameworks wie React, Vue oder Angular kompatibel, die auf JavaScript basieren. Insgesamt liefert Ionic etwa 100 UI-Komponenten aus, die sich durch CSS auch in ihrem Design anpassen lassen. Die Implementierung eigener Web-Komponenten ist ebenfalls möglich, dann allerdings über den Compiler Stencil. Insgesamt ist Ionic also die flexiblere und auch offenere Sprache im direkten Vergleich mit Flutter.

Aber welches Framework nehme ich?

Keine einfache Frage! Um sie zu beantworten, haben wir die beiden Frameworks in fünf typischen Kategorien miteinander verglichen:

Zukunftssicherheit

Ionic setzt auf etablierte Web-Standards, während die Zukunft von Flutter dem Wohlwollen von Google ausgeliefert ist. Insgesamt ist hier Ionic der klare Sieger.

Skills

Flutter benötigt Kenntnisse in Dart, Ionic hingegen setzt auf typische Web-Sprachen. Das ist einfacher, wenngleich ein guter Dart-Entwickler natürlich auch exzellente Ergebnisse produzieren kann.

Look & Feel

Für den Endnutzer sehen die Apps beider Frameworks am Ende so aus, als würden sie nativ auf der Maschine laufen – ein glasklarer Gleichstand beider Kontrahenten.

Code-Flexibilität

Flutter und Ionic stellen beide Apps für Mobile, Desktop und Web bereit – doch da diese Features bei Flutter teilweise noch in der Preview-Phase sind, geht der Punkt an Ionic.

Performance

Insgesamt liefert Flutter vor allem bei der Verwendung großer Animationen mehr Performance, aber dies geht zu Kosten der Dateigröße, die deutlich über dem Bedarf von Ionic liegt.

Insgesamt liefert Ionic, wenn wir uns alle Punkte noch einmal anschauen und überlegen, inwieweit sich diese Elemente auf Szenarien in der echten Welt übertragen, wahrscheinlich das etwas rundere Gesamtpaket ab. Das muss nicht heißen, dass Flutter zwangsläufig niemals zum Einsatz kommen sollte – wie so oft entscheidet auch hier der Einsatzzweck über das Framework, das am besten dazu passt.

App gefällig? Wir helfen!

Welches Framework Sie sich für Ihre App genau wünschen, spielt übrigens gar keine so große Rolle – denn bei Orlyapps garantieren wir in jedem Fall ein erstklassiges Ergebnis. Wenn Sie eine neue App für Mobile, Desktop oder das Web brauchen, sind wir in jedem Fall Ihr Ansprechpartner. Wir freuen uns auf Sie!

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.