Kotlin/JS — wat is het, compiler naar JavaScript en kenmerken

Wat is Kotlin/JS?

Kotlin/JS — is een van de drie backends van de Kotlin-compiler (naast JVM en Native), bedoeld voor het vertalen van Kotlin-code naar JavaScript. Ontwikkeld door JetBrains, stelt Kotlin/JS in staat om webapplicaties te schrijven in een taal met strikte statische typering, met behoud van toegang tot het enorme ecosysteem van JavaScript-bibliotheken via het mechanisme van externe declaraties. Sinds de eerste stabiele release in Kotlin 1.3 is de compiler geëvolueerd van een experimentele backend naar een productieklaar hulpmiddel dat wordt gebruikt in industriële projecten.

Het hoofddoel van Kotlin/JS — frontend-ontwikkeling met Kotlin in plaats van JavaScript of TypeScript. Ontwikkelaars krijgen alle mogelijkheden van de Kotlin-taal: null safety, extensiefuncties, dataklassen, coroutines en sealed klassen. De gegenereerde JavaScript-code kan in elke moderne browser of in de Node.js-omgeving worden uitgevoerd. Kotlin/JS is vooral gewild in Kotlin Multiplatform-projecten, waar de gemeenschappelijke module (commonMain) beschikbaar is voor zowel mobiele als webapplicaties.

Het Kotlin/JS-ecosysteem omvat frameworks voor het maken van gebruikersinterfaces. Compose Multiplatform voor het web gebruikt Kotlin/JS als doelbackend, wat het mogelijk maakt om declaratieve UI-componenten te maken die in de browser werken. Alternatieve oplossingen omvatten wrappers voor React — Kotlin Wrappers, die een type-safe API bieden voor React, React Router en Redux.

Hoe werkt de Kotlin/JS-compiler

Compilatie Kotlin/JS doorloopt verschillende transformatiefasen. De bron-Kotlin-code wordt eerst gecompileerd naar een tussenliggende representatie (IR), vervolgens geoptimaliseerd en wordt JavaScript-code gegenereerd. Sinds Kotlin 1.8 is de oude backend (JsBackend gebaseerd op AST) volledig vervangen door de IR-backend, die betere optimalisatie, kleinere uitvoercode en TypeScript-compatibiliteit biedt.

Voorheen gebruikte Kotlin/JS JsBackend, die direct met de AST-boom (Abstract Syntax Tree) werkte. Deze aanpak had beperkingen: complexiteit van ondersteuning voor platformoptimalisaties, gebrek aan één IR voor alle backends en onvermogen om TypeScript-declaraties te genereren. De overstap naar de IR-backend loste deze problemen op, verenigde de compilatie van alle drie Kotlin-backends en opende de weg voor cross-backend optimalisaties.

Kotlin/JS-compilatiemodi

Kotlin/JS ondersteunt twee compilatiemodi die het formaat en de optimalisatie van de uitvoercode bepalen. De productiemodus gebruikt Webpack voor compilatie, minificatie en tree-shaking. De ontwikkelmodus ondersteunt Hot Module Replacement voor snelle ontwikkeliteratie. De moduskeuze wordt geconfigureerd in build.gradle.kts via de js.target-configuratie.

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

Integratie met NPM en JavaScript-bibliotheken

Integratie van Kotlin/JS met het NPM-ecosysteem is geïmplementeerd via een speciale DSL in build.gradle.kts. De ontwikkelaar declareert npm-afhankelijkheden in de kotlin-configuratie, met vermelding van pakketnaam en versie. Kotlin/JS haalt automatisch pakketten op via de pakketbeheerder npm of yarn. Voor type-safe toegang tot JavaScript-bibliotheken worden externe declaraties gebruikt, die de typen en functies van de bibliotheek beschrijven voor de Kotlin-compiler.

Externe declaraties — Kotlin-declaraties gemarkeerd met het sleutelwoord external. Ze vertellen de compiler dat de implementatie van de functie of klasse zich in JavaScript-code bevindt, niet in Kotlin. JetBrains bied kant-en-klare sets wrappers voor populaire bibliotheken als onderdeel van Kotlin Wrappers, waaronder React, React Router, Redux, Emotion en MUI. Voor bibliotheken zonder kant-en-klare wrappers kan de ontwikkelaar handmatig externe declaraties schrijven of de Dukat TypeScript-bindingenerator gebruiken.

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

