Compose Multiplatform (CMP) in Fleet

Jetpack Compose hat sich als leistungsstarke und intuitive Methode zur Erstellung von Benutzeroberflächen in der Android-Entwicklung etabliert. Mit dem UI-Framework Compose Multiplatform (CMP) können Entwickler:innen diese Vorteile nun auch auf andere Plattformen wie iOS und Desktop ausweiten. Dieser Blogbeitrag zeigt, wie CMP und Fleet zur Entwicklung einer plattformübergreifenden Anwendung – in diesem Fall eines digitalen Einkaufswagens – eingesetzt werden können. 

Compose Multiplatform (CMP) ist eine Erweiterung von Jetpack Compose. Damit können Developer Benutzeroberflächen für mehrere Plattformen ganz einfach mit einer einzigen Codebasis zu erstellen. CMP basiert auf Kotlin Multiplatform (KMP), einer Technologie, die es ermöglicht, den Großteil des Codes plattformübergreifend zu verwenden. Das bietet eine konsistente und leistungsfähige Benutzererfahrung. CMP beschränkt sich jedoch auf die Geschäftslogik. Mit CMP kann nun auch die Benutzeroberfläche plattformübergreifend erstellt werden. Dabei sind plattformspezifische Anpassungen weiterhin möglich, so dass jede Version die spezifischen Vorteile der Zielplattform nutzen kann. 

Fleet ist eine neue Integrierte Entwicklungsumgebung (IDE) von JetBrains, die speziell für die Kotlin- und Multiplattform-Entwicklung entwickelt wurde. Sie unterstützt nicht nur Kotlin, sondern bietet auch eine hochmoderne Entwicklungsumgebung, die speziell für die Arbeit mit Compose Multiplatform entwickelt wurde. Die IDE ist so konzipiert, dass sie schnelle Projektkonfigurationen ermöglicht und sich nahtlos in die Entwicklungsprozesse für CMP integriert. Entwickler:innen, die mit Fleet arbeiten, profitieren von flexiblen Testwerkzeugen, Optimierungen für plattformübergreifende Codeanpassungen und einer benutzerfreundlichen Oberfläche. Das vereinfacht den Entwicklungsprozess enorm. 

CMP ermöglicht es, den Code für die Benutzeroberfläche und die Geschäftslogik der verschiedenen Plattformen zu synchronisieren, was in der plattformübergreifenden Entwicklung oft eine der größten Herausforderungen darstellt. Insbesondere bei Anwendungen wie einem digitalen Einkaufswagen ist es wichtig, dass Benutzerinteraktionen und Datenverarbeitung nahtlos ineinandergreifen. So wird ein reibungsloses Erlebnis auf allen Geräten ermöglicht. 

Fleet erleichtert diesen Prozess erheblich, da es Entwickler:innen die Gelegenheit bietet, die plattformübergreifende Logik in einer zentralen, geteilten Codebasis zu verwalten. Sie muss nur dort angepasst werden, wo plattformspezifische Anforderungen bestehen. Dies spart nicht nur Entwicklungszeit, sondern minimiert auch Fehlerquellen, die aus inkonsistenten Implementierungen auf verschiedenen Plattformen resultieren könnten. 

Ein Beispiel dafür wäre die Darstellung und Berechnung von Preisänderungen, wenn Benutzer:innen neue Produkte zum Einkaufswagen hinzufügen. Dank CMP und Fleet können diese Änderungen zentral verwaltet und für jede Plattform automatisch synchronisiert werden. 

Ein zentrales Element jeder Anwendung ist die Verwaltung des UI-Zustands – das gilt auch für einen digitalen Einkaufswagen, bei dem die Anzeige von Produktmengen, der Gesamtpreis und alle Benutzeraktionen dynamisch und reaktiv bleiben müssen. CMP nutzt einen „Compose State Management“-Ansatz, um Zustände effizient zu handhaben, unabhängig von der Plattform. Änderungen an einem bestimmten Zustand, wie z. B. das Hinzufügen eines Produkts oder die Anpassung der Menge, werden so sofort und konsistent in der Benutzeroberfläche aller Plattformen dargestellt. 

Fleet bietet dazu unterstützende Debugging- und Testtools, die speziell auf die Anforderungen von Multiplattform-Anwendungen zugeschnitten sind. Developer können hier ihre UI-Zustände überwachen, testen und Fehlerbehebungen in Echtzeit durchführen, was die Entwicklung und Wartung plattformübergreifender Anwendungen erheblich vereinfacht und den Entwicklungsprozess beschleunigt. 

Während der Entwicklung mit CMP gibt es verschiedene Hürden, besonders wenn es um die Kompatibilität zwischen den eingesetzten Versionen von bspw. XCode, Kotlin und Android Studio geht. Gerade bei neuen Versionen und Updates ist es wichtig, die Kompatibilität sorgfältig zu prüfen und sicherzustellen, dass alle Werkzeuge reibungslos zusammenarbeiten. Hier ist Geduld gefragt, da es vorkommen kann, dass bestimmte Funktionen oder API-Änderungen zusätzliche Anpassungen erfordern. 

