Kotlin/JS — ano ito, compiler sa JavaScript at mga tampok

Ano ang Kotlin/JS?

Kotlin/JS — ay isa sa tatlong backend ng Kotlin compiler (kasama ang JVM at Native), na nilayon para isalin ang Kotlin code sa JavaScript. Binuo ng JetBrains, pinapayagan ng Kotlin/JS ang pagsulat ng mga web application sa isang wika na may mahigpit na static typing, habang pinapanatili ang access sa malawak na ecosystem ng JavaScript library sa pamamagitan ng mekanismo ng external declarations. Mula noong unang stable release sa Kotlin 1.3, ang compiler ay umunlad mula sa isang experimental backend patungo sa isang production-ready na tool na ginagamit sa mga industrial project.

Ang pangunahing layunin ng Kotlin/JS — frontend development gamit ang Kotlin sa halip na JavaScript o TypeScript. Nakukuha ng mga developer ang lahat ng kakayahan ng wikang Kotlin: null safety, extension function, data class, coroutine, at sealed class. Ang nabuong JavaScript code ay maaaring tumakbo sa anumang modernong browser o sa Node.js environment. Ang Kotlin/JS ay partikular na hinahanap sa Kotlin Multiplatform projects, kung saan ang shared module (commonMain) ay available para sa parehong mobile at web application.

Ang ecosystem ng Kotlin/JS ay may kasamang frameworks para sa paglikha ng user interface. Ang Compose Multiplatform para sa web ay gumagamit ng Kotlin/JS bilang target backend, na nagbibigay-daan sa paglikha ng declarative UI component na tumatakbo sa browser. Kasama sa mga alternatibong solusyon ang mga wrapper para sa React — Kotlin Wrappers, na nagbibigay ng type-safe API para sa React, React Router, at Redux.

Paano gumagana ang Kotlin/JS compiler

Compilation ng Kotlin/JS ay dumadaan sa ilang yugto ng pagbabago. Ang source Kotlin code ay unang compile sa intermediate representation (IR), pagkatapos ay i-optimize at bubuo ng JavaScript code. Simula sa Kotlin 1.8, ang lumang backend (JsBackend batay sa AST) ay ganap na napalitan ng IR-backend, na nagbibigay ng mas mahusay na optimization, mas maliit na output code size, at compatibility sa TypeScript.

Dati, ang Kotlin/JS ay gumamit ng JsBackend, na direktang gumagana sa AST tree (Abstract Syntax Tree). Ang approach na ito ay may mga limitasyon: kumplikasyon ng suporta para sa platform optimization, kawalan ng unified IR para sa lahat ng backend, at kawalan ng kakayahang bumuo ng TypeScript declarations. Ang paglipat sa IR-backend ay nalutas ang mga problemang ito, pinag-isa ang compilation ng lahat ng tatlong Kotlin backend, at nagbukas ng daan para sa cross-backend optimization.

Mga mode ng compilation ng Kotlin/JS

Kotlin/JS ay sumusuporta sa dalawang compilation mode na tumutukoy sa format at optimization ng output code. Ang production mode ay gumagamit ng Webpack para sa compilation, minification, at tree-shaking. Ang development mode ay sumusuporta sa Hot Module Replacement para sa mabilis na development iteration. Ang pagpili ng mode ay na-configure sa build.gradle.kts sa pamamagitan ng configuration ng js.target.

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

Integrasyon sa NPM at JavaScript library

Integrasyon ng Kotlin/JS sa NPM ecosystem ay naipatupad sa pamamagitan ng isang espesyal na DSL sa build.gradle.kts. Ang developer ay nagdedeklara ng npm dependencies sa kotlin configuration, na nagsasaad ng package name at version. Awtomatikong kumukuha ang Kotlin/JS ng mga package sa pamamagitan ng package manager na npm o yarn. Para magbigay ng type-safe access sa JavaScript library, ginagamit ang external declarations, na naglalarawan ng mga type at function ng library para sa Kotlin compiler.

External declarations — ay mga Kotlin declaration na minarkahan ng keyword na external. Ipinapaalam nila sa compiler na ang implementation ng function o class ay nasa JavaScript code, hindi sa Kotlin. Ang JetBrains ay nagbibigay ng mga ready-made na set ng wrapper para sa mga sikat na library sa ilalim ng Kotlin Wrappers, kabilang ang React, React Router, Redux, Emotion, at MUI. Para sa mga library na walang ready-made na wrapper, ang developer ay maaaring sumulat ng external declaration nang manu-mano o gumamit ng Dukat TypeScript binding generator.

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

// Panlabas na deklarasyon para sa JavaScript library
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Paggawa gamit ang TypeScript compatibility

