Kotlin/JS — यह क्या है, JavaScript में कंपाइलर और विशेषताएं

Kotlin/JS क्या है?

Kotlin/JS Kotlin कंपाइलर के तीन बैकएंड में से एक है (JVM और Native के साथ), जो Kotlin कोड को JavaScript में अनुवाद करने के लिए डिज़ाइन किया गया है। JetBrains द्वारा विकसित, Kotlin/JS बाहरी घोषणाओं के माध्यम से JavaScript लाइब्रेरी के विशाल पारिस्थितिकी तंत्र तक पहुँच बनाए रखते हुए सख्त स्टैटिक टाइपिंग वाली भाषा में वेब एप्लिकेशन लिखने की अनुमति देता है। Kotlin 1.3 में पहले स्थिर रिलीज़ के बाद से, कंपाइलर एक प्रायोगिक बैकएंड से एक उत्पादन-तैयार उपकरण तक विकसित हुआ है जिसका उपयोग औद्योगिक परियोजनाओं में किया जाता है।

Kotlin/JS का मुख्य उद्देश्य JavaScript या TypeScript के बजाय Kotlin का उपयोग करके फ्रंटएंड विकास है। डेवलपर्स को Kotlin भाषा की सभी सुविधाएँ मिलती हैं: null safety, एक्सटेंशन फ़ंक्शन, डेटा क्लास, कोरूटीन और सील्ड क्लास। उत्पन्न JavaScript कोड किसी भी आधुनिक ब्राउज़र या Node.js वातावरण में चल सकता है। Kotlin/JS विशेष रूप से Kotlin Multiplatform परियोजनाओं में मूल्यवान है, जहाँ साझा मॉड्यूल (commonMain) मोबाइल और वेब दोनों एप्लिकेशन के लिए उपलब्ध है।

Kotlin/JS पारिस्थितिकी तंत्र में उपयोगकर्ता इंटरफेस बनाने के लिए फ्रेमवर्क शामिल हैं। वेब के लिए Compose Multiplatform अपने लक्ष्य बैकएंड के रूप में Kotlin/JS का उपयोग करता है, जो ब्राउज़र में चलने वाले घोषणात्मक UI घटकों को सक्षम करता है। वैकल्पिक समाधानों में React के लिए रैपर शामिल हैं — Kotlin Wrappers, जो React, React Router और Redux के लिए type-safe API प्रदान करते हैं।

Kotlin/JS कंपाइलर कैसे काम करता है

संकलन Kotlin/JS में कई परिवर्तन चरणों से गुज़रता है। स्रोत Kotlin कोड पहले एक मध्यवर्ती प्रतिनिधित्व (IR) में संकलित किया जाता है, फिर अनुकूलित किया जाता है, और अंत में JavaScript कोड उत्पन्न होता है। Kotlin 1.8 से, पुराने बैकएंड (AST-आधारित JsBackend) को पूरी तरह से IR बैकएंड से बदल दिया गया है, जो बेहतर अनुकूलन, छोटा आउटपुट कोड आकार और TypeScript अनुकूलता प्रदान करता है।

पहले, Kotlin/JS JsBackend का उपयोग करता था, जो सीधे AST (एब्सट्रैक्ट सिंटैक्स ट्री) के साथ काम करता था। इस दृष्टिकोण की सीमाएँ थीं: प्लेटफ़ॉर्म अनुकूलन का समर्थन करने में कठिनाई, सभी बैकएंड के लिए एकीकृत IR का अभाव, और TypeScript घोषणाएँ उत्पन्न करने में असमर्थता। IR बैकएंड में संक्रमण ने इन समस्याओं को हल किया, तीनों Kotlin बैकएंड में संकलन को एकीकृत किया और क्रॉस-बैकएंड अनुकूलन का मार्ग खोला।

Kotlin/JS संकलन मोड

Kotlin/JS दो बिल्ड मोड का समर्थन करता है जो आउटपुट कोड के प्रारूप और अनुकूलन को निर्धारित करते हैं। प्रोडक्शन मोड बंडलिंग, मिनिफिकेशन और ट्री-शेकिंग के लिए Webpack का उपयोग करता है। डेवलपमेंट मोड तेज़ विकास पुनरावृत्ति के लिए Hot Module Replacement का समर्थन करता है। मोड का चयन js.target कॉन्फ़िगरेशन के माध्यम से build.gradle.kts में कॉन्फ़िगर किया जाता है।

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

NPM और JavaScript लाइब्रेरी के साथ एकीकरण

Kotlin/JS का एकीकरण NPM पारिस्थितिकी तंत्र के साथ build.gradle.kts में एक विशेष DSL के माध्यम से कार्यान्वित किया जाता है। डेवलपर kotlin कॉन्फ़िगरेशन में npm निर्भरताएँ घोषित करता है, पैकेज का नाम और संस्करण निर्दिष्ट करता है। Kotlin/JS स्वचालित रूप से npm या yarn पैकेज मैनेजर के माध्यम से पैकेज प्राप्त करता है। JavaScript लाइब्रेरी तक type-safe पहुँच सुनिश्चित करने के लिए, बाहरी घोषणाओं का उपयोग किया जाता है जो Kotlin कंपाइलर के लिए लाइब्रेरी प्रकार और फ़ंक्शन का वर्णन करती हैं।

