Das UI-Framework Compose Multiplatform

Cross-Plattform App Entwicklung wird immer populärer, das zeigt unter anderem die Stackoverflow Developer Umfrage aus dem letzten Jahr . In der ist zu sehen, dass unter den Cross-Plattform App Frameworks React Native und Flutter am beliebtesten sind. Leider hat sich die Cross-Plattform App Entwicklung trotz der versprochenen Produktivitätsvorteile noch nicht durchgesetzt., das sieht man beispielsweise daran, dass man in Spotify auf dem iPhone Snake spielen kann, während man auf Android die Funktion vergeblich sucht. (Playlist auswählen -> Playlist-Menü -> Eat this Playlist auswählen) Ein Framework das versucht dies zu ändern ist Compose Multiplatform (CMP). Es wird für die jeweilige Plattform zu einer nativen App kompiliert, wodurch es sich von bestehenden Frameworks unterscheidet. Das Framework hat auf iOS den Beta-Status erreicht und ist bereits auf Android und Desktop stabil.

Um euch das Framework näherzubringen, werde ich zunächst auf die Historie eingehen. Anschließend möchte ich in diesem Blog-Post die Vor- und Nachteile von Compose Multiplatform und eine Übersicht der wichtigsten Funktionen aufzeigen.

Historie

Dass die Zukunft der App-Entwicklung nicht in XML Dateien liegt, hatte Google erst im Jahr 2019 erkannt, als sie das deklarative UI-Framework Jetpack Compose vorgestellt haben. Bereits zum Zeitpunkt der Vorstellung auf der Google I/O existierten die Frameworks React Native und Flutter. Kurz darauf wurde der Kotlin-Compiler so weiterentwickelt, dass Kotlin plattformübergreifend ausgeführt werden kann, und damit entstand Kotlin Multiplatform (KMP). KMP wurde im Jahr 2017 von JetBrains als Multiplatform Feature in der Kotlin Version 1.2 vorgestellt. Ziel war es, Entwicklern das Code-Sharing auf mehreren Plattformen zu ermöglichen und gleichzeitig eine native Developer/User Experience für diese zu bieten. KMP bietet die Flexibilität, das Benutzerinterface für iOS-Anwendungen in SwiftUI zu entwickeln, während die Business-Logik einmalig in Kotlin implementiert und plattformübergreifend wiederverwendet werden kann. Hierfür existieren zwei Arten von Kotlin-Compilern:

1. Der Kotlin/Java Virtual Machine (JVM)-Compiler unterstützt Systeme, auf denen die JVM ausgeführt werden kann und das Android- Betriebssystem. Zu den unterstützten Systemen gehören macOS, Linux, Windows und Android.

2. Der Kotlin/Native-Compiler ermöglicht die Kompilierung von Kotlin-Code zu nativen Binaries für Plattformen, auf denen die JVM nicht verfügbar oder nicht ausführbar ist, wie beispielsweise Embedded Systems oder auf den Apple-Betriebssystemen iOS, watchOS und tvOS.

JetBrains und Google ging dies jedoch nicht weit genug, da es bereits mit React Native und Flutter möglich war, eine UI für alle Plattformen zu schreiben. Die Idee, die UI auf allen Plattformen zu teilen inklusive einer nativer Ausführung, wurde mit dem Framework Compose Multiplatform (CMP) umgesetzt.

Wie wird ein KMP-/CMP-Projekt erstellt?

Ein CMP-Projekt kann nur über die Web-Anwendung Kotlin Multiplatform Wizard erstellt werden. Es kann auf zwei Wegen umgesetzt werden:

1. Der 'Shared UI'-Ansatz wird mithilfe von CMP umgesetzt. Dies ermöglicht ein einheitliches Benutzerinterface für Android und iOS.

2. Der 'Native UI'-Ansatz, bei dem das User Interface für jede Plattform separat entwickelt wird. Hierbei kommt KMP zum Einsatz.

Die Wahl zwischen diesen Ansätzen hängt von den spezifischen Anforderungen des Projektes, den verfügbaren Ressourcen und den Präferenzen des Entwicklerteams ab. Beide haben ihre Vor- und Nachteile, die sorgfältig abgewogen werden sollten. Die Option von Compose Multiplatform hat den Vorteil, dass wir nur eine Benutzeroberfläche für alle Plattformen schreiben müssen, was zu Feature-Parität und einer schnelleren Time-to-Market führt. Jedoch sollten auch die Nachteile erwähnt werden. Dazu zählt, dass die initiale Einrichtung der Entwicklungsumgebung aufwendiger sein kann. Zudem könnte es erforderlich sein, je nachdem welche Plattformen man unterstützen möchte, mehrere Programmiersprachen und deren Ökosysteme zu erlernen. So müsste man beispielsweise für plattformspezifische Anpassungen Kenntnisse in Java/Kotlin für Android oder Swift für iOS besitzen. Das klingt abschreckend, allerdings treffen diese Vor- und Nachteile auch auf die anderen Cross Plattform App Frameworks zu - gerade wenn es darum geht, plattformspezifische Funktionen zu verwenden. Da wir nur ein User Interface für beide Plattformen schreiben möchten, wählen wir in unserem Fall die erste Option 'Shared UI' aus.

