Kotlin Academy · पाठ

Kotlin/WASM: ब्राउज़र के लिए WebAssembly में संकलन

Kotlin/WASM को लक्ष्य बनाएँ, JavaScript के साथ एकीकृत करें और ब्राउज़र परिवेश में चलाएँ।

पाठ 4, कुल 4 में से13 चरण

Kotlin/WASM: ब्राउज़र के लिए WebAssembly में संकलन, CoddyKit पर Kotlin Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Kotlin Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Kotlin Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Kotlin/WASM क्या है

Kotlin/WASM एक Kotlin संकलन लक्ष्य है, जो ब्राउज़र और सर्वर-पक्षीय WASM रनटाइम में चलाने के लिए WebAssembly (.wasm) मॉड्यूल बनाता है। यह Kotlin/JS से अलग है और गणना-प्रधान कोड के लिए बेहतर प्रदर्शन तथा छोटा बाइनरी आकार प्रदान करता है।

वर्तमान स्थिति (Kotlin 2.0)

Kotlin 2.0 के अनुसार, Kotlin/WASM WasmGC प्रस्ताव को लक्ष्य बनाता है—यह W3C मानक है, जो WebAssembly में कचरा-संग्रहित ऑब्जेक्ट को मूल रूप से उपलब्ध कराता है। WasmGC, Chrome 119+, Firefox 120+ और Safari 18+ में समर्थित है। Kotlin 2.1 से Kotlin/WASM स्थिर है।

Kotlin/WASM लक्ष्य सेट करना

अपने KMP build.gradle.kts में WASM लक्ष्य और एक निष्पादन योग्य बाइनरी घोषित करें:

kotlin {
    wasmJs {
        browser()
        binaries.executable()
    }
    sourceSets {
        val wasmJsMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-browser:0.3")
            }
        }
    }
}

WASM के लिए Kotlin कोड लिखना

Kotlin/WASM कोड सामान्य Kotlin जैसा दिखाई देता है। आप commonMain के माध्यम से अन्य KMP लक्ष्यों के साथ तर्क साझा कर सकते हैं। ब्राउज़र DOM तक पहुँच kotlinx-browser पुस्तकालय के माध्यम से मिलती है:

import kotlinx.browser.document
import kotlinx.browser.window

fun main() {
    val p = document.createElement("p")
    p.textContent = "Hello from Kotlin/WASM!"
    document.body!!.appendChild(p)
}

बनाना और चलाना

लाइव रीलोड के साथ विकास सर्वर शुरू करने के लिए ./gradlew wasmJsBrowserDevelopmentRun चलाएँ। उत्पादन बिल्ड के लिए: ./gradlew wasmJsBrowserDistribution। आउटपुट build/dist/wasmJs/productionExecutable/ में होता है।

Kotlin/WASM में JavaScript इंटरऑप

Kotlin फ़ंक्शन को JavaScript के लिए उपलब्ध कराने हेतु @JsExport का उपयोग करें। Kotlin से JavaScript API बुलाने के लिए external घोषणाओं का उपयोग करें:

external fun console_log(msg: String): Unit

@JsExport
fun add(a: Int, b: Int): Int = a + b

Kotlin/WASM बनाम Kotlin/JS

Kotlin/JS: JavaScript में रूपांतरित होता है—पूरे JS पारिस्थितिकी-तंत्र तक पहुँच, परिपक्व उपकरण और जहाँ JS चलता है वहाँ चलने की सुविधा। Kotlin/WASM: WebAssembly में संकलित होता है—गणना-प्रधान कोड के लिए तेज़ निष्पादन, प्रकार-सुरक्षित मेमोरी मॉडल और WasmGC के लिए ब्राउज़र समर्थन आवश्यक। सामान्य वेब अनुप्रयोगों के लिए Kotlin/JS का उपयोग करें; प्रदर्शन-प्रधान मॉड्यूल के लिए Kotlin/WASM पर विचार करें।

वेब के लिए Compose (WASM)

JetBrains का Compose Multiplatform, Android और Desktop पर उपयोग किए जाने वाले उन्हीं Compose API के साथ वेब UI बनाने के लिए Kotlin/WASM को लक्ष्य बनाता है। पूरा UI WASM के माध्यम से Canvas तत्व पर रेंडर होता है:

