العمل مع WebAssembly وKotlin: من الألف إلى الياء

مقدمة: لماذا WebAssembly وKotlin هما الثنائي المثالي

تتطلب تطوير الويب الحديث ليس فقط السرعة، بل الأمان أيضًا. WebAssembly (Wasm) هو تنسيق ثنائي منخفض المستوى يتم تنفيذه في المتصفح بسرعة تقترب من السرعة الأصلية. Kotlin، بدوره، هو لغة حديثة متعددة المنصات يتم ترجمتها إلى bytecode JVM وJavaScript، ومؤخرًا إلى WebAssembly.

الجمع بين Kotlin وWebAssembly يفتح آفاقًا جديدة: يمكنك كتابة منطق معقد بلغة مألوفة مع نظام أنواع قوي، ثم تشغيله في أي متصفح حديث دون تحميل زائد من JavaScript. في هذه المقالة، سنشرح العمل مع WebAssembly وKotlin من الألف إلى الياء: من تثبيت الأدوات إلى نشر التطبيق النهائي.

1. إعداد البيئة لـ Kotlin/Wasm

قبل كتابة الكود، يجب تجهيز البيئة. وقت كتابة هذه المقالة، الدعم الرسمي لـ Kotlin/Wasm في مرحلة تجريبية (بدءًا من Kotlin 1.9.20). للعمل، ستحتاج إلى:

\n
• JDK 11 أو أعلى (يوصى باستخدام JDK 17)
\n
• IntelliJ IDEA (النسخة المجتمعية كافية) أو أي محرر يدعم 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    // استخدام coroutines للاستدعاء غير المتزامن\n    GlobalScope.launch {\n        val result = factorial(10)\n        println("مضروب 10: $result")\n    }\n}

التعليمة @WasmExport تجعل الدالة متاحة من JavaScript. لاحظ: لا يمكن تصدير جميع أنواع Kotlin - الأنواع البدائية والسلاسل والمصفوفات هي المدعومة فقط.

البناء والتشغيل

نفذ أمر Gradle:

./gradlew wasmJsBrowserDevelopmentRun

بعد البناء، سيفتح المتصفح مع وحدة التحكم حيث سترى المخرجات. إذا نجحت العملية، فقد قمت للتو بتشغيل Kotlin في WebAssembly!

3. التفاعل مع JavaScript: جسر بين عالمين

إحدى الإمكانيات الرئيسية لـ Kotlin/Wasm هي التفاعل ثنائي الاتجاه مع JavaScript. يمكنك استدعاء دوال JS من Kotlin والعكس.

استدعاء JavaScript من Kotlin

أضف إلى Main.kt كودًا يستخدم واجهة DOM للمتصفح:

import org.w3c.dom.*\n\n@WasmExport\nfun showAlert(message: String) {\n    // استخدام الكائن العام window\n    window.alert("Kotlin go