// Externe declaratie voor JavaScript-bibliotheek
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Werken met TypeScript-compatibiliteit

TypeScript — een integraal onderdeel van het moderne web, en Kotlin/JS zorgt voor compatibiliteit ermee door het genereren van .d.ts-bestanden. Bij het instellen van js.generateTsDeclarations = true maakt de compiler TypeScript-declaraties voor alle openbare Kotlin-functies en -klassen. Dit stelt TypeScript-projecten in staat om Kotlin-modules te importeren met volledige typeondersteuning. Het genereren van TypeScript-declaraties werkt alleen met de IR-backend en is een van de belangrijkste redenen voor migratie van de oude backend.

Kotlin/JS IR-backend en voordelen

IR-backend (Intermediate Representation) — een uniforme backend voor alle drie Kotlin-platforms: JVM, JS en Native. Het gebruikt een gemeenschappelijke tussenliggende representatie die door verschillende optimalisatiefasen gaat voordat de doelcode wordt gegenereerd. Voor Kotlin/JS werd de IR-backend verplicht vanaf Kotlin 1.8.0, ter vervanging van de oude AST-gebaseerde backend die als deprecated was gemarkeerd.

Voordelen van de IR-backend voor Kotlin/JS omvatten verbeterde codeoptimalisatie op IR-niveau, vermindering van de bundelgrootte door dead code elimination en inline-optimalisaties, en ondersteuning voor TypeScript-declaraties. De IR-backend zorgt ook voor correcte verwerking van inline-functies, reified generics en suspend-functies bij vertaling naar JavaScript, wat problematisch was in de oude backend.

Codevoorbeelden: configuratie en ontwikkeling

Een volwaardig Kotlin/JS-project begint met de configuratie van build.gradle.kts. De kotlin multiplatform-plugin maakt het mogelijk om Kotlin/JS in te stellen als een van de doelplatforms. Laten we een configuratievoorbeeld bekijken voor een webapplicatie met 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))
}

Na configuratie kunnen React-componenten in Kotlin worden geschreven. Kotlin Wrappers bieden een type-safe API voor React, inclusief functionele componenten, hooks en JSX-achtige syntax via DSL-builders. Het voorbeeld van de Counter-component demonstreert het werken met useState en gebeurtenisafhandeling.

@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)
    )
}

Bouwen en implementeren

Het bouwen van een Kotlin/JS-project gebeurt via Gradle-taken. jsDevelopmentRun start de Webpack-dev-server met HMR voor ontwikkeling. jsProductionExecutableCompileSync genereert een productiebundel met minificatie en tree-shaking. Het uiteindelijke HTML-bestand dat de gecompileerde JavaScript koppelt, wordt gegenereerd door de webpack-plugin en bevindt zich in build/dist.

// Start dev-server met HMR
./gradlew jsDevelopmentRun

// Productiebuild met minificatie
./gradlew jsProductionExecutableCompileSync

// Uitvoer in build/dist/productionExecutable/

Kotlin/JS vs TypeScript: vergelijking

TypeScript — de belangrijkste concurrent van Kotlin/JS op het gebied van getypeerd JavaScript. Beide talen compileren naar JavaScript en voegen statische typering toe bovenop dynamische JS. Kotlin/JS biedt echter een aantal voordelen: null safety standaard, sealed klassen, coroutines en naadloze integratie met Kotlin Multiplatform. TypeScript heeft op zijn beurt een grotere community, meer kant-en-klare bibliotheken met typen en een volwassener ecosysteem.

De ontwikkelproductiviteit met Kotlin/JS kan hoger zijn voor teams die Kotlin al in andere delen van het project gebruiken, omdat er geen omschakeling tussen talen nodig is. TypeScript blijft de populaire keuze voor pure webprojecten waar Kotlin Multiplatform niet wordt gebruikt. Met de groeiende populariteit van Compose Multiplatform voor het web wint Kotlin/JS echter terrein als alternatief voor React en Angular.

De keuze tussen Kotlin/JS en TypeScript hangt af van de projectcontext. Als het team al Kotlin Multiplatform gebruikt of van plan is te beginnen, is Kotlin/JS een logische keuze voor het frontend-gedeelte. Voor een geïsoleerd webproject blijft TypeScript een pragmatischere oplossing vanwege de beschikbaarheid van kant-en-klare typen voor JavaScript-bibliotheken en het grotere aantal ontwikkelaars op de markt.