Kotlin/JS — τι είναι, μεταγλωττιστής σε JavaScript και χαρακτηριστικά

Τι είναι το Kotlin/JS;

Kotlin/JS — είναι ένα από τα τρία backend του μεταγλωττιστή Kotlin (μαζί με JVM και Native), που προορίζεται για τη μετατροπή κώδικα Kotlin σε JavaScript. Αναπτυγμένο από τη JetBrains, το Kotlin/JS επιτρέπει τη σύνταξη εφαρμογών ιστού σε γλώσσα με αυστηρή στατική τυποποίηση, διατηρώντας παράλληλα πρόσβαση στο τεράστιο οικοσύστημα βιβλιοθηκών JavaScript μέσω του μηχανισμού εξωτερικών δηλώσεων. Από την πρώτη σταθερή έκδοση στο Kotlin 1.3, ο μεταγλωττιστής εξελίχθηκε από ένα πειραματικό backend σε ένα εργαλείο έτοιμο για παραγωγή, που χρησιμοποιείται σε βιομηχανικά έργα.

Ο κύριος σκοπός του Kotlin/JS — ανάπτυξη frontend με χρήση Kotlin αντί για JavaScript ή TypeScript. Οι προγραμματιστές λαμβάνουν όλες τις δυνατότητες της γλώσσας Kotlin: null safety, συναρτήσεις επέκτασης, κλάσεις δεδομένων, coroutine και sealed κλάσεις. Ο παραγόμενος κώδικας JavaScript μπορεί να εκτελεστεί σε οποιοδήποτε σύγχρονο πρόγραμμα περιήγησης ή σε περιβάλλον Node.js. Το Kotlin/JS είναι ιδιαίτερα περιζήτητο σε έργα Kotlin Multiplatform, όπου το κοινό module (commonMain) είναι διαθέσιμο τόσο για εφαρμογές κινητών όσο και για εφαρμογές ιστού.

Το οικοσύστημα Kotlin/JS περιλαμβάνει πλαίσια για τη δημιουργία διεπαφών χρήστη. Το Compose Multiplatform για τον ιστό χρησιμοποιεί το Kotlin/JS ως backend στόχο, επιτρέποντας τη δημιουργία δηλωτικών στοιχείων UI που λειτουργούν στο πρόγραμμα περιήγησης. Εναλλακτικές λύσεις περιλαμβάνουν περιτυλίγματα για React — Kotlin Wrappers, που παρέχουν type-safe API για React, React Router και Redux.

Πώς λειτουργεί ο μεταγλωττιστής Kotlin/JS

Μεταγλώττιση Το Kotlin/JS περνά από διάφορα στάδια μετασχηματισμού. Ο πηγαίος κώδικας Kotlin πρώτα μεταγλωττίζεται σε ενδιάμεση αναπαράσταση (IR), στη συνέχεια βελτιστοποιείται και δημιουργείται κώδικας JavaScript. Από το Kotlin 1.8, το παλιό backend (JsBackend βασισμένο σε AST) έχει αντικατασταθεί πλήρως από το IR-backend, το οποίο παρέχει καλύτερη βελτιστοποίηση, μικρότερο μέγεθος κώδικα εξόδου και συμβατότητα με TypeScript.

Προηγουμένως, το Kotlin/JS χρησιμοποιούσε το JsBackend, το οποίο λειτουργούσε απευθείας με το δέντρο AST (Abstract Syntax Tree). Αυτή η προσέγγιση είχε περιορισμούς: πολυπλοκότητα υποστήριξης βελτιστοποιήσεων πλατφόρμας, έλλειψη ενοποιημένου IR για όλα τα backend και αδυναμία δημιουργίας δηλώσεων TypeScript. Η μετάβαση στο IR-backend έλυσε αυτά τα προβλήματα, ενοποιώντας τη μεταγλώττιση και των τριών backend του Kotlin και ανοίγοντας το δρόμο για βελτιστοποιήσεις μεταξύ backend.

Λειτουργίες μεταγλώττισης Kotlin/JS