Fleet bietet Entwickler:innen wertvolle Unterstützung durch eine Vielzahl von Werkzeugen zur Kompatibilitätsprüfung. Dies hilft, unvorhergesehene Konflikte frühzeitig zu erkennen und den Entwicklungsprozess so reibungslos wie möglich zu gestalten. Dennoch bleibt zu erwähnen, dass das initiale Projektsetup erfahrungsgemäß eine schwierige Aufgabe darstellt. Nachdem alle Kompatibilitätsprobleme aufgelöst sind, steht der Entwicklung nichts mehr im Weg. 

Ein weiterer Vorteil von CMP und Fleet ist die starke Unterstützung durch die Entwickler-Community und die regelmäßigen Updates von JetBrains und Google. Die Community spielt eine große Rolle, indem sie häufig auftretende Probleme dokumentiert, Best Practices teilt und Open Source-Lösungen bereitstellt, die die Arbeit mit CMP erleichtern. JetBrains und Google arbeiten kontinuierlich daran, CMP und Fleet zu verbessern. Es ist zu erwarten, dass diese Tools in den kommenden Jahren noch flexibler und leistungsstärker werden. 

Regelmäßige Updates und Erweiterungen, wie die geplante Unterstützung für zusätzliche Plattformen, lassen erwarten, dass CMP künftig auch noch breitere Anwendungsfälle abdecken wird. Für Entwickler:innen ist dies ein großer Vorteil, da sich die Investition in das Multiplattform Development durch den langfristigen Support und die kontinuierliche Erweiterung der Fähigkeiten der Werkzeuge auszahlt. Allerdings muss auch erwähnt werden, dass die Community hinter CMP noch nicht so stark ist, wie bei der nativen Android- und iOS-Entwicklung oder auch bei Flutter.

Der Fokus des Beitrags lag auf CMP in Bezug auf einen digitalen Einkaufswagen in einer Shopping App. Da ein digitaler Einkaufswagen eine Art „Key-Feature“ im Retail-Bereich ist, wurde dieser Anwendungsfall entsprechend ausgesucht. Zudem zielt dieser auf die bereits geschriebenen Blogbeiträge ab: 

Die beiden Beiträge stellen denselben digitalen Einkaufswagen dar, der sowohl mit Jetpack Compose nativ für Android als auch mit Flutter (einer weiteren Cross-Plattform-Lösung) entwickelt wurde. Nun wurde dieser digitale Einkaufswagen ebenfalls auf Grundlage von Compose Multiplatform in der IDE Fleet umgesetzt. 

Um den Beitrag schlank zu halten, wurde auf Codesnippets verzichtet. Das komplette Projekt ist hier verfügbar.  

Hinweis: Bei diesem Projekt handelt es sich lediglich um einen „Proof of Concept“, der keinerlei Architekturmuster oder weitere gängige Best Practice-Ansätze berücksichtigt.

Compose Multiplatform (CMP): 

• Unterstützte Plattformen: Android, iOS (Beta), Desktop (Windows, macOS, Linux) 
• Web-Unterstützung: Noch in der Entwicklung (Alpha). 
• Vorteile: Nahtlose Integration von Compose UI-Komponenten. 
• Nachteile: Weniger umfassende plattformübergreifende Unterstützung als Flutter, insbesondere im Web-Bereich. 

Flutter: 

• Unterstützte Plattformen: Android, iOS, Web, Desktop (Windows, macOS, Linux) 
• Vorteile: Breite und ausgereifte plattformübergreifende Unterstützung. 
• Nachteile: Integration in bestehende Projekte kann komplexer sein, insbesondere wenn sie nicht von Grund auf mit Flutter entwickelt wurden. 

Compose Multiplatform (CMP): 

• Vorteile: Native Performance auf Android und iOS durch direkte Nutzung von Jetpack Compose. 
• Nachteile: Performance kann plattformübergreifend variieren, insbesondere auf Plattformen, die weniger ausgereift sind. Zusätzliche Optimierungen können erforderlich sein, um auf allen Plattformen eine akzeptable Performance zu gewährleisten. 

Flutter: 

• Vorteile: Sehr gute Performance dank nativer Kompilierung zu maschinenspezifischem Code, besonders auf mobilen Geräten. Flutter verwendet die Skia-Grafikbibliothek, die schnelle und konsistente Rendering-Leistungen bietet. 
• Nachteile: Höherer Speicherverbrauch und größere App-Größen im Vergleich zu nativen Anwendungen. 

Compose Multiplatform (CMP): 

