Kotlin/JS — vad är det, kompilator till JavaScript och funktioner

Vad är Kotlin/JS?

Kotlin/JS — är en av tre backends i Kotlin-kompilatorn (tillsammans med JVM och Native), avsedd för att översätta Kotlin-kod till JavaScript. Utvecklad av JetBrains, gör Kotlin/JS det möjligt att skriva webbapplikationer på ett språk med strikt statisk typning, samtidigt som tillgången till det enorma ekosystemet av JavaScript-bibliotek bevaras genom mekanismen med externa deklarationer. Sedan den första stabila versionen i Kotlin 1.3 har kompilatorn gått från en experimentell backend till ett produktionsklart verktyg som används i industriella projekt.

Huvudsyftet med Kotlin/JS — frontend-utveckling med Kotlin istället för JavaScript eller TypeScript. Utvecklare får alla funktioner i Kotlin-språket: null safety, extensionsfunktioner, dataklasser, korutiner och sealed-klasser. Den genererade JavaScript-koden kan köras i vilken modern webbläsare som helst eller i Node.js-miljön. Kotlin/JS är särskilt efterfrågat i Kotlin Multiplatform-projekt, där den gemensamma modulen (commonMain) är tillgänglig för både mobila och webbapplikationer.

Kotlin/JS-ekosystemet inkluderar ramverk för att skapa användargränssnitt. Compose Multiplatform för webben använder Kotlin/JS som målbackend, vilket gör det möjligt att skapa deklarativa UI-komponenter som fungerar i webbläsaren. Alternativa lösningar inkluderar wrappers för React — Kotlin Wrappers, som tillhandahåller ett type-safe API för React, React Router och Redux.

Hur Kotlin/JS-kompilatorn fungerar

Kompilering Kotlin/JS går igenom flera transformationssteg. Källkoden Kotlin kompileras först till en mellanliggande representation (IR), optimeras sedan och JavaScript-kod genereras. Från och med Kotlin 1.8 har den gamla backend (JsBackend baserad på AST) helt ersatts av IR-backend, som ger bättre optimering, mindre utdatakod och TypeScript-kompatibilitet.

Tidigare använde Kotlin/JS JsBackend, som arbetade direkt med AST-trädet (Abstract Syntax Tree). Detta tillvägagångssätt hade begränsningar: komplexiteten i att stödja plattformsoptimeringar, avsaknad av enhetlig IR för alla backends och oförmåga att generera TypeScript-deklarationer. Övergången till IR-backend löste dessa problem, enhetliggjorde kompileringen av alla tre Kotlin-backends och öppnade vägen för tvärbackend-optimeringar.

Kotlin/JS kompileringslägen

Kotlin/JS stöder två kompileringslägen som bestämmer format och optimering av utdatakoden. Produktionsläget använder Webpack för kompilering, minifiering och tree-shaking. Utvecklingsläget stöder Hot Module Replacement för snabb utvecklingsiteration. Läsvalet konfigureras i build.gradle.kts via js.target-konfigurationen.

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

Integration med NPM och JavaScript-bibliotek

Integration av Kotlin/JS med NPM-ekosystemet implementeras via ett speciellt DSL i build.gradle.kts. Utvecklaren deklarerar npm-beroenden i kotlin-konfigurationen, med angivande av paketnamn och version. Kotlin/JS hämtar automatiskt paket via pakethanteraren npm eller yarn. För att säkerställa type-safe åtkomst till JavaScript-bibliotek används externa deklarationer, som beskriver bibliotekets typer och funktioner för Kotlin-kompilatorn.

Externa deklarationer — Kotlin-deklarationer märkta med nyckelordet external. De informerar kompilatorn om att implementeringen av funktionen eller klassen finns i JavaScript-kod, inte i Kotlin. JetBrains tillhandahåller färdiga uppsättningar wrappers för populära bibliotek inom Kotlin Wrappers, inklusive React, React Router, Redux, Emotion och MUI. För bibliotek som saknar färdiga wrappers kan utvecklaren skriva externa deklarationer manuellt eller använda Dukat TypeScript-bindningsgeneratorn.

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

