Kotlin/JS — was es ist, Compiler zu JavaScript und Funktionen

Was ist Kotlin/JS?

Kotlin/JS ist eines der drei Compiler-Backends von Kotlin (neben JVM und Native), das zum Übersetzen von Kotlin-Code in JavaScript entwickelt wurde. Kotlin/JS wurde von JetBrains entwickelt und ermöglicht das Schreiben von Webanwendungen in einer Sprache mit strenger statischer Typisierung, wobei der Zugriff auf das riesige Ökosystem der JavaScript-Bibliotheken über externe Deklarationen erhalten bleibt. Seit der ersten stabilen Version in Kotlin 1.3 hat sich der Compiler von einem experimentellen Backend zu einem produktionsreifen Werkzeug entwickelt, das in industriellen Projekten eingesetzt wird.

Der Hauptzweck von Kotlin/JS ist die Frontend-Entwicklung mit Kotlin anstelle von JavaScript oder TypeScript. Entwickler erhalten alle Funktionen der Kotlin-Sprache: Null-Sicherheit, Erweiterungsfunktionen, Datenklassen, Coroutinen und versiegelte Klassen. Der generierte JavaScript-Code kann in jedem modernen Browser oder in einer Node.js-Umgebung ausgeführt werden. Kotlin/JS ist besonders wertvoll in Kotlin Multiplatform-Projekten, bei denen das gemeinsame Modul (commonMain) sowohl für mobile als auch für Webanwendungen verfügbar ist.

Das Kotlin/JS-Ökosystem umfasst Frameworks zur Erstellung von Benutzeroberflächen. Compose Multiplatform für das Web verwendet Kotlin/JS als Ziel-Backend und ermöglicht deklarative UI-Komponenten, die im Browser ausgeführt werden. Alternative Lösungen umfassen Wrapper für React — Kotlin Wrappers, die eine typsichere API für React, React Router und Redux bereitstellen.

Wie der Kotlin/JS-Compiler funktioniert

Die Kompilierung in Kotlin/JS durchläuft mehrere Transformationsstufen. Der Kotlin-Quellcode wird zunächst in eine Zwischendarstellung (IR) kompiliert, dann optimiert und schließlich wird JavaScript-Code generiert. Seit Kotlin 1.8 wurde das alte Backend (JsBackend basierend auf AST) vollständig durch das IR-Backend ersetzt, das eine bessere Optimierung, kleinere Ausgabecodegröße und TypeScript-Kompatibilität bietet.

Früher verwendete Kotlin/JS JsBackend, das direkt mit dem AST (Abstrakter Syntaxbaum) arbeitete. Dieser Ansatz hatte Einschränkungen: Schwierigkeiten bei der Unterstützung von Plattformoptimierungen, Fehlen eines einheitlichen IR für alle Backends und Unfähigkeit, TypeScript-Deklarationen zu generieren. Der Übergang zum IR-Backend löste diese Probleme, vereinheitlichte die Kompilierung über alle drei Kotlin-Backends hinweg und eröffnete den Weg für Backend-übergreifende Optimierungen.

Kotlin/JS-Kompilierungsmodi

Kotlin/JS unterstützt zwei Build-Modi, die das Format und die Optimierung des Ausgabecodes bestimmen. Der Produktionsmodus verwendet Webpack zum Bündeln, Minifizieren und Tree-Shaking. Der Entwicklungsmodus unterstützt Hot Module Replacement für schnelle Entwicklungsiterationen. Die Modusauswahl wird in build.gradle.kts über die Konfiguration js.target konfiguriert.

kotlin {
    js {
        browser {
            webpackTask {
                outputFileName = "app.js"
            }
        }
        binaries.executable()
    }
}

Integration mit NPM und JavaScript-Bibliotheken

Die Integration von Kotlin/JS mit dem NPM-Ökosystem wird über ein spezielles DSL in build.gradle.kts implementiert. Der Entwickler deklariert npm-Abhängigkeiten in der Kotlin-Konfiguration und gibt Paketnamen und Version an. Kotlin/JS holt Pakete automatisch über den npm- oder yarn-Paketmanager ab. Um einen typsicheren Zugriff auf JavaScript-Bibliotheken zu gewährleisten, werden externe Deklarationen verwendet, die die Typen und Funktionen der Bibliothek für den Kotlin-Compiler beschreiben.

Externe Deklarationen sind Kotlin-Deklarationen, die mit dem Schlüsselwort external markiert sind. Sie teilen dem Compiler mit, dass die Implementierung der Funktion oder Klasse in JavaScript-Code und nicht in Kotlin liegt. JetBrains bietet vorgefertigte Wrapper-Sets für beliebte Bibliotheken im Rahmen von Kotlin Wrappers an, darunter React, React Router, Redux, Emotion und MUI. Für Bibliotheken ohne vorgefertigte Wrapper kann der Entwickler externe Deklarationen manuell schreiben oder den Dukat TypeScript-Bindungsgenerator verwenden.

kotlin {
    js {
        browser { }
        npm {
            dependency("react", "18.3.1")
            dependency("react-dom", "18.3.1")
            devDependency("webpack", "5.92.0")
        }
    }
}

// Externe Deklaration für JavaScript-Bibliothek
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Arbeiten mit TypeScript-Kompatibilität

