Learn Rust Coding · درس

من Rust إلى WebAssembly (WASM)

ترجموا شيفرة Rust إلى WebAssembly، مما يتيح تشغيل وحدات عالية الأداء في متصفحات الويب وبيئات تشغيل WASM الأخرى.

من Rust إلى WebAssembly (WASM) درس مجاني في Learn Rust Coding على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Learn Rust Coding، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Learn Rust Coding 3 دروس في المجموع.

ما هي WebAssembly (WASM)؟

‏WebAssembly، أو WASM، هي صيغة تعليمات ثنائية لآلة افتراضية قائمة على المكدس. وقد صُممت لتكون هدف ترجمة محمولًا للغات عالية المستوى مثل Rust وC/C++ وGo.

فكّروا فيها كلغة منخفضة المستوى شبيهة بلغة التجميع، تعمل بكفاءة في متصفحات الويب وبيئات أخرى. وتتيح لكم تشغيل التعليمات البرمجية الحساسة للأداء بسرعات تقترب من السرعة الأصلية.

مزايا Rust في WASM

تُعدّ Rust خيارًا ممتازًا لتطوير WebAssembly بفضل نقاط قوتها الفريدة:

الأداء: تشتهر Rust بسرعتها التي تقترب من سرعة C/C++.
أمان الذاكرة: يمنع نظام الملكية في Rust الأخطاء الشائعة من دون الحاجة إلى جامع قمامة.
الملفات التنفيذية الصغيرة: تؤدي بيئة التشغيل الدنيا في Rust إلى وحدات WASM مدمجة.
الأدوات: دعم ممتاز باستخدام أدوات مثل wasm-pack وwasm-bindgen.

إعداد أدوات WASM

لتجميع Rust إلى WebAssembly، ستستخدم بشكل أساسي wasm-pack، وهي أداة لسطر الأوامر تتولى عملية البناء بأكملها.

ستستخدم أيضًا wasm-bindgen، وهي حزمة Rust وأداة لسطر الأوامر تيسّر التفاعلات عالية المستوى بين وحدات WASM وJavaScript.

لتثبيت wasm-pack، افتح الطرفية وشغّل:

cargo install wasm-pack

مشروع WASM الأول

لننشئ مشروع Rust جديدًا مخصصًا لـ WebAssembly. سنستخدم cargo generate مع قالب محدد:

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

اتبع التعليمات لتسمية مشروعك. يؤدي ذلك إلى إعداد ملف lib.rs جاهزًا لشفرة WASM، ومجلد www لواجهة ويب بسيطة.

دالة Rust لـ JavaScript

لجعل دالة Rust قابلة للاستدعاء من JavaScript، نستخدم السمة #[wasm_bindgen] من الحزمة wasm-bindgen.

توجّه هذه السمة wasm-bindgen إلى إنشاء شفرة الربط اللازمة كي تتفاعل JavaScript مع دالة Rust الخاصة بك.

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

دمج WASM مع JavaScript

بعد كتابة شفرة Rust، ستبنيها في وحدة WASM باستخدام wasm-pack build. ينشئ هذا الأمر مجلد pkg الذي يحتوي على ملف .wasm الخاص بك وشِفرة ربط JavaScript.

بعد ذلك، يمكنك في JavaScript استيراد دوال Rust المُصدَّرة واستخدامها بسهولة:

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

استدعاء Rust لـ JavaScript

يمكن لـ Rust أيضًا استدعاء دوال JavaScript. تُعلن عنها داخل كتلة extern "C" وتستخدم #[wasm_bindgen] لربطها بالكائنات أو الدوال العامة في JS.

تتيح لك الوسيطة js_namespace تحديد مكان العثور على الدالة في بيئة JavaScript، مثل الكائن console.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

تمرير السلاسل النصية بين Rust وJS

يتعامل wasm-bindgen بذكاء مع أنواع البيانات الشائعة مثل الأرقام والقيم المنطقية. أما السلاسل النصية، فيستخدم لها ترميز UTF-8.

عند تمرير &str أو String من Rust، يحوّلهما wasm-bindgen إلى String في JavaScript، والعكس صحيح. يجعل هذا التجريد قابلية التشغيل البيني سلسة.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

WASM خارج المتصفح

رغم ارتباط WebAssembly غالبًا بمتصفحات الويب، فإن WASM لا يقتصر عليها! توجد بيئات تشغيل WASM للعديد من البيئات، ما يتيح إمكانات جديدة:

الدوال عديمة الخادم: نشر دوال سريعة ومعزولة.
سلاسل الكتل: تنفيذ العقود الذكية.
الإضافات والملحقات: توسيع التطبيقات بأمان.
تطبيقات سطح المكتب: تضمين وحدات عالية الأداء.

يوسّع ذلك نطاق Rust إلى ما يتجاوز برمجة الأنظمة التقليدية بكثير.

المفاهيم الأساسية في WebAssembly

لنختبر مدى فهمك لـ Rust وWebAssembly.

مراجعة: من Rust إلى WASM

لقد تعلمت كيفية جلب أداء Rust وأمانها إلى WebAssembly!

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

واصل الاستكشاف لبناء تطبيقات ويب وتطبيقات أخرى قوية وعالية الأداء باستخدام Rust!

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

هل درس «من Rust إلى WebAssembly (WASM)» مجاني؟

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

ماذا ستتعلم في «من Rust إلى WebAssembly (WASM)»؟

ترجموا شيفرة Rust إلى WebAssembly، مما يتيح تشغيل وحدات عالية الأداء في متصفحات الويب وبيئات تشغيل WASM الأخرى. تتمرن على Learn Rust Coding مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Learn Rust Coding؟

لا تُشترط خبرة سابقة. Learn Rust Coding على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «من Rust إلى WebAssembly (WASM)»؟

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

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

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

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

← العودة إلى Learn Rust Coding