Kotlin Academy · درس

Kotlin/WASM: الترجمة إلى WebAssembly للمتصفح

استهدف Kotlin/WASM، وادمجه مع JavaScript، وشغّله في بيئة متصفح

Kotlin/WASM: الترجمة إلى WebAssembly للمتصفح درس مجاني في Kotlin Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Kotlin Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Kotlin Academy 4 دروس في المجموع.

ما هي Kotlin/WASM؟

Kotlin/WASM هي هدف ترجمة لـ Kotlin يُنتج وحدات WebAssembly ‏(.wasm) لتنفيذها في المتصفحات وبيئات تشغيل WASM على الخادم. وهي منفصلة عن Kotlin/JS، وتوفّر أداءً أفضل وحجمًا ثنائيًا أصغر للشيفرة كثيفة العمليات الحسابية.

الحالة الحالية (Kotlin 2.0)

اعتبارًا من Kotlin 2.0، تستهدف Kotlin/WASM اقتراح WasmGC، وهو معيار من W3C يضيف كائنات مُدارة بجامع البيانات المهملة إلى WebAssembly بشكل أصلي. يدعم Chrome 119 والإصدارات الأحدث، وFirefox 120 والإصدارات الأحدث، وSafari 18 والإصدارات الأحدث WasmGC. أصبحت Kotlin/WASM مستقرة اعتبارًا من Kotlin 2.1.

إعداد هدف Kotlin/WASM

في ملف build.gradle.kts الخاص بـ KMP، صرّح عن هدف WASM وملف ثنائي قابل للتنفيذ:

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

كتابة شيفرة Kotlin لـ WASM

تبدو شيفرة Kotlin/WASM مثل شيفرة Kotlin العادية. يمكنك مشاركة المنطق مع أهداف KMP الأخرى عبر commonMain. ويكون الوصول إلى 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/.

التداخل مع JavaScript في Kotlin/WASM

استخدم @JsExport لإتاحة دوال Kotlin لـ JavaScript. واستخدم تصريحات external لاستدعاء واجهات JavaScript البرمجية من Kotlin:

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)

تستهدف Compose Multiplatform من JetBrains منصة Kotlin/WASM لبناء واجهات مستخدم للويب باستخدام واجهات Compose البرمجية نفسها المستخدمة على Android وDesktop. تُرسم واجهة المستخدم بالكامل إلى عنصر Canvas عبر WASM:

// 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 القياسية غير المستخدمة. يتراوح الحجم المعتاد لتطبيق hello-world بسيط بـ Kotlin/WASM بين 200 و400 كيلوبايت بعد ضغط gzip. فعّل binaryenArgs = listOf("-O3") لتحقيق أقصى تحسين.

مشاركة الشيفرة مع JVM وNative

بما أن Kotlin/WASM هدف من أهداف KMP، تتم مشاركة منطق المجال والخوارزميات ونماذج البيانات الموجودة في commonMain تلقائيًا. أما الشيفرة الخاصة بالمنصة، مثل معالجة DOM وإدخال الملفات وإخراجها، فتوجد في wasmJsMain باستخدام تصريحات actual.

القيود وخارطة الطريق

القيود الحالية: لا يوجد وصول مباشر إلى حزم NPM، لذا استخدم التداخل مع JS؛ ودعم أدوات تصحيح الأخطاء محدود مقارنةً بـ Kotlin/JS؛ كما يلزم دعم المتصفح لـ WasmGC، وهو غير متاح في المتصفحات الأقدم. يواصل فريق Kotlin تحسين الأدوات والأداء وتغطية المكتبة القياسية لـ WASM.

تحقّق سريعًا

ما اقتراح WebAssembly الذي تستهدفه Kotlin/WASM ‏(Kotlin 2.0 وما بعده)، والذي يتيح استخدام الكائنات المُدارة بجامع البيانات المهملة في WASM بشكل أصلي؟

مراجعة: Kotlin/WASM

أهم النقاط:

تُترجم Kotlin/WASM إلى WebAssembly عبر اقتراح WasmGC، وأصبحت مستقرة في Kotlin 2.1
صرّح عن wasmJs { browser(); binaries.executable() } في إعداد Gradle الخاص بـ KMP
يتم الوصول إلى DOM عبر kotlinx-browser، والتداخل مع JS عبر external و@JsExport
أنشئ التطبيق باستخدام wasmJsBrowserDistribution، وشغّل خادم التطوير باستخدام wasmJsBrowserDevelopmentRun
شارك منطق المجال في commonMain، وضع التفاصيل الخاصة بالمنصة في wasmJsMain

الأسئلة الشائعة

هل درس «Kotlin/WASM: الترجمة إلى WebAssembly للمتصفح» مجاني؟

نعم — نص درس «Kotlin/WASM: الترجمة إلى WebAssembly للمتصفح» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Kotlin Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Kotlin Academy 4 دروس في المجموع.

ماذا ستتعلم في «Kotlin/WASM: الترجمة إلى WebAssembly للمتصفح»؟

استهدف Kotlin/WASM، وادمجه مع JavaScript، وشغّله في بيئة متصفح تتمرن على Kotlin Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Kotlin Academy؟

لا تُشترط خبرة سابقة. Kotlin Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «Kotlin/WASM: الترجمة إلى WebAssembly للمتصفح»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Kotlin Academy هذا؟

نعم. كل درس في Kotlin Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

نظرة عامة على Kotlin/Native: الأهداف وسلسلة الأدوات والترجمة
إدارة الذاكرة في Kotlin/Native: مدير الذاكرة الجديد
التكامل مع C باستخدام cinterop وملفات .def
Kotlin/WASM: الترجمة إلى WebAssembly للمتصفح

← العودة إلى Kotlin Academy