Cross-Plattform: JetBrains bringt Compose auf den Desktop und ins Web

JetBrains hat mit Compose Multiplattform eine Erweiterung des Android-UI-Toolkits Jetpack Compose angekündigt. Die nun als Alpha verfügbare Variante bietet einen plattformübergreifenden Ansatz zum Erstellen von Oberflächen für Desktop-, Web- und Android-Anwendungen. Die programmiersprachliche Grundlage bildet Kotlin Multiplatform.

Jetpack Compose trifft Kotlin Multiplatform

Google hat Jetpack Compose zwei Jahre nach der ersten Vorstellung Ende Juli in der stabilen Version 1.0 veröffentlicht. Das UI-Toolkit für Android verfolgt einen deklarativen Ansatz und setzt auf die Programmiersprache Kotlin sowie ein reaktives Programmiermodell. Sogenannte Composable Functions definieren die einzelnen Bedienelemente – oder Teile davon. Über @Composable dekorierte Funktionen lassen sich ineinander verschachteln, um letztlich die Oberfläche zu erzeugen. Der Code beschreibt das grundlegende Aussehen der Oberfläche, um die Umsetzung in der Baumstruktur des UI kümmert sich das Toolkit unter der Haube.

JetBrains hatte Kotlin ursprünglich als JVM-Sprache gestartet. Seit der Veröffentlichung von Version 1.2 bedient die Sprache Multiplattformprojekte, um zusätzlich unter Kotlin/JS Webanwendungen mit JavaScript zu erstellen. Im Jahr 2017 kam zudem mit Kotlin/Native eine Methode hinzu, um plattformspezifische Binaries zu erstellen. Motivation war, dass die JVM nicht auf allen Plattformen vorhanden ist. JetBrains hatte bei Kotlin/Native anfangs vor allem die iOS-Entwicklung im Blick. Kotlin Multiplatform vereint die drei Zielplattformen mit dem Ansatz eines gemeinsamen Codes für die allgemeine Geschäftslogik und plattformspezifischen Umsetzungen für die jeweiligen Ziele.

Neues für den Desktop

Mit der aktuellen Ankündigung erhalten die bisher als Preview verfügbaren Projekte Compose for Desktop und Compose for Web den Alpha-Status. Die APIs stehen wohl kurz vor der Stabilisierung, und das 1.0-Release von Compose Multiplatform soll laut JetBrains noch in diesem Jahr erscheinen. Während die Webvariante auf Kotlin/JS setzt, baut die Desktopumsetzung ebenso wie Jetpack Compose für Android auf die JVM-Variante von Kotlin. Eine Umsetzung mit Kotlin/Native, um beispielsweise iOS einzubeziehen, existiert derzeit noch nicht.

Compose for Desktop stabilisiert die in Milestone 4 des Projekts noch als experimentell gekennzeichneten @Composable-APIs zum Verwalten der Elemente Window, MenuBar und Tray. Sie ersetzen die bisherige Window-API. Auf GitHub existiert ein Tutorial für den Einstieg in die APIs.

Die Alpha führt zudem adaptive Fenstergrößen ein: Durch die Angabe von Dp.Unspecified für die Größenparameter passt sich das Fenster den Vorgaben der eingebetteten Komponenten an wie in folgendem Codebeispiel aus dem Kotlin-Blog:

fun main() = application {
  val state = rememberWindowState(width = Dp.Unspecified, 
                                  height = Dp.Unspecified) 
  Window(
    onCloseRequest = ::exitApplication,
    state = state,
    title = "Adaptive",
    resizable = false)
  {
    Column(Modifier.background(Color(0xFFEEEEEE))) {
      Row {
        Text("label 1", 
             Modifier.size(100.dp, 100.dp).
               padding(10.dp).background(Color.White))
        Text("label 2", 
             Modifier.size(150.dp, 200.dp).
               padding(5.dp).background(Color.White))
        Text("label 3", 
             Modifier.size(200.dp, 300.dp).
               padding(25.dp).background(Color.White))
      }
    }
  }
}

Compose berechnet die benötigte Anfangsgröße anhand der eingebauten Textkomponenten inklusive der jeweils definierten Padding-Werte. Außerdem erweitert Compose for Desktop die Gestaltungsmöglichkeiten für Menüs, die nun Icons, Shortcuts beziehungsweise Mnemonics und auswählbare Elemente nach dem Prinzip von Checkboxes und Radio Buttons enthalten können:

Darüber hinaus gibt es Anpassungen für den Mauszeiger, der beim Überfahren eines Textfelds zum Textcursor wird. Entwicklerinnen und Entwickler können zudem für Komponenten den Modifier pointerIcon definieren, um das Aussehen des Zeigers im Bereich der Komponente zu ändern. Als .mouseClickable definierte Komponenten können über den Callback MouseClickScope auf Mausklicks reagieren.

CSS und Animationen im Web

Compose for Web erweitert in der Alpha die API für Cascading Stylesheets (CSS). Sie ermöglicht unter anderem beliebige Berechnungen mit numerischen CSS-Werten und führt Methoden zum Setzen von Properties ein:

// Berechnungen mit CSS-Werten
val a = 5.px
val b = 20.px
borderBottom(a + b) // 25px

// Typsicherer Zugriff auf die Property
borderWidth(topLeft = 4.px, bottomRight = 10%)

// Verwenden einer frei definierten Property 
// als Schl�ssel-Werte-Paar
property("irgendeine-property", "ein-wert") 

Darüber hinaus bringt Compose for Web eine typsichere DSL (Domain-specific Language) für CSS-Animationen mit. Schließlich hat das Team das Event-Konzept umgestellt. Als Grundlage dient der neue Typ SyntheticEvent. Die jeweiligen Untertypen bringen passende Parameter mit, beispielsweise Koordinaten für SyntheticMouseEvent, Text für SyntheticInputEvent oder die gedrückte Taste bei einem SyntheticKeyEvent.

Aus dem Werkzeugkasten in den Werkzeugkasten

Wer mit Android Studio oder IntelliJ IDEA arbeitet, kann ein neu veröffentlichtes Plug-in für die Entwicklungsumgebungen verwenden, das eine Vorschau für Multiplattformprojekte ebenso über die Annotation @Preview bietet, wie sie im aktuellen Android Studio für Jetpack Compose bereits vorhanden ist.

Getreu dem Motto "Eat your own dogfood" hat JetBrains seine Toolbox App von Electron auf Compose for Desktop migriert. Offensichtlich benötigt die neue Implementierung deutlich weniger Speicher und bietet eine verbesserte Rendering-Performance. Die Größe des Installers ist laut JetBrains ungefähr um die Hälfte geschrumpft.

Weitere Details zu Compose Multiplatform finden sich im Kotlin-Blog. JetBrains stellt einige Tutorials für Compose for Desktop und Compse for Web sowie einige Anwendungsbeispiele auf GitHub bereit.

(rme)