// build.gradle.kts with Compose Multiplatform
plugins { id("org.jetbrains.compose") }

// In wasmJsMain
@OptIn(ExperimentalComposeUiApi::class)
fun main() = CanvasBasedWindow("MyApp") {
    Text("Hello, Compose WASM!")
}

बाइनरी आकार और अनुकूलन

उत्पादन बिल्ड के दौरान WASM बाइनरी को wasm-opt से अनुकूलित किया जाता है। ट्री-शेकिंग, Kotlin मानक पुस्तकालय के अप्रयुक्त कोड को हटा देती है। सामान्य Kotlin/WASM के शुरुआती उदाहरण का संपीड़ित आकार 200–400 KB होता है। अधिकतम अनुकूलन के लिए binaryenArgs = listOf("-O3") सक्षम करें।

JVM और Native के साथ कोड साझा करना

Kotlin/WASM एक KMP लक्ष्य होने के कारण, commonMain में मौजूद डोमेन तर्क, एल्गोरिदम और डेटा मॉडल अपने-आप साझा हो जाते हैं। प्लेटफ़ॉर्म-विशिष्ट कोड (DOM हेरफेर, फ़ाइल इनपुट/आउटपुट) actual घोषणाओं का उपयोग करके wasmJsMain में रहता है।

सीमाएँ और आगे की योजना

वर्तमान सीमाएँ: NPM पैकेजों तक सीधी पहुँच नहीं है (JS इंटरऑप का उपयोग करें), Kotlin/JS की तुलना में डीबगर समर्थन सीमित है, और WasmGC के लिए ब्राउज़र समर्थन आवश्यक है (पुराने ब्राउज़र में उपलब्ध नहीं)। Kotlin टीम WASM के लिए उपकरणों, प्रदर्शन और मानक पुस्तकालय के समर्थन को सक्रिय रूप से बेहतर बना रही है।

त्वरित जाँच

Kotlin/WASM (Kotlin 2.0+) WebAssembly के किस प्रस्ताव को लक्ष्य बनाता है, जो WASM में कचरा-संग्रहित ऑब्जेक्ट को मूल रूप से सक्षम करता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: Kotlin/WASM

मुख्य बातें:

Kotlin/WASM, WasmGC प्रस्ताव के माध्यम से WebAssembly में संकलित होता है (Kotlin 2.1 में स्थिर)
KMP Gradle कॉन्फ़िगरेशन में wasmJs { browser(); binaries.executable() } घोषित करें
DOM तक पहुँच kotlinx-browser के माध्यम से; JS इंटरऑप external और @JsExport के माध्यम से
wasmJsBrowserDistribution से बिल्ड करें; विकास सर्वर के लिए wasmJsBrowserDevelopmentRun का उपयोग करें
डोमेन तर्क commonMain में साझा करें; प्लेटफ़ॉर्म-विशिष्ट कोड wasmJsMain में रखें

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 51
पाठ: 203

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Kotlin/WASM: ब्राउज़र के लिए WebAssembly में संकलन” पाठ निःशुल्क है?

हाँ — Kotlin Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Kotlin/WASM: ब्राउज़र के लिए WebAssembly में संकलन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Kotlin Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Kotlin/WASM: ब्राउज़र के लिए WebAssembly में संकलन” में मैं क्या सीखूँगा?

Kotlin/WASM को लक्ष्य बनाएँ, JavaScript के साथ एकीकृत करें और ब्राउज़र परिवेश में चलाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Kotlin Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Kotlin Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Kotlin Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“Kotlin/WASM: ब्राउज़र के लिए WebAssembly में संकलन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Kotlin Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Kotlin Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Kotlin/Native का परिचय: लक्ष्य, टूलचेन और संकलन
Kotlin/Native में मेमोरी प्रबंधन: नया MM
cinterop और .def फाइलों के साथ C इंटरऑप
Kotlin/WASM: ब्राउज़र के लिए WebAssembly में संकलन

← Kotlin Academy पर वापस जाएँ