Kotlin/JS υποστηρίζει δύο λειτουργίες μεταγλώττισης που καθορίζουν τη μορφή και τη βελτιστοποίηση του κώδικα εξόδου. Η λειτουργία production χρησιμοποιεί Webpack για μεταγλώττιση, σμίκρυνση και tree-shaking. Η λειτουργία development υποστηρίζει Hot Module Replacement για γρήγορη επανάληψη ανάπτυξης. Η επιλογή λειτουργίας ρυθμίζεται στο build.gradle.kts μέσω της διαμόρφωσης js.target.

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

Ενσωμάτωση με NPM και βιβλιοθήκες JavaScript

Ενσωμάτωση του Kotlin/JS με το οικοσύστημα NPM υλοποιείται μέσω ειδικού DSL στο build.gradle.kts. Ο προγραμματιστής δηλώνει εξαρτήσεις npm στη διαμόρφωση kotlin, προσδιορίζοντας το όνομα πακέτου και την έκδοση. Το Kotlin/JS κατεβάζει αυτόματα πακέτα μέσω του διαχειριστή πακέτων npm ή yarn. Για την παροχή type-safe πρόσβασης σε βιβλιοθήκες JavaScript, χρησιμοποιούνται external δηλώσεις, οι οποίες περιγράφουν τους τύπους και τις συναρτήσεις της βιβλιοθήκης για τον μεταγλωττιστή Kotlin.

External δηλώσεις — δηλώσεις Kotlin επισημασμένες με τη λέξη-κλειδί external. Ενημερώνουν τον μεταγλωττιστή ότι η υλοποίηση της συνάρτησης ή της κλάσης βρίσκεται σε κώδικα JavaScript, όχι σε Kotlin. Η JetBrains παρέχει έτοιμα σύνολα περιτυλιγμάτων για δημοφιλείς βιβλιοθήκες στο πλαίσιο των Kotlin Wrappers, συμπεριλαμβανομένων των React, React Router, Redux, Emotion και MUI. Για βιβλιοθήκες που δεν έχουν έτοιμα περιτυλίγματα, ο προγραμματιστής μπορεί να γράψει external δηλώσεις χειροκίνητα ή να χρησιμοποιήσει τη γεννήτρια δεσμεύσεων TypeScript Dukat.

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

// Εξωτερική δήλωση για βιβλιοθήκη JavaScript
@JsModule("date-fns")
external fun formatDistance(
    date: Date, baseDate: Date
): String

Εργασία με συμβατότητα TypeScript

TypeScript — αναπόσπαστο μέρος του σύγχρονου ιστού, και το Kotlin/JS εξασφαλίζει συμβατότητα με αυτό μέσω της δημιουργίας αρχείων .d.ts. Όταν ορίζεται το js.generateTsDeclarations = true, ο μεταγλωττιστής δημιουργεί δηλώσεις TypeScript για όλες τις δημόσιες συναρτήσεις και κλάσεις Kotlin. Αυτό επιτρέπει σε έργα TypeScript να εισάγουν modules Kotlin με πλήρη υποστήριξη τύπων. Η δημιουργία δηλώσεων TypeScript λειτουργεί μόνο με IR-backend και είναι ένας από τους βασικούς λόγους μετεγκατάστασης από το παλιό backend.

IR-backend Kotlin/JS και πλεονεκτήματα

IR-backend (Intermediate Representation) — ενοποιημένο backend και για τις τρεις πλατφόρμες Kotlin: JVM, JS και Native. Χρησιμοποιεί κοινή ενδιάμεση αναπαράσταση που περνά από διάφορα στάδια βελτιστοποίησης πριν από τη δημιουργία κώδικα στόχου. Για το Kotlin/JS, το IR-backend έγινε υποχρεωτικό από το Kotlin 1.8.0, αντικαθιστώντας το παλιό backend βασισμένο σε AST που είχε επισημανθεί ως deprecated.

Τα πλεονεκτήματα του IR-backend για το Kotlin/JS περιλαμβάνουν βελτιωμένη βελτιστοποίηση κώδικα σε επίπεδο IR, μείωση του μεγέθους του bundle μέσω εξάλειψης νεκρού κώδικα και βελτιστοποιήσεων inline, καθώς και υποστήριξη για δηλώσεις TypeScript. Το IR-backend εξασφαλίζει επίσης σωστή επεξεργασία inline συναρτήσεων, reified generics και suspend συναρτήσεων κατά τη μετατροπή σε JavaScript, κάτι που ήταν προβληματικό στο παλιό backend.