TypeScript — isang mahalagang bahagi ng modernong web, at tinitiyak ng Kotlin/JS ang compatibility dito sa pamamagitan ng pagbuo ng .d.ts files. Kapag itinakda ang js.generateTsDeclarations = true, gumagawa ang compiler ng TypeScript declaration para sa lahat ng pampublikong Kotlin function at class. Ito ay nagpapahintulot sa TypeScript projects na mag-import ng Kotlin modules na may buong type support. Ang pagbuo ng TypeScript declaration ay gumagana lamang sa IR-backend at isa sa mga pangunahing dahilan ng paglipat mula sa lumang backend.

Kotlin/JS IR-backend at mga benepisyo

IR-backend (Intermediate Representation) — ay isang unified backend para sa lahat ng tatlong Kotlin platform: JVM, JS, at Native. Gumagamit ito ng isang shared intermediate representation na dumadaan sa ilang optimization stage bago bumuo ng target code. Para sa Kotlin/JS, ang IR-backend ay naging mandatory mula sa Kotlin 1.8.0, na pumalit sa lumang AST-based backend na minarkahan bilang deprecated.

Ang mga benepisyo ng IR-backend para sa Kotlin/JS ay kinabibilangan ng pinahusay na code optimization sa IR level, pagbawas sa laki ng bundle sa pamamagitan ng dead code elimination at inline optimization, pati na rin ang suporta para sa TypeScript declaration. Tinitiyak din ng IR-backend ang tamang pagproseso ng inline functions, reified generics, at suspend functions kapag isinalin sa JavaScript, na naging problema sa lumang backend.

Mga halimbawa ng code: configuration at development

Ang isang buong Kotlin/JS project ay nagsisimula sa configuration ng build.gradle.kts. Ang kotlin multiplatform plugin ay nagbibigay-daan sa pag-configure ng Kotlin/JS bilang isa sa mga target platform. Tingnan natin ang halimbawa ng configuration para sa isang web application gamit ang 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))
}

Pagkatapos ng configuration, maaaring sumulat ng React components sa Kotlin. Ang Kotlin Wrappers ay nagbibigay ng type-safe API para sa React, kabilang ang functional components, hooks, at JSX-like syntax sa pamamagitan ng DSL builders. Ang halimbawa ng Counter component ay nagpapakita ng paggawa gamit ang useState at event handlers.

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

Pagbuo at deployment

Ang pagbuo ng Kotlin/JS project ay ginagawa sa pamamagitan ng Gradle tasks. jsDevelopmentRun ay nagpapatakbo ng Webpack dev-server na may HMR para sa development. jsProductionExecutableCompileSync ay bumubuo ng production bundle na may minification at tree-shaking. Ang huling HTML file na nag-uugnay ng compiled JavaScript ay binuo ng webpack plugin at matatagpuan sa build/dist.

// Simulan ang dev server gamit ang HMR
./gradlew jsDevelopmentRun

// Production build na may minification
./gradlew jsProductionExecutableCompileSync

// Output sa build/dist/productionExecutable/

Kotlin/JS vs TypeScript: paghahambing

TypeScript — pangunahing kakumpitensya ng Kotlin/JS sa larangan ng typed JavaScript. Ang parehong wika ay nag-compile sa JavaScript at nagdaragdag ng static typing sa ibabaw ng dynamic na JS. Gayunpaman, ang Kotlin/JS ay nag-aalok ng maraming benepisyo: null safety bilang default, sealed class, coroutine, at seamless na integrasyon sa Kotlin Multiplatform. Ang TypeScript, sa kabilang banda, ay may mas malaking komunidad, mas maraming ready-made na library na may mga type, at mas mature na ecosystem.

Ang pagiging produktibo sa pag-develop gamit ang Kotlin/JS ay maaaring mas mataas para sa mga team na gumagamit na ng Kotlin sa ibang bahagi ng project, dahil hindi kinakailangan ang paglipat sa pagitan ng mga wika. Ang TypeScript ay nananatiling popular na pagpipilian para sa purong web projects kung saan hindi ginagamit ang Kotlin Multiplatform. Gayunpaman, sa pagtaas ng kasikatan ng Compose Multiplatform para sa web, ang Kotlin/JS ay nakakakuha ng posisyon bilang alternatibo sa React at Angular.

Ang pagpili sa pagitan ng Kotlin/JS at TypeScript ay depende sa konteksto ng project. Kung ang team ay gumagamit na ng Kotlin Multiplatform o nagpaplanong magsimula, ang Kotlin/JS ay lohikal na pagpipilian para sa frontend na bahagi. Para sa isang isolated na web project, ang TypeScript ay nananatiling mas pragmatic na solusyon dahil sa availability ng ready-made na type para sa JavaScript library at mas maraming developer sa merkado.