WebAssembly और Kotlin के साथ काम करना: A से Z तक

परिचय: क्यों WebAssembly और Kotlin एक आदर्श जोड़ी हैं

आधुनिक वेब विकास के लिए न केवल गति बल्कि सुरक्षा की भी आवश्यकता होती है। WebAssembly (Wasm) एक निम्न-स्तरीय बाइनरी प्रारूप है जो ब्राउज़र में नेटिव के करीब गति से चलता है। दूसरी ओर, Kotlin एक आधुनिक मल्टीप्लेटफ़ॉर्म भाषा है जो JVM बाइट-कोड, JavaScript और हाल ही में WebAssembly में संकलित होती है।

Kotlin और WebAssembly का संयोजन नए क्षितिज खोलता है: आप एक शक्तिशाली टाइप सिस्टम वाली परिचित भाषा में जटिल लॉजिक लिख सकते हैं, और फिर इसे JavaScript के ओवरहेड के बिना किसी भी आधुनिक ब्राउज़र में चला सकते हैं। इस लेख में हम WebAssembly और Kotlin के साथ A से Z तक काम करना समझेंगे: टूल्स की स्थापना से लेकर तैयार एप्लिकेशन को तैनात करने तक।

1. Kotlin/Wasm के लिए वातावरण सेटअप

कोड लिखने से पहले, वातावरण तैयार करना आवश्यक है। इस लेख को लिखने के समय, Kotlin/Wasm के लिए आधिकारिक समर्थन प्रायोगिक चरण में है (Kotlin 1.9.20 से शुरू)। काम करने के लिए आवश्यक है:

\n
• JDK 11 या उच्चतर (JDK 17 अनुशंसित)
\n
• IntelliJ IDEA (Community Edition काम करेगा) या Gradle समर्थन वाला कोई भी संपादक
\n
• Kotlin का नवीनतम संस्करण (1.9.22+)।
\n

प्रोजेक्ट बनाना

मल्टीप्लेटफ़ॉर्म कॉन्फ़िगरेशन के साथ एक नया Gradle प्रोजेक्ट बनाएँ। build.gradle.kts फ़ाइल में प्लगइन्स और Wasm लक्ष्य निर्दिष्ट करें:

plugins {\n    kotlin("multiplatform") version "1.9.22"\n    kotlin("plugin.serialization") version "1.9.22" // वैकल्पिक\n}\n\nkotlin {\n    wasmJs {\n        binaries.executable()\n        nodejs()\n        browser {\n            commonWebpackConfig {\n                cssSupport {\n                    enabled.set(true)\n                }\n            }\n        }\n    }\n\n    sourceSets {\n        val commonMain by getting\n        val wasmJsMain by getting {\n            dependencies {\n                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")\n            }\n        }\n    }\n}

Gradle सिंक्रोनाइज़ेशन के बाद, प्रोजेक्ट संरचना Wasm में संकलन के लिए तैयार हो जाएगी।

2. Kotlin/Wasm पर पहला प्रोग्राम लिखना

एक सरल मॉड्यूल बनाएँ जो किसी संख्या का फैक्टोरियल निकालता है - Wasm के प्रदर्शन को प्रदर्शित करने के लिए एक आदर्श उदाहरण।

Kotlin कोड

src/wasmJsMain/kotlin फ़ोल्डर में Main.kt फ़ाइल बनाएँ:

import kotlinx.coroutines.*\n\n// फ़ंक्शन जो Wasm में निर्यात किया जाएगा\n@WasmExport\nfun factorial(n: Int): Long {\n    if (n < 0) return -1L\n    var result = 1L\n    for (i in 2..n) {\n        result *= i\n    }\n    return result\n}\n\n// ब्राउज़र के लिए प्रवेश बिंदु\nfun main() {\n    println("Kotlin/Wasm लोड हो गया!")\n    // एसिंक्रोनस कॉल के लिए कोरूटीन का उपयोग करें\n    GlobalScope.launch {\n        val result = factorial(10)\n        println("10 का फैक्टोरियल: $result")\n    }\n}

@WasmExport एनोटेशन फ़ंक्शन को JavaScript से सुलभ बनाता है। ध्यान दें: सभी Kotlin प्रकार निर्यात नहीं किए जा सकते - प्रिमिटिव, स्ट्रिंग और ऐरे समर्थित हैं।

बिल्ड और रन

Gradle कमांड निष्पादित करें:

./gradlew wasmJsBrowserDevelopmentRun

बिल्ड के बाद, कंसोल के साथ एक ब्राउज़र खुलेगा जहाँ आप आउटपुट देखेंगे। यदि सब कुछ सफल रहा, तो आपने अभी-अभी WebAssembly में Kotlin चलाया है!

3. JavaScript के साथ इंटरैक्शन: दो दुनियाओं के बीच पुल

Kotlin/Wasm की प्रमुख विशेषताओं में से एक JavaScript के साथ दो-तरफ़ा इंटरैक्शन है। आप Kotlin से JS फ़ंक्शन कॉल कर सकते हैं और इसके विपरीत।

Kotlin से JavaScript कॉल करना

Main.kt में वह कोड जोड़ें जो ब्राउज़र के DOM API का उपयोग करता है:

import org.w3c.dom.*\n\n@WasmExport\nfun showAlert(message: String) {\n    // ग्लोबल window ऑब्जेक्ट का उपयोग करें\n    window.alert("Kotlin गो