Kotlin/JS — qu'est-ce que c'est, compilateur vers JavaScript et fonctionnalités

Qu'est-ce que Kotlin/JS ?

Kotlin/JS est l'un des trois backends du compilateur Kotlin (avec JVM et Native), conçu pour traduire le code Kotlin en JavaScript. Développé par JetBrains, Kotlin/JS permet d'écrire des applications web dans un langage à typage statique strict, tout en conservant l'accès au vaste écosystème des bibliothèques JavaScript via des déclarations externes. Depuis la première version stable dans Kotlin 1.3, le compilateur est passé d'un backend expérimental à un outil prêt pour la production utilisé dans des projets industriels.

L'objectif principal de Kotlin/JS est le développement frontend utilisant Kotlin au lieu de JavaScript ou TypeScript. Les développeurs bénéficient de toutes les fonctionnalités du langage Kotlin : null safety, fonctions d'extension, classes de données, coroutines et classes scellées. Le code JavaScript généré peut s'exécuter dans n'importe quel navigateur moderne ou dans un environnement Node.js. Kotlin/JS est particulièrement précieux dans les projets Kotlin Multiplatform, où le module partagé (commonMain) est disponible à la fois pour les applications mobiles et web.

L'écosystème Kotlin/JS comprend des frameworks pour créer des interfaces utilisateur. Compose Multiplatform pour le web utilise Kotlin/JS comme backend cible, permettant de créer des composants d'interface déclaratifs qui s'exécutent dans le navigateur. Les solutions alternatives incluent des wrappers pour React — Kotlin Wrappers, qui fournissent une API type-safe pour React, React Router et Redux.

Comment fonctionne le compilateur Kotlin/JS

La compilation dans Kotlin/JS passe par plusieurs étapes de transformation. Le code source Kotlin est d'abord compilé en une représentation intermédiaire (IR), puis optimisé, et enfin le code JavaScript est généré. Depuis Kotlin 1.8, l'ancien backend (JsBackend basé sur AST) a été complètement remplacé par le backend IR, qui offre une meilleure optimisation, une taille de code de sortie plus petite et une compatibilité avec TypeScript.

Auparavant, Kotlin/JS utilisait JsBackend, qui travaillait directement avec l'AST (Arbre Syntaxique Abstrait). Cette approche avait des limitations : difficulté à prendre en charge les optimisations de plateforme, absence d'un IR unifié pour tous les backends et incapacité à générer des déclarations TypeScript. La transition vers le backend IR a résolu ces problèmes, unifiant la compilation sur les trois backends Kotlin et ouvrant la voie à des optimisations croisées entre backends.

Modes de compilation Kotlin/JS

Kotlin/JS prend en charge deux modes de compilation qui déterminent le format et l'optimisation du code de sortie. Le mode production utilise Webpack pour le regroupement, la minification et l'élimination du code mort. Le mode développement prend en charge Hot Module Replacement pour une itération rapide du développement. La sélection du mode est configurée dans build.gradle.kts via la configuration js.target.

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

Intégration avec NPM et les bibliothèques JavaScript

L'intégration de Kotlin/JS avec l'écosystème NPM est implémentée via un DSL spécial dans build.gradle.kts. Le développeur déclare les dépendances npm dans la configuration kotlin, en spécifiant le nom du paquet et la version. Kotlin/JS récupère automatiquement les paquets via le gestionnaire de paquets npm ou yarn. Pour garantir un accès type-safe aux bibliothèques JavaScript, des déclarations externes sont utilisées pour décrire les types et fonctions de la bibliothèque pour le compilateur Kotlin.

Les déclarations externes sont des déclarations Kotlin marquées avec le mot-clé external. Elles indiquent au compilateur que l'implémentation de la fonction ou de la classe se trouve dans le code JavaScript, et non dans Kotlin. JetBrains fournit des ensembles de wrappers prêts à l'emploi pour les bibliothèques populaires dans le cadre de Kotlin Wrappers, notamment React, React Router, Redux, Emotion et MUI. Pour les bibliothèques sans wrappers prêts, le développeur peut écrire des déclarations externes manuellement ou utiliser le générateur de liaisons TypeScript Dukat.

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

