Kotlin/JS — cos'è, compilatore in JavaScript e caratteristiche

Cos'è Kotlin/JS?

Kotlin/JS è uno dei tre backend del compilatore Kotlin (insieme a JVM e Native), progettato per tradurre codice Kotlin in JavaScript. Sviluppato da JetBrains, Kotlin/JS consente di scrivere applicazioni web in un linguaggio con tipizzazione statica rigorosa, mantenendo l'accesso al vasto ecosistema di librerie JavaScript tramite dichiarazioni esterne. Dal primo rilascio stabile in Kotlin 1.3, il compilatore si è evoluto da un backend sperimentale a uno strumento pronto per la produzione utilizzato in progetti industriali.

Lo scopo principale di Kotlin/JS è lo sviluppo frontend utilizzando Kotlin invece di JavaScript o TypeScript. Gli sviluppatori ottengono tutte le funzionalità del linguaggio Kotlin: null safety, funzioni di estensione, classi dati, coroutine e classi sealed. Il codice JavaScript generato può essere eseguito in qualsiasi browser moderno o in un ambiente Node.js. Kotlin/JS è particolarmente prezioso nei progetti Kotlin Multiplatform, dove il modulo condiviso (commonMain) è disponibile sia per applicazioni mobili che web.

L'ecosistema Kotlin/JS include framework per costruire interfacce utente. Compose Multiplatform per il web utilizza Kotlin/JS come backend target, consentendo di creare componenti UI dichiarativi che funzionano nel browser. Le soluzioni alternative includono wrapper per React — Kotlin Wrappers, che forniscono un'API type-safe per React, React Router e Redux.

Come funziona il compilatore Kotlin/JS

La compilazione in Kotlin/JS passa attraverso diverse fasi di trasformazione. Il codice Kotlin sorgente viene prima compilato in una rappresentazione intermedia (IR), poi ottimizzato e infine viene generato il codice JavaScript. A partire da Kotlin 1.8, il vecchio backend (JsBackend basato su AST) è stato completamente sostituito dal backend IR, che offre una migliore ottimizzazione, dimensioni del codice di output ridotte e compatibilità con TypeScript.

In precedenza, Kotlin/JS utilizzava JsBackend, che lavorava direttamente con l'AST (Albero Sintattico Astratto). Questo approccio presentava limitazioni: difficoltà nel supportare ottimizzazioni di piattaforma, mancanza di un IR unificato per tutti i backend e incapacità di generare dichiarazioni TypeScript. La transizione al backend IR ha risolto questi problemi, unificando la compilazione su tutti e tre i backend Kotlin e aprendo la strada a ottimizzazioni incrociate tra backend.

Modalità di compilazione Kotlin/JS

Kotlin/JS supporta due modalità di compilazione che determinano il formato e l'ottimizzazione del codice di output. La modalità produzione utilizza Webpack per il bundling, la minificazione e il tree-shaking. La modalità sviluppo supporta Hot Module Replacement per iterazioni di sviluppo rapide. La selezione della modalità è configurata in build.gradle.kts tramite la configurazione js.target.

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

Integrazione con NPM e librerie JavaScript

L'integrazione di Kotlin/JS con l'ecosistema NPM è implementata tramite un DSL speciale in build.gradle.kts. Lo sviluppatore dichiara le dipendenze npm nella configurazione kotlin, specificando il nome del pacchetto e la versione. Kotlin/JS recupera automaticamente i pacchetti tramite il gestore pacchetti npm o yarn. Per garantire l'accesso type-safe alle librerie JavaScript, vengono utilizzate dichiarazioni esterne che descrivono i tipi e le funzioni della libreria per il compilatore Kotlin.

Le dichiarazioni esterne sono dichiarazioni Kotlin contrassegnate con la parola chiave external. Indicano al compilatore che l'implementazione della funzione o classe si trova nel codice JavaScript, non in Kotlin. JetBrains fornisce set di wrapper pronti per librerie popolari come parte di Kotlin Wrappers, tra cui React, React Router, Redux, Emotion e MUI. Per le librerie senza wrapper pronti, lo sviluppatore può scrivere dichiarazioni esterne manualmente o utilizzare il generatore di binding TypeScript Dukat.

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