• Vorteile: Gemeinsame Codebasis für UI und Geschäftslogik. Nahtlose Integration von allgemeinen UI-Komponenten aus bestehenden Android-Projekte ermöglicht schrittweise Migration. 
• Nachteile: Kleinere Community (hinsichtlich CMP, Android und Kotlin stellen eine größere Community als Flutter dar) und weniger Drittanbieter-Bibliotheken im Vergleich zu Flutter. Plattformübergreifende Unterstützung ist noch nicht so ausgereift. 

Flutter: 

• Vorteile: Einheitliche Codebasis für alle Plattformen, was die Wartung und Wiederverwendbarkeit vereinfacht. Schnelle Entwicklungszyklen dank Hot Reload. 
• Nachteile: Integration in bestehende native Projekte kann komplex sein und erfordert möglicherweise umfangreiche Anpassungen. 

Compose Multiplatform (CMP): 

• Vorteile: Kotlin und Jetpack Compose bieten eine prägnante Syntax, die den Umfang des Codes reduzieren kann. Die Nutzung bestehender Bibliotheken und Tools kann den Code ebenfalls reduzieren. 
• Nachteile: Bei der Entwicklung für mehrere Plattformen können zusätzliche plattformspezifische Anpassungen erforderlich sein, die den Codeumfang erhöhen. 

Flutter: 

• Vorteile: Dart ist darauf ausgelegt, sauberen und prägnanten Code zu schreiben. Das einheitliche Framework und die reichhaltige Widget-Bibliothek von Flutter können den Codeumfang verringern. 
• Nachteile: Bei komplexen Projekten kann der Codeumfang aufgrund von Plattformunterschieden und der Notwendigkeit, eigene Widgets zu erstellen, zunehmen. 

Compose Multiplatform (CMP): 

• Vorteile: Entwickler, die bereits mit Kotlin und Jetpack Compose vertraut sind, können ihre Kenntnisse direkt nutzen. Starke Integration in das Android-Ökosystem erleichtert die Entwicklung. 
• Nachteile: Höhere Lernkurve für Entwickler, die nicht mit Kotlin oder Jetpack Compose vertraut sind. 

Flutter: 

• Vorteile: Einheitliche Codebasis für alle Plattformen, schnelle Entwicklungszyklen dank Hot Reload, umfangreiche Dokumentation und Community-Support. 
• Nachteile: Neue Sprache (Dart) und Programmierparadigma für Entwickler, die mit anderen Sprachen vertraut sind.  

Der Vergleich zwischen Compose Multiplatform (CMP) und Flutter zeigt, dass beide Technologien in der App-Entwicklung ihre eigenen Stärken und Schwächen haben. CMP bietet erhebliche Vorteile für Entwickler:innen, die bereits in der Kotlin- und Jetpack Compose-Umgebung arbeiten, insbesondere durch die nahtlose Integration bestehender allgemeiner UI-Komponenten. Jedoch hat CMP noch einige Nachteile, wie die geringere Produktreife und die weniger umfassende plattformübergreifende Unterstützung. 

Flutter bietet eine umfassende plattformübergreifende Unterstützung, eine große und aktive Community sowie eine ausgezeichnete Performance auf allen unterstützten Plattformen. Allerdings müssen sich Entwickler:innen mit Dart vertraut machen und können bei der Integration in bestehende native Projekte auf Herausforderungen stoßen. 

Die Wahl zwischen CMP und Flutter hängt letztlich von den spezifischen Anforderungen des Projekts, den vorhandenen Kenntnissen des Entwicklerteams und den bevorzugten Entwicklungsansätzen ab. Entwickler:innen sollten sorgfältig abwägen, welche Technologie besser zu ihren Bedürfnissen passt, indem sie die Vor- und Nachteile beider Ansätze berücksichtigen. 

Mit Jetpack Compose und Compose Multiplatform können leistungsstarke und attraktive Benutzeroberflächen für mehrere Plattformen aus einer einzigen Codebasis heraus erstellt werden. Die Kombination mit Fleet optimiert diesen Prozess weiter, da die Entwicklungsumgebung speziell auf die Anforderungen von CMP ausgelegt ist. Trotz einiger Herausforderungen bei der Versionskompatibilität und Konfiguration bietet CMP zusammen mit Fleet eine umfassende und effiziente Lösung für die plattformübergreifende Entwicklung. 

CMP und Fleet eröffnen einen vielversprechenden Ansatz zur Schaffung plattformübergreifender Anwendungen, die eine konsistente Benutzererfahrung auf dem Bildschirm bieten und dennoch flexibel auf die Anforderungen einzelner Zielplattformen reagieren können. 

https://github.com/JetBrains/compose-multiplatform 

https://developer.android.com/compose 

https://developer.android.com/develop/ui/compose/documentation 

https://www.jetbrains.com/compose-multiplatform/ 

https://docs.flutter.dev/ 

https://api.flutter.dev/