Kotlin/JS — mi ez, fordító JavaScriptbe és jellemzők

Mi az a Kotlin/JS?

Kotlin/JS — a Kotlin fordító három backendjének egyike (a JVM és Native mellett), amely a Kotlin kód JavaScriptbe történő fordítására szolgál. A JetBrains által fejlesztett Kotlin/JS lehetővé teszi webes alkalmazások írását szigorú statikus típusosságú nyelven, miközben megtartja a hozzáférést a JavaScript könyvtárak hatalmas ökoszisztémájához a külső deklarációk mechanizmusán keresztül. Az első stabil kiadás óta a Kotlin 1.3-ban a fordító egy kísérleti backendből egy production-ready eszközzé fejlődött, amelyet ipari projektekben használnak.

A Kotlin/JS fő célja — frontend fejlesztés Kotlin használatával JavaScript vagy TypeScript helyett. A fejlesztők megkapják a Kotlin nyelv összes képességét: null safety, kiterjesztő függvények, adatosztályok, korutinok és sealed osztályok. A generált JavaScript kód bármely modern böngészőben vagy Node.js környezetben futtatható. A Kotlin/JS különösen keresett a Kotlin Multiplatform projektekben, ahol a közös modul (commonMain) mind a mobil, mind a webes alkalmazások számára elérhető.

A Kotlin/JS ökoszisztéma tartalmaz keretrendszereket felhasználói felületek létrehozásához. A Compose Multiplatform a webhez a Kotlin/JS-t használja célbackendként, ami lehetővé teszi deklaratív UI komponensek létrehozását, amelyek a böngészőben működnek. Alternatív megoldások közé tartoznak a React burkolói — Kotlin Wrappers, amelyek type-safe API-t biztosítanak a React, React Router és Redux számára.

Hogyan működik a Kotlin/JS fordító

Fordítás A Kotlin/JS több átalakítási szakaszon megy keresztül. A forrás Kotlin kód először köztes reprezentációvá (IR) fordul, majd optimalizálásra kerül és JavaScript kód generálódik. A Kotlin 1.8-tól kezdve a régi backend (AST-alapú JsBackend) teljesen lecserélésre került az IR-backendre, amely jobb optimalizálást, kisebb kimeneti kódméretet és TypeScript kompatibilitást biztosít.

Korábban a Kotlin/JS a JsBackend-et használta, amely közvetlenül az AST fával (Abstract Syntax Tree) dolgozott. Ennek a megközelítésnek korlátai voltak: a platformoptimalizálások támogatásának összetettsége, az egységes IR hiánya az összes backend számára és a TypeScript deklarációk generálásának képtelensége. Az IR-backendre való áttérés megoldotta ezeket a problémákat, egyesítette mindhárom Kotlin backend fordítását, és utat nyitott a keresztbackend optimalizálások számára.

A Kotlin/JS fordítási módjai

Kotlin/JS két fordítási módot támogat, amelyek meghatározzák a kimeneti kód formátumát és optimalizálását. A production mód a Webpack-et használja fordításra, minifikációra és tree-shakingre. A development mód támogatja a Hot Module Replacement-et a gyors fejlesztési iterációhoz. A mód kiválasztása a build.gradle.kts fájlban a js.target konfiguráción keresztül történik.

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

Integráció NPM-mel és JavaScript könyvtárakkal

Integráció A Kotlin/JS és az NPM ökoszisztéma között egy speciális DSL-en keresztül valósul meg a build.gradle.kts fájlban. A fejlesztő npm függőségeket deklarál a kotlin konfigurációban, megadva a csomag nevét és verzióját. A Kotlin/JS automatikusan letölti a csomagokat az npm vagy yarn csomagkezelőn keresztül. A JavaScript könyvtárakhoz való type-safe hozzáférés biztosításához external deklarációkat használnak, amelyek leírják a könyvtár típusait és függvényeit a Kotlin fordító számára.

External deklarációk — Kotlin deklarációk, amelyek az external kulcsszóval vannak megjelölve. Ezek tájékoztatják a fordítót, hogy a függvény vagy osztály megvalósítása JavaScript kódban található, nem Kotlinban. A JetBrains kész burkolókészleteket biztosít népszerű könyvtárakhoz a Kotlin Wrappers részeként, beleértve a React, React Router, Redux, Emotion és MUI könyvtárakat. Azon könyvtárak esetében, amelyekhez nincs kész burkoló, a fejlesztő manuálisan írhat external deklarációkat, vagy használhatja a Dukat TypeScript kötésgenerátort.

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