Παραδείγματα κώδικα: διαμόρφωση και ανάπτυξη

Ένα πλήρες έργο Kotlin/JS ξεκινά με τη διαμόρφωση του build.gradle.kts. Το plugin kotlin multiplatform επιτρέπει τη ρύθμιση του Kotlin/JS ως μία από τις πλατφόρμες στόχους. Ας εξετάσουμε ένα παράδειγμα διαμόρφωσης για μια εφαρμογή ιστού με 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))
}

Μετά τη διαμόρφωση, μπορούν να γραφτούν στοιχεία React σε Kotlin. Τα Kotlin Wrappers παρέχουν type-safe API για React, συμπεριλαμβανομένων λειτουργικών στοιχείων, hooks και σύνταξης παρόμοιας με JSX μέσω κατασκευαστών DSL. Το παράδειγμα του στοιχείου Counter δείχνει την εργασία με useState και χειρισμό συμβάντων.

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

Δημιουργία και ανάπτυξη

Η δημιουργία του έργου Kotlin/JS πραγματοποιείται μέσω εργασιών Gradle. Το jsDevelopmentRun εκκινεί τον διακομιστή ανάπτυξης Webpack με HMR για ανάπτυξη. Το jsProductionExecutableCompileSync δημιουργεί bundle παραγωγής με σμίκρυνση και tree-shaking. Το τελικό αρχείο HTML που συνδέει το μεταγλωττισμένο JavaScript δημιουργείται από το plugin webpack και βρίσκεται στο build/dist.

// Εκκίνηση διακομιστή ανάπτυξης με HMR
./gradlew jsDevelopmentRun

// Δημιουργία παραγωγής με σμίκρυνση
./gradlew jsProductionExecutableCompileSync

// Έξοδος στο build/dist/productionExecutable/

Kotlin/JS vs TypeScript: σύγκριση

TypeScript — ο κύριος ανταγωνιστής του Kotlin/JS στον τομέα της τυποποιημένης JavaScript. Και οι δύο γλώσσες μεταγλωττίζονται σε JavaScript και προσθέτουν στατική τυποποίηση πάνω από τη δυναμική JS. Ωστόσο, το Kotlin/JS προσφέρει μια σειρά από πλεονεκτήματα: null safety από προεπιλογή, sealed κλάσεις, coroutine και απρόσκοπτη ενσωμάτωση με Kotlin Multiplatform. Το TypeScript, από την πλευρά του, έχει μεγαλύτερη κοινότητα, περισσότερες έτοιμες βιβλιοθήκες με τύπους και πιο ώριμο οικοσύστημα.

Η παραγωγικότητα ανάπτυξης με Kotlin/JS μπορεί να είναι υψηλότερη για ομάδες που ήδη χρησιμοποιούν Kotlin σε άλλα μέρη του έργου, καθώς δεν απαιτείται εναλλαγή μεταξύ γλωσσών. Το TypeScript παραμένει η πιο δημοφιλής επιλογή για καθαρά έργα ιστού όπου δεν χρησιμοποιείται Kotlin Multiplatform. Ωστόσο, με την αυξανόμενη δημοτικότητα του Compose Multiplatform για τον ιστό, το Kotlin/JS κερδίζει έδαφος ως εναλλακτική λύση για React και Angular.

Η επιλογή μεταξύ Kotlin/JS και TypeScript εξαρτάται από το πλαίσιο του έργου. Εάν η ομάδα χρησιμοποιεί ήδη Kotlin Multiplatform ή σχεδιάζει να ξεκινήσει, το Kotlin/JS είναι η λογική επιλογή για το τμήμα frontend. Για ένα μεμονωμένο έργο ιστού, το TypeScript παραμένει η πιο πρακτική λύση λόγω της διαθεσιμότητας έτοιμων τύπων για βιβλιοθήκες JavaScript και του μεγαλύτερου αριθμού προγραμματιστών στην αγορά.