// Déclaration externe pour bibliothèque JavaScript
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Travailler avec la compatibilité TypeScript

TypeScript fait partie intégrante du web moderne, et Kotlin/JS assure la compatibilité avec celui-ci via la génération de fichiers .d.ts. En définissant js.generateTsDeclarations = true, le compilateur crée des déclarations TypeScript pour toutes les fonctions et classes publiques Kotlin. Cela permet aux projets TypeScript d'importer des modules Kotlin avec une prise en charge complète des types. La génération de déclarations TypeScript fonctionne uniquement avec le backend IR et est l'une des principales raisons de migrer depuis l'ancien backend.

Backend IR de Kotlin/JS et avantages

Le backend IR (Intermediate Representation) est un backend unifié pour les trois plateformes Kotlin : JVM, JS et Native. Il utilise une représentation intermédiaire commune qui passe par plusieurs étapes d'optimisation avant de générer le code cible. Pour Kotlin/JS, le backend IR est devenu obligatoire à partir de Kotlin 1.8.0, remplaçant l'ancien backend basé sur AST qui a été marqué comme obsolète.

Les avantages du backend IR pour Kotlin/JS incluent une meilleure optimisation du code au niveau IR, une réduction de la taille du bundle grâce à l'élimination du code mort et aux optimisations inline, ainsi que la prise en charge des déclarations TypeScript. Le backend IR garantit également un traitement correct des fonctions inline, des génériques reified et des fonctions suspend lors de la traduction en JavaScript, ce qui était problématique dans l'ancien backend.

Exemples de code : configuration et développement

Un projet Kotlin/JS complet commence par la configuration de build.gradle.kts. Le plugin kotlin multiplatform permet de configurer Kotlin/JS comme l'une des plateformes cibles. Regardons un exemple de configuration pour une application web avec 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))
}

Après la configuration, il est possible d'écrire des composants React en Kotlin. Kotlin Wrappers fournit une API type-safe pour React, comprenant des composants fonctionnels, des hooks et une syntaxe similaire à JSX via des constructeurs DSL. L'exemple du composant Counter démontre l'utilisation de useState et des gestionnaires d'événements.

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

Compilation et déploiement

La compilation d'un projet Kotlin/JS s'effectue via des tâches Gradle. jsDevelopmentRun lance le serveur de développement Webpack avec HMR pour le développement. jsProductionExecutableCompileSync génère un bundle de production avec minification et élimination du code mort. Le fichier HTML final incluant le JavaScript compilé est généré par le plugin webpack et placé dans build/dist.

// Démarrer le serveur de développement avec HMR
./gradlew jsDevelopmentRun

// Compilation de production avec minification
./gradlew jsProductionExecutableCompileSync

// Sortie dans build/dist/productionExecutable/

Kotlin/JS vs TypeScript : comparaison

TypeScript est le principal concurrent de Kotlin/JS dans le domaine du JavaScript typé. Les deux langages se compilent en JavaScript et ajoutent un typage statique sur le JS dynamique. Cependant, Kotlin/JS offre plusieurs avantages : null safety par défaut, classes scellées, coroutines et intégration transparente avec Kotlin Multiplatform. TypeScript, quant à lui, possède une communauté plus large, plus de bibliothèques prêtes avec des types et un écosystème plus mature.

La productivité de développement avec Kotlin/JS peut être plus élevée pour les équipes qui utilisent déjà Kotlin dans d'autres parties du projet, car aucun changement de langage n'est nécessaire. TypeScript reste le choix le plus populaire pour les projets web purs où Kotlin Multiplatform n'est pas utilisé. Cependant, avec la popularité croissante de Compose Multiplatform pour le web, Kotlin/JS gagne du terrain comme alternative à React et Angular.

Le choix entre Kotlin/JS et TypeScript dépend du contexte du projet. Si l'équipe utilise déjà Kotlin Multiplatform ou prévoit de commencer, Kotlin/JS est un choix logique pour la partie frontend. Pour un projet web isolé, TypeScript reste une solution plus pragmatique en raison de la disponibilité des types prêts pour les bibliothèques JavaScript et d'un plus grand nombre de développeurs sur le marché.