TypeScript ist ein integraler Bestandteil des modernen Webs, und Kotlin/JS gewährleistet die Kompatibilität mit TypeScript durch die Generierung von .d.ts-Dateien. Wenn js.generateTsDeclarations = true gesetzt ist, erstellt der Compiler TypeScript-Deklarationen für alle öffentlichen Kotlin-Funktionen und -Klassen. Dadurch können TypeScript-Projekte Kotlin-Module mit vollständiger Typunterstützung importieren. Die Generierung von TypeScript-Deklarationen funktioniert nur mit dem IR-Backend und ist einer der Hauptgründe für die Migration vom alten Backend.

Kotlin/JS IR-Backend und Vorteile

Das IR-Backend (Intermediate Representation) ist ein einheitliches Backend für alle drei Kotlin-Plattformen: JVM, JS und Native. Es verwendet eine gemeinsame Zwischendarstellung, die vor der Generierung des Zielcodes mehrere Optimierungsstufen durchläuft. Für Kotlin/JS wurde das IR-Backend ab Kotlin 1.8.0 obligatorisch und ersetzte das alte AST-basierte Backend, das als veraltet markiert wurde.

Die Vorteile des IR-Backends für Kotlin/JS umfassen verbesserte Code-Optimierung auf IR-Ebene, Reduzierung der Bündelgröße durch Dead-Code-Eliminierung und Inline-Optimierungen sowie Unterstützung für TypeScript-Deklarationen. Das IR-Backend gewährleistet auch die korrekte Behandlung von Inline-Funktionen, reified Generics und Suspend-Funktionen bei der Übersetzung nach JavaScript, was im alten Backend problematisch war.

Codebeispiele: Einrichtung und Entwicklung

Ein vollständiges Kotlin/JS-Projekt beginnt mit der Konfiguration von build.gradle.kts. Das Kotlin-Multiplatform-Plugin ermöglicht die Einrichtung von Kotlin/JS als eine der Zielplattformen. Betrachten wir ein Beispiel für die Einrichtung einer Webanwendung mit React.

plugins {
    kotlin("multiplatform") version "2.0.21"
    id("org.jetbrains.kotlin-wrappers") version "1.0.0-pre.775"
}

kotlin {
    js {
        browser { }
        binaries.executable()
        generateTsDeclarations = true
    }
}

dependencies {
    implementation(enwraps(react, reactDom))
}

Nach der Konfiguration können React-Komponenten in Kotlin geschrieben werden. Kotlin Wrappers bieten eine typsichere API für React, einschließlich funktionaler Komponenten, Hooks und JSX-ähnlicher Syntax durch DSL-Builder. Das Counter-Komponentenbeispiel demonstriert die Arbeit mit useState und Ereignisbehandlern.

@OptIn(ExperimentalWrapperApi::class)
val Counter = FC<Props> {
    var count = useState(0)

    div {
        +"Counter value: ${count.component1()}"
        button {
            onClick = { count.component2()(count.component1() + 1) }
            +"Increment"
        }
    }
}

fun main() {
    createRoot(document.getElementById("root")!!).render(
        createElement(Counter)
    )
}

Build und Bereitstellung

Der Build eines Kotlin/JS-Projekts erfolgt über Gradle-Aufgaben. jsDevelopmentRun startet den Webpack-Entwicklungsserver mit HMR für die Entwicklung. jsProductionExecutableCompileSync generiert ein Produktions-Bundle mit Minifizierung und Tree-Shaking. Die endgültige HTML-Datei, die das kompilierte JavaScript enthält, wird vom Webpack-Plugin generiert und in build/dist abgelegt.

// Entwicklungsserver mit HMR starten
./gradlew jsDevelopmentRun

// Produktions-Build mit Minifizierung
./gradlew jsProductionExecutableCompileSync

// Ausgabe in build/dist/productionExecutable/

Kotlin/JS vs TypeScript: Vergleich

TypeScript ist der Hauptkonkurrent von Kotlin/JS im Bereich typisiertes JavaScript. Beide Sprachen werden nach JavaScript kompiliert und fügen statische Typisierung über dynamisches JS hinzu. Kotlin/JS bietet jedoch mehrere Vorteile: standardmäßige Null-Sicherheit, versiegelte Klassen, Coroutinen und nahtlose Integration mit Kotlin Multiplatform. TypeScript hingegen hat eine größere Community, mehr fertige Bibliotheken mit Typen und ein ausgereifteres Ökosystem.

Die Entwicklungsproduktivität mit Kotlin/JS kann für Teams höher sein, die Kotlin bereits in anderen Teilen des Projekts verwenden, da kein Sprachwechsel erforderlich ist. TypeScript bleibt die beliebtere Wahl für reine Webprojekte, bei denen Kotlin Multiplatform nicht verwendet wird. Mit der wachsenden Beliebtheit von Compose Multiplatform für das Web gewinnt Kotlin/JS jedoch als Alternative zu React und Angular an Boden.

Die Wahl zwischen Kotlin/JS und TypeScript hängt vom Projektkontext ab. Wenn das Team bereits Kotlin Multiplatform verwendet oder damit beginnen möchte, ist Kotlin/JS eine logische Wahl für den Frontend-Teil. Für ein isoliertes Webprojekt bleibt TypeScript aufgrund der Verfügbarkeit fertiger Typen für JavaScript-Bibliotheken und der größeren Anzahl von Entwicklern auf dem Markt die pragmatischere Lösung.