// Külső deklaráció JavaScript könyvtárhoz
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Munka TypeScript kompatibilitással

TypeScript — a modern web elválaszthatatlan része, és a Kotlin/JS biztosítja a kompatibilitást vele .d.ts fájlok generálásán keresztül. A js.generateTsDeclarations = true beállításakor a fordító TypeScript deklarációkat hoz létre az összes nyilvános Kotlin függvényhez és osztályhoz. Ez lehetővé teszi a TypeScript projektek számára, hogy Kotlin modulokat importáljanak teljes típus támogatással. A TypeScript deklarációk generálása csak az IR-backenddel működik, és az egyik kulcsfontosságú oka a régi backendről való migrációnak.

Kotlin/JS IR-backend és előnyök

IR-backend (Intermediate Representation) — egységes backend mindhárom Kotlin platform számára: JVM, JS és Native. Közös köztes reprezentációt használ, amely több optimalizálási szakaszon megy keresztül a célkód generálása előtt. A Kotlin/JS esetében az IR-backend a Kotlin 1.8.0-tól kötelezővé vált, felváltva a régi AST-alapú backendet, amely deprecatedként volt megjelölve.

Az IR-backend előnyei a Kotlin/JS számára magukban foglalják a jobb kódoptimalizálást IR szinten, a bundle méretének csökkentését a dead code elimination és inline optimalizálások révén, valamint a TypeScript deklarációk támogatását. Az IR-backend biztosítja az inline függvények, reified generics és suspend függvények helyes feldolgozását is a JavaScriptbe történő fordítás során, ami problémás volt a régi backendben.

Kódpéldák: konfiguráció és fejlesztés

Egy teljes értékű Kotlin/JS projekt a build.gradle.kts konfigurációjával kezdődik. A kotlin multiplatform plugin lehetővé teszi a Kotlin/JS beállítását az egyik célplatformként. Nézzünk egy konfigurációs példát egy React-es webalkalmazáshoz.

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

A konfiguráció után React komponensek írhatók Kotlinban. A Kotlin Wrappers type-safe API-t biztosít a React számára, beleértve a funkcionális komponenseket, hookokat és JSX-szerű szintaxist DSL-építők segítségével. A Counter komponens példája bemutatja a useState és eseménykezelők használatát.

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

Építés és telepítés

A Kotlin/JS projekt építése Gradle feladatokon keresztül történik. A jsDevelopmentRun elindítja a Webpack fejlesztői szervert HMR-rel a fejlesztéshez. A jsProductionExecutableCompileSync létrehozza a production bundle-t minifikációval és tree-shakinggel. A lefordított JavaScriptet összekötő végső HTML fájlt a webpack plugin generálja, és a build/dist mappában található.

// Fejlesztői szerver indítása HMR-rel
./gradlew jsDevelopmentRun

// Production build minifikációval
./gradlew jsProductionExecutableCompileSync

// Kimenet a build/dist/productionExecutable/ mappában

Kotlin/JS vs TypeScript: összehasonlítás

TypeScript — a Kotlin/JS fő versenytársa a típusos JavaScript területén. Mindkét nyelv JavaScriptbe fordul, és statikus típusosságot ad a dinamikus JS fölé. A Kotlin/JS azonban számos előnyt kínál: null safety alapértelmezetten, sealed osztályok, korutinok és zökkenőmentes integráció a Kotlin Multiplatformmal. A TypeScript viszont nagyobb közösséggel, több kész típusokkal rendelkező könyvtárral és érettebb ökoszisztémával rendelkezik.

A fejlesztés termelékenysége Kotlin/JS-szel magasabb lehet azoknak a csapatoknak, akik már használják a Kotlint a projekt más részein, mivel nincs szükség nyelvváltásra. A TypeScript továbbra is népszerűbb választás a tiszta webes projekteknél, ahol nem használnak Kotlin Multiplatformot. A Compose Multiplatform webes növekvő népszerűségével azonban a Kotlin/JS egyre nagyobb teret nyer a React és Angular alternatívájaként.

A Kotlin/JS és TypeScript közötti választás a projekt kontextusától függ. Ha a csapat már használja a Kotlin Multiplatform-ot, vagy tervezi elkezdeni, a Kotlin/JS logikus választás a frontend részhez. Egy elkülönített webes projekt esetében a TypeScript marad a pragmatikusabb megoldás a JavaScript könyvtárakhoz elérhető kész típusok és a piacon lévő több fejlesztő miatt.