Multiplattform-Entwicklung für Android und Web? Kotlin macht‘s möglich!
Seite 3: Das Web Modul – Mit Kotlin Webseiten bauen
JetBrains legt den Fokus aktuell unter anderem auf Compose Multiplatform und den mobilen Bereich. Das wird besonders klar, wenn man sich abseits von Compose Multiplatform nach Möglichkeiten umschaut, Webseiten mit Kotlin zu bauen. Dabei gibt es mit Compose HTML eine interessante Alternative. Die Bibliothek überträgt den reaktiven und komponentenbasierten Compose-Ansatz auf die Webentwicklung. Compose HTML wird zwar im GitHub-Repository von Compose Multiplatform als Option angegeben, um für das Web zu entwickeln, doch die Beschreibung der Bibliothek ist recht gut versteckt.
Dennoch setzen auf Compose HTML verschiedene Projekte auf. So zum Beispiel KVision, fritz2, Doodle und Kobweb. Kobweb fährt dabei einen sehr interessanten Ansatz: Jetpack Compose für das Web, ohne die Einschränkungen, die Compose Multiplatform mit sich bringt.
Kobweb definiert seine eigene API, die der von Jetpack Compose aber teilweise sehr ähnlich ist. Das ist besonders vorteilhaft für die Zielplattformen Android und Web. Denn es erstellt zwei separate Frontends, wobei sich viele Teile des Codes aber wiederverwenden lassen oder nur geringfügiger Anpassungen bedürfen.
Die Abbildungen 4 und 5 zeigen, wie ähnlich die APIs aussehen können.
Die bekannten Layout-Elemente Row und Column lassen sich in Kobweb nahezu identisch wie in Jetpack Compose verwenden. Die Reihenfolge der Modifier ist im Gegensatz zu Jetpack Compose allerdings irrelevant. Das liegt daran, dass Kobweb aus den gesetzten Modifiern im Hintergrund HTML-Elemente erzeugt und diese mittels CSS entsprechend anpasst.
Ein weiterer Unterschied besteht darin, wie das Framework Texte, Buttons und andere Seitenelemente erzeugt. Dafür greift es direkt auf die entsprechenden Compose-HTML-Elemente zu. Daraus entstehen im Hintergrund HTML-Elemente – native Webentwicklung mit Kotlin. Aus dem gesamten Konstrukt generiert Kobweb den Quellcode der Webseite und hilft darüber hinaus bei der Navigation, ermöglicht Live Reloading und unterstützt Markdown.
Der entscheidende Vorteil gegenüber Compose Multiplatform betrifft das Arbeiten mit nativen Webtechnologien. Skripte lassen sich einbinden – wer möchte, kann mit Bootstrap designen. Die Sichtbarkeit der Seite wird dadurch nicht beeinträchtigt.
Eine Kobweb-App als Modul in ein Multiplatform-Projekt einzubinden, ist aktuell noch etwas umständlich. Folgt man den Hinweisen auf GitHub, verläuft die Implementierung aber meist reibungslos.
Der größte Nachteil von Kobweb liegt wohl darin, dass das Framework vergleichsweise jung und abhängig von einigen wenigen Entwicklerinnen und Entwicklern ist. Mit Kobweb erstellte Seiten tendieren außerdem dazu, recht groß zu werden. Bei umfangreichen Web-Apps kann das die Performance beeinträchtigen.
Im Android-Modul wie gewohnt entwickeln
Die Android-Entwicklung in einem KMP-Projekt unterscheidet sich nur marginal von der gewohnten Android-Entwicklung. In der build.gradle.kts des Android-Moduls findet sich die Definition, die vorgibt, dass der Code vom Common-Modul abhängig ist. Im Anschluss lassen sich die im Common-Modul definierten Klassen und Funktionen auch im Android-Modul verwenden. Der Rest ist dann gewöhnliche Android-Entwicklung mit Kotlin und daher im Rahmen dieses Artikels weniger interessant.
Gradual Adoption – Warum alles nochmal schreiben?
Ein großer Vorteil von KMP liegt in der Magie, die in dem Begriff Gradual Adoption steckt, auf Deutsch: schrittweise Einführung. Denn KMP ermöglicht es, die bestehende Codebasis Schritt für Schritt multiplattform-fähig zu machen.
Das funktioniert besonders gut, wenn als Grundlage eine Kotlin-Android-App existiert. Dann lassen sich nach und nach Teile des Codes aus dem Android-Modul extrahieren und ins Common-Modul verschieben. Natürlich ist dabei darauf zu achten, keine Android-spezifische Logik zu verwenden, oder diese, wenn nötig mithilfe der expect/actual-Funktionalität einzubinden. Das Großartige daran: Es braucht keinen Big-Bang-Ansatz. Dank der Interoperabilität von KMP lässt sich ein Bereich nach dem anderen multiplattform-fähig machen.
