من Rust إلى WASM باستخدام wasm-pack وReact

تستخدم العملية القياسية لتحويل Rust إلى WASM أداتين: تنسّق wasm-pack عملية البناء، بما في ذلك ترجمة Rust إلى WASM وتشغيل wasm-bindgen وإنشاء حزمة npm، بينما تنشئ wasm-bindgen روابط JavaScript تتيح استدعاء دوال Rust كدوال JavaScript عادية مع التعامل السليم مع الأنواع.

تحدد السمة #[wasm_bindgen] دوال Rust وبُناها وأساليبها لتصديرها إلى JavaScript. ومن دونها، تُترجم الدالة إلى WASM لكنها لا تكون متاحة من JavaScript. وعند وسم دالة بالسمة #[wasm_bindgen]، ينشئ wasm-bindgen شيفرة الربط البرمجية لـ JavaScript التي تتولى تحويل الوسائط وقيم الإرجاع.

دالة Rust مُصدَّرة بأبسط صورة: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. تستقبل الدالة عددين صحيحين غير موقّعين بحجم 32 بت، وتعيد عددًا واحدًا. وينشئ wasm-bindgen شيفرة JavaScript تستدعي هذه الدالة بوسائط رقمية وتعيد نتيجة رقمية.

شغّلوا wasm-pack build --target web في دليل حزمة Rust. يترجم هذا الأمر شيفرة Rust إلى WASM، ويشغّل wasm-bindgen لإنشاء روابط JavaScript، وينتج دليل pkg/ يحتوي على الملف الثنائي .wasm ووحدة ربط برمجية لـ JavaScript وتعريفات للأنواع في TypeScript.

استوردوا الوحدة المُنشأة داخل مكوّن React: import init, { add } from '../pkg/my_lib'. تحمّل الدالة init الملف الثنائي لـ WASM وتُهيّئه، فاستدعُوها مرة واحدة داخل useEffect. وبعد التهيئة، استدعوا الدوال المصدَّرة مباشرةً: const result = add(2, 3).

بالنسبة إلى البيانات المعقدة التي تتجاوز الأرقام الأولية، يوفر wasm-bindgen الأنواع js_sys::Array (JavaScript Array) وjs_sys::Object (JavaScript Object) وwasm_bindgen::JsValue (أي قيمة JavaScript). وتتيح هذه الأنواع لدوال Rust قبول مصفوفات وكائنات JavaScript وإرجاعها، لكنها تنطوي على تكلفة تسلسل أكبر مقارنةً بالأنواع الأولية.

يتمثل مبدأ الأداء الأساسي في إبقاء البيانات في ذاكرة WASM وإجراء جميع العمليات الحسابية فيها. مرّر البيانات مرة واحدة، وأجرِ العمليات الحسابية، ثم أعد النتيجة النهائية فقط. تجنّب الأنماط التي تنقل البيانات مرارًا عبر حد WASM عند كل خطوة. قد يكون الحمل الناتج عن عبور الحد صغيرًا في كل مرة، لكنه يتراكم داخل الحلقات المكثفة.

تتيح حزمة serde-wasm-bindgen إجراء تسلسل لبُنى Rust وإلغاء تسلسلها من كائنات JavaScript وإليها باستخدام Serde. أضف إلى البنية التعليمة التوضيحية #[derive(Serialize, Deserialize)]، واستخدم serde_wasm_bindgen::to_value() وfrom_value(). هذا هو النهج القياسي لتمرير البيانات المركبة والمنظمة.

تحجب حسابات WASM طويلة الأمد الخيط الذي تعمل عليه. ضع WASM في Web Worker لإبقاء الخيط الرئيسي في React متاحًا. أنشئ ملف Worker يهيئ وحدة WASM ويتولى معالجة الرسائل. أرسل البيانات إلى العامل باستخدام postMessage، واستقبل النتائج عبر حدث message، ثم حدّث حالة React بالنتيجة.

ينشئ wasm-pack تلقائيًا ملفات تعريف TypeScript (.d.ts) لجميع الدوال والأنواع المُصدَّرة. وهذا يمنح مشروع React المكتوب بـ TypeScript أمانًا كاملًا للأنواع عند استدعاء دوال Rust. تعكس الأنواع المُنشأة توقيعات دوال Rust — add(a: number, b: number): number — ولذلك تعمل الإكمالات التلقائية في بيئة التطوير المتكاملة بشكل صحيح.

يتراوح حجم ملفات WASM الثنائية عادةً بين 100kb و2MB بعد التحسين. فعّل wasm-opt أثناء عملية البناء باستخدام ضبط opt-level = "z" في ملف تعريف الإصدار في Cargo.toml لإجراء تحسين مكثف للحجم. قدّم ملفات WASM باستخدام Content-Type: application/wasm، وفعّل HTTP/2 حتى يتمكن المتصفح من بث الملف الثنائي بكفاءة.

ما الغرض من السمة #[wasm_bindgen] في شيفرة Rust؟

يعمل الأمر wasm-pack build --target web على ترجمة Rust إلى WASM وإنشاء روابط JavaScript باستخدام wasm-bindgen. أضف السمة #[wasm_bindgen] إلى الدوال المُصدَّرة. استورد init والدوال المُصدَّرة في React، واستدعِ init() داخل useEffect، ثم استدعِ الدوال كما تستدعي دوال JavaScript العادية. استخدم serde-wasm-bindgen لتسلسل البُنى المعقدة. شغّل WASM في Web Workers عند إجراء حسابات طويلة للحفاظ على الخيط الرئيسي في React متاحًا.