// Extern deklaration för JavaScript-bibliotek
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Arbete med TypeScript-kompatibilitet

TypeScript — en integrerad del av den moderna webben, och Kotlin/JS säkerställer kompatibilitet med det genom generering av .d.ts-filer. När js.generateTsDeclarations = true ställs in, skapar kompilatorn TypeScript-deklarationer för alla publika Kotlin-funktioner och klasser. Detta gör att TypeScript-projekt kan importera Kotlin-moduler med full typstöd. Generering av TypeScript-deklarationer fungerar bara med IR-backend och är en av de viktigaste orsakerna till migrering från den gamla backend.

Kotlin/JS IR-backend och fördelar

IR-backend (Intermediate Representation) — en enhetlig backend för alla tre Kotlin-plattformar: JVM, JS och Native. Den använder en gemensam mellanliggande representation som går igenom flera optimeringssteg innan målkoden genereras. För Kotlin/JS blev IR-backend obligatorisk från och med Kotlin 1.8.0 och ersatte den gamla AST-baserade backend som markerats som deprecated.

Fördelarna med IR-backend för Kotlin/JS inkluderar förbättrad kodoptimering på IR-nivå, minskning av bundle-storleken genom dead code elimination och inline-optimeringar, samt stöd för TypeScript-deklarationer. IR-backend säkerställer också korrekt bearbetning av inline-funktioner, reified generics och suspend-funktioner vid översättning till JavaScript, vilket var problematiskt i den gamla backend.

Kodexempel: konfiguration och utveckling

Ett fullfjädrat Kotlin/JS-projekt börjar med konfigurationen av build.gradle.kts. Kotlin multiplatform-plugin gör det möjligt att konfigurera Kotlin/JS som en av målplattformarna. Låt oss titta på ett konfigurationsexempel för en webbapplikation med 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))
}

Efter konfiguration kan React-komponenter skrivas i Kotlin. Kotlin Wrappers tillhandahåller type-safe API för React, inklusive funktionella komponenter, hooks och JSX-liknande syntax genom DSL-byggare. Exemplet med Counter-komponenten demonstrerar arbete med useState och händelsehanterare.

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

Bygg och distribution

Bygget av Kotlin/JS-projektet utförs via Gradle-uppgifter. jsDevelopmentRun startar Webpack-utvecklingsservern med HMR för utveckling. jsProductionExecutableCompileSync genererar en produktions-bundle med minifiering och tree-shaking. Den slutgiltiga HTML-filen som kopplar samman den kompilerade JavaScript-koden genereras av webpack-pluginen och finns i build/dist.

// Starta utvecklingsserver med HMR
./gradlew jsDevelopmentRun

// Produktionsbygge med minifiering
./gradlew jsProductionExecutableCompileSync

// Utdata i build/dist/productionExecutable/

Kotlin/JS vs TypeScript: jämförelse

TypeScript — den främsta konkurrenten till Kotlin/JS inom området typad JavaScript. Båda språken kompileras till JavaScript och lägger till statisk typning ovanpå dynamisk JS. Kotlin/JS erbjuder dock flera fördelar: null safety som standard, sealed-klasser, korutiner och sömlös integration med Kotlin Multiplatform. TypeScript har å sin sida en större community, fler färdiga bibliotek med typer och ett mer moget ekosystem.

Utvecklingsproduktiviteten med Kotlin/JS kan vara högre för team som redan använder Kotlin i andra delar av projektet, eftersom det inte kräver växling mellan språk. TypeScript förblir det populärare valet för rena webbprojekt där Kotlin Multiplatform inte används. Men med den växande populariteten för Compose Multiplatform för webben vinner Kotlin/JS mark som ett alternativ till React och Angular.

Valet mellan Kotlin/JS och TypeScript beror på projektets sammanhang. Om teamet redan använder Kotlin Multiplatform eller planerar att börja, är Kotlin/JS ett logiskt val för frontend-delen. För ett isolerat webbprojekt förblir TypeScript en mer pragmatisk lösning tack vare tillgången på färdiga typer för JavaScript-bibliotek och fler utvecklare på marknaden.