Projektstruktur

Die Projektstruktur ist hierarchisch gegliedert, wobei für jede Plattform ein eigener Ordner existiert. Diese Struktur ermöglicht es, mit Kotlin-Code plattformspezifische APIs zu verwenden.

Im obigen Bild ist das standardmäßige Projekt Layout zu erkennen. Der Ordner composeApp enthält in dieser Konfiguration die Ordner androidMain, commonMain und iosMain - also alle unterstützten Plattformen für das Projekt.

In der commonMain wird der plattformübergreifende Kotlin-Code zentral verwaltet. Hier wird nicht nur das User Interface geschrieben, sondern auch die gemeinsame Logik implementiert, die auf allen konfigurierten Plattformen funktionieren soll. Von diesem gemeinsamen Code aus kann man dann plattformspezifische Implementierungen aufrufen, die in den jeweiligen Verzeichnissen definiert sind.

Die Ordner bieten die Möglichkeit, plattformspezifischen Code zu schreiben und stellen unter anderem die Entry-Points für das Starten der App dar. Ein Blick in die androidMain sollte für Android-Devs familiär aussehen.

Die Projekt-Struktur ist dieselbe wie bei einem Jetpack-Compose Projekt und man wird sich hier schnell zurechtfinden. Mit Ausnahme der Plattform-Datei können hier etwaige Android-spezifische Schnittstellen mit Java oder Kotlin aufgerufen werden.

Die iosMain sieht da schon etwas anders aus, die Plattform-Datei lässt sich auch hier wiederfinden und zusätzlich die MainViewController-Datei, die für iOS-Devices der Entry-Point ist.

Auch hier können in der Plattform-Datei spezifische Schnittstellen vom OS oder nativer Code geschrieben werden. Die App kann auf Android und dem iOS-Emulator über Android Studio ausgeführt werden. Wie im unteren Screenshot zu sehen, ist das User Interface einheitlich auf beiden Plattformen. Lediglich die Begrüßungsnachricht auf den Geräten unterscheidet sich, da damit aufgezeigt werden soll, dass plattformspezifischer Code aufgerufen werden kann.

Fazit

Die Cross-Plattform App-Entwicklung gewinnt zunehmend an Bedeutung, was sich unter anderem in oben genannter StackOverflow Developer Umfrage von 2023 widerspiegelt. Trotz der Beliebtheit von Frameworks wie React Native und Flutter hat sich die plattformübergreifende Entwicklung jedoch noch nicht vollständig durchgesetzt.

Genau hier kommen Cross-Plattform-App Frameworks wie Compose Multiplatform (CMP) ins Spiel. Die Vorteile von CMP, potenzielle Kosteneinsparungen und eine kürzere Time-to-Market, teilen sich alle Cross-Plattform-App Frameworks. Jedoch unterscheidet es sich von den anderen Frameworks durch die Anzahl unterstützter Plattformen und das Wiederverwenden von Code auf allen Plattformen - und genau das macht es gerade so attraktiv. Dennoch gibt es auch Herausforderungen zu bewältigen, wie die Notwendigkeit, die Programmiersprache für die jeweilige Plattform und das Ecosystem zu beherrschen und die damit einhergehende, anfänglich steile Lernkurve.

Während Frameworks wie React Native und Flutter bereits etabliert sind, könnte CMP aufgrund der nativen Ausführung auf den Zielplattformen in Zukunft an Bedeutung gewinnen. Insbesondere für Teams, die bereits Erfahrung mit Kotlin haben, könnte CMP mit dem Multiplatform-Feature umso attraktiver sein.

Es bleibt abzuwarten, wie sich KMP im Vergleich zu anderen Frameworks entwickeln und etablieren wird. Ein Blick auf die Kotlin Multiplatform Development Roadmap für das Jahr 2025, lässt schon die Entwickler-Herzen höher schlagen: So ist geplant, eine eigenständige IDE für Kotlin Multiplatform zu veröffentlichen sowie den Stable-Status für das Framework auf iOS zu verkünden. Faktoren wie die kontinuierliche Verbesserung der Performance, die Erweiterung des Ökosystems und die Unterstützung der Entwickler-Community werden dabei eine entscheidende Rolle spielen.

Für Entwickler und Unternehmen ist es ratsam, CMP im Auge zu behalten und zu evaluieren, ob es für ihre spezifischen Projektanforderungen geeignet ist. Mit der fortschreitenden Weiterentwicklung des Frameworks und der wachsenden Nachfrage nach effizienten Cross-Plattform-Lösungen könnte CMP in den kommenden Jahren noch attraktiver in der mobilen App-Entwicklung werden.