// Dichiarazione esterna per libreria JavaScript
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Lavorare con la compatibilità TypeScript

TypeScript è parte integrante del web moderno e Kotlin/JS garantisce la compatibilità con esso tramite la generazione di file .d.ts. Impostando js.generateTsDeclarations = true, il compilatore crea dichiarazioni TypeScript per tutte le funzioni e classi pubbliche Kotlin. Ciò consente ai progetti TypeScript di importare moduli Kotlin con supporto completo dei tipi. La generazione di dichiarazioni TypeScript funziona solo con il backend IR ed è uno dei motivi principali per migrare dal vecchio backend.

Backend IR di Kotlin/JS e vantaggi

Il backend IR (Intermediate Representation) è un backend unificato per tutte e tre le piattaforme Kotlin: JVM, JS e Native. Utilizza una rappresentazione intermedia comune che passa attraverso diverse fasi di ottimizzazione prima di generare il codice target. Per Kotlin/JS, il backend IR è diventato obbligatorio a partire da Kotlin 1.8.0, sostituendo il vecchio backend basato su AST che era stato contrassegnato come deprecato.

I vantaggi del backend IR per Kotlin/JS includono migliore ottimizzazione del codice a livello IR, riduzione delle dimensioni del bundle tramite eliminazione del codice morto e ottimizzazioni inline, oltre al supporto per le dichiarazioni TypeScript. Il backend IR garantisce anche la corretta gestione delle funzioni inline, dei generics reified e delle funzioni suspend durante la traduzione in JavaScript, che era problematica nel vecchio backend.

Esempi di codice: configurazione e sviluppo

Un progetto Kotlin/JS completo inizia con la configurazione di build.gradle.kts. Il plugin kotlin multiplatform consente di impostare Kotlin/JS come una delle piattaforme target. Vediamo un esempio di configurazione per un'applicazione web con 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))
}

Dopo la configurazione, è possibile scrivere componenti React in Kotlin. Kotlin Wrappers fornisce un'API type-safe per React, inclusi componenti funzionali, hook e sintassi simile a JSX tramite costruttori DSL. L'esempio del componente Counter dimostra l'utilizzo di useState e dei gestori di eventi.

@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 e distribuzione

Il build di un progetto Kotlin/JS viene eseguito tramite attività Gradle. jsDevelopmentRun avvia il server di sviluppo Webpack con HMR per lo sviluppo. jsProductionExecutableCompileSync genera un bundle di produzione con minificazione e tree-shaking. Il file HTML finale che include il JavaScript compilato viene generato dal plugin webpack e posizionato in build/dist.

// Avviare server di sviluppo con HMR
./gradlew jsDevelopmentRun

// Build di produzione con minificazione
./gradlew jsProductionExecutableCompileSync

// Output in build/dist/productionExecutable/

Kotlin/JS vs TypeScript: confronto

TypeScript è il principale concorrente di Kotlin/JS nel campo del JavaScript tipizzato. Entrambi i linguaggi compilano in JavaScript e aggiungono tipizzazione statica sopra il JS dinamico. Tuttavia, Kotlin/JS offre diversi vantaggi: null safety predefinita, classi sealed, coroutine e integrazione perfetta con Kotlin Multiplatform. TypeScript, d'altra parte, ha una comunità più ampia, più librerie pronte con tipi e un ecosistema più maturo.

La produttività di sviluppo con Kotlin/JS può essere maggiore per i team che già utilizzano Kotlin in altre parti del progetto, poiché non richiede il cambio di linguaggio. TypeScript rimane la scelta più popolare per progetti web puri dove Kotlin Multiplatform non viene utilizzato. Tuttavia, con la crescente popolarità di Compose Multiplatform per il web, Kotlin/JS sta guadagnando terreno come alternativa a React e Angular.

La scelta tra Kotlin/JS e TypeScript dipende dal contesto del progetto. Se il team utilizza già Kotlin Multiplatform o prevede di iniziare, Kotlin/JS è una scelta logica per la parte frontend. Per un progetto web isolato, TypeScript rimane una soluzione più pragmatica grazie alla disponibilità di tipi pronti per le librerie JavaScript e a un numero maggiore di sviluppatori sul mercato.