बाहरी घोषणाएँ Kotlin घोषणाएँ हैं जो external कीवर्ड से चिह्नित होती हैं। वे कंपाइलर को बताती हैं कि फ़ंक्शन या क्लास का कार्यान्वयन JavaScript कोड में है, Kotlin में नहीं। JetBrains Kotlin Wrappers के भाग के रूप में लोकप्रिय लाइब्रेरी के लिए तैयार रैपर सेट प्रदान करता है, जिसमें React, React Router, Redux, Emotion और MUI शामिल हैं। बिना तैयार रैपर वाली लाइब्रेरी के लिए, डेवलपर मैन्युअल रूप से बाहरी घोषणाएँ लिख सकता है या Dukat TypeScript बाइंडिंग जनरेटर का उपयोग कर सकता है।

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 सेट करने पर, कंपाइलर सभी सार्वजनिक Kotlin फ़ंक्शन और क्लास के लिए TypeScript घोषणाएँ बनाता है। यह TypeScript प्रोजेक्ट को पूर्ण प्रकार समर्थन के साथ Kotlin मॉड्यूल आयात करने की अनुमति देता है। TypeScript घोषणा निर्माण केवल IR बैकएंड के साथ काम करता है और पुराने बैकएंड से माइग्रेट करने के प्रमुख कारणों में से एक है।

Kotlin/JS IR बैकएंड और लाभ

IR बैकएंड (Intermediate Representation) तीनों Kotlin प्लेटफ़ॉर्म: JVM, JS और Native के लिए एक एकीकृत बैकएंड है। यह एक सामान्य मध्यवर्ती प्रतिनिधित्व का उपयोग करता है जो लक्ष्य कोड उत्पन्न करने से पहले कई अनुकूलन चरणों से गुज़रता है। Kotlin/JS के लिए, IR बैकएंड Kotlin 1.8.0 से अनिवार्य हो गया, जिसने पुराने AST-आधारित बैकएंड को बदल दिया जिसे पदावनत (deprecated) चिह्नित किया गया था।

Kotlin/JS के लिए IR बैकएंड के लाभों में IR स्तर पर बेहतर कोड अनुकूलन, डेड कोड एलिमिनेशन और इनलाइन अनुकूलन के माध्यम से बंडल आकार में कमी, साथ ही TypeScript घोषणाओं का समर्थन शामिल है। IR बैकएंड JavaScript में अनुवाद करते समय इनलाइन फ़ंक्शन, रिफाइड जेनेरिक और सस्पेंड फ़ंक्शन का सही प्रबंधन भी सुनिश्चित करता है, जो पुराने बैकएंड में समस्याग्रस्त था।

कोड उदाहरण: सेटअप और विकास

एक पूर्ण Kotlin/JS प्रोजेक्ट build.gradle.kts को कॉन्फ़िगर करने से शुरू होता है। 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))
}

कॉन्फ़िगरेशन के बाद, Kotlin में React घटक लिखे जा सकते हैं। Kotlin Wrappers React के लिए type-safe API प्रदान करते हैं, जिसमें फंक्शनल कंपोनेंट, हुक और DSL बिल्डर के माध्यम से JSX-जैसा सिंटैक्स शामिल है। 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 विकास के लिए HMR के साथ Webpack dev सर्वर शुरू करता है। jsProductionExecutableCompileSync मिनिफिकेशन और ट्री-शेकिंग के साथ प्रोडक्शन बंडल उत्पन्न करता है। संकलित JavaScript को शामिल करने वाली अंतिम HTML फ़ाइल webpack प्लगइन द्वारा उत्पन्न होती है और build/dist में रखी जाती है।

// HMR के साथ डेव सर्वर शुरू करें
./gradlew jsDevelopmentRun

// मिनिफिकेशन के साथ प्रोडक्शन बिल्ड
./gradlew jsProductionExecutableCompileSync

// build/dist/productionExecutable/ में आउटपुट

Kotlin/JS बनाम TypeScript: तुलना

TypeScript टाइप किए गए JavaScript के क्षेत्र में Kotlin/JS का मुख्य प्रतियोगी है। दोनों भाषाएँ JavaScript में संकलित होती हैं और डायनामिक JS के ऊपर स्टैटिक टाइपिंग जोड़ती हैं। हालाँकि, Kotlin/JS कई लाभ प्रदान करता है: डिफ़ॉल्ट रूप से null safety, सील्ड क्लास, कोरूटीन और Kotlin Multiplatform के साथ सहज एकीकरण। दूसरी ओर, TypeScript का बड़ा समुदाय, प्रकारों वाली अधिक तैयार लाइब्रेरी और अधिक परिपक्व पारिस्थितिकी तंत्र है।

Kotlin/JS पर विकास उत्पादकता उन टीमों के लिए अधिक हो सकती है जो पहले से ही परियोजना के अन्य भागों में Kotlin का उपयोग कर रही हैं, क्योंकि भाषाओं के बीच स्विच करने की आवश्यकता नहीं है। TypeScript शुद्ध वेब परियोजनाओं के लिए अधिक लोकप्रिय विकल्प बना हुआ है जहाँ Kotlin Multiplatform का उपयोग नहीं किया जाता है। हालाँकि, वेब के लिए Compose Multiplatform की बढ़ती लोकप्रियता के साथ, Kotlin/JS React और Angular के विकल्प के रूप में जमीन हासिल कर रहा है।

Kotlin/JS और TypeScript के बीच चुनाव परियोजना के संदर्भ पर निर्भर करता है। यदि टीम पहले से ही Kotlin Multiplatform का उपयोग कर रही है या शुरू करने की योजना बना रही है, तो Kotlin/JS फ्रंटएंड भाग के लिए तार्किक विकल्प है। एक पृथक वेब परियोजना के लिए, TypeScript JavaScript लाइब्रेरी के लिए तैयार प्रकारों की उपलब्धता और बाजार में डेवलपर्स की बड़ी संख्या के कारण अधिक व्यावहारिक समाधान बना हुआ है।