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

مقدمة في WebAssembly وRust

WebAssembly (WASM) هو تنسيق تعليمات ثنائي منخفض المستوى يسمح بتشغيل كود عالي الأداء في المتصفح بسرعة شبه أصلية. Rust، مع نظام الملكية الخاص به وعدم وجود جامع للقمامة، هي لغة مثالية للترجمة إلى WebAssembly. في هذه المقالة، سننتقل من تثبيت الأدوات إلى إنشاء وحدة WASM كاملة بلغة Rust.

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

تثبيت الأدوات وإعداد البيئة

للبدء، ستحتاج إلى:

\n
• Rust (مثبتة عبر rustup)
\n
• المنصة المستهدفة wasm32-unknown-unknown
\n
• أداة wasm-pack (لبناء ونشر WASM)
\n
• خادم HTTP أساسي (مثل python3 -m http.server)
\n

تثبيت المنصة المستهدفة و wasm-pack:

# تثبيت المنصة المستهدفة لـ WebAssembly\nrustup target add wasm32-unknown-unknown\n\n# تثبيت wasm-pack\ncargo install wasm-pack

الآن لننشئ مشروعًا جديدًا:

cargo new --lib wasm-rust-demo\ncd wasm-rust-demo

افتح Cargo.toml وأضف التبعية:

[lib]\ncrate-type = ["cdylib"]\n\n[dependencies]\nwasm-bindgen = "0.2"

العلامة cdylib تشير إلى أننا ننشئ مكتبة ديناميكية متوافقة مع WebAssembly.

كتابة أول وحدة WASM بلغة Rust

لننشئ دالة بسيطة ستكون متاحة من JavaScript. قم بتحرير src/lib.rs:

use wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn greet(name: &str) -> String {\n    format!("مرحبًا، {}! أهلاً بك في عالم WebAssembly!", name)\n}\n\n#[wasm_bindgen]\npub fn fibonacci(n: u32) -> u32 {\n    match n {\n        0 => 0,\n        1 => 1,\n        _ => fibonacci(n - 1) + fibonacci(n - 2),\n    }\n}\n\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -> i32 {\n    a + b\n}

السمة #[wasm_bindgen] تسمح بتصدير الدوال إلى JavaScript. لاحظ: String يتم تحويلها تلقائيًا إلى سلسلة نصية في JavaScript.

الآن لنبني المشروع:

wasm-pack build --target web

بعد البناء، ستظهر الملفات في مجلد pkg:

\n
• wasm_rust_demo_bg.wasm — وحدة WASM المترجمة
\n
• wasm_rust_demo.js — غلاف JavaScript للاستيراد السهل
\n
• wasm_rust_demo.d.ts — تعريفات TypeScript
\n

التكامل مع JavaScript وHTML

أنشئ ملف index.html في جذر المشروع:

<!DOCTYPE html>\n<html lang="ar">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>عرض توضيحي Rust + WebAssembly</title>\n</head>\n<body>\n    <h1>مثال Rust + WebAssembly</h1>\n    \n    <div>\n        <h3>دالة الترحيب</h3>\n        <input type="text" id="nameInput" placeholder="أدخل الاسم" value="العالم">\n        <button id="greetBtn">ترحيب</button>\n        <p id="greetOutput"></p>\n    </div>\n\n    <div>\n        <h3>أرقام فيبوناتشي</h3>\n        <input type="number" id="fibInput" value="10" min="0" max="40">\n        <button id="fibBtn">احسب</button>\n        <p id="fibOutput"></p>\n    </div>\n\n    <script type="module">\n        import init, { greet, fibonacci, add } from './pkg/