1~
2بدأ WebAssembly (WASM) كطريقة لتشغيل C++ في المتصفح. في عام 2026، يعمل في كل مكان  -  المتصفحات، الخوادم، شبكات الحافة، الأجهزة المدمجة  -  ويشغّل بعضاً من أكثر التطبيقات تطلباً على الويب. محرك العرض في Figma، وAdobe Photoshop على الويب، ومعالجة الفيديو في Google Meet، ومنصة الحوسبة الحافية في Cloudflare جميعها تعمل على WebAssembly.
3~
4وفقاً لـ Chrome Platform Status، يمثل WASM ما يقرب من 5.5% من جميع تحميلات صفحات Chrome في أوائل 2026، ارتفاعاً من 4.5% في العام السابق. مع أن WASM 3.0 أصبح معيار W3C ونضوج WASI نحو الإصدار 1.0، وصل النظام البيئي إلى نقطة تحول.
5~
6يغطي هذا الدليل كل ما تحتاج معرفته للبدء في البناء باستخدام WebAssembly.
7~
8## ما هو WebAssembly؟
9~
10WebAssembly هو تنسيق تعليمات ثنائي مصمم كهدف للتجميع. تكتب الكود بلغة عالية المستوى (Rust, C, C++, Go, Kotlin)، تجمّعه إلى `.wasm`، وتشغّله في أي بيئة تحتوي على بيئة تشغيل WASM  -  المتصفحات، Node.js، Cloudflare Workers، Wasmtime، أو Wasmer.
11~
12```mermaid
13graph LR
14    Rust[Rust / C / C++] --> Compiler[Compiler]
15    Compiler --> WASM[.wasm Binary]
16    WASM --> Browser[Browser V8/SpiderMonkey]
17    WASM --> Server[Server Wasmtime]
18    WASM --> Edge[Edge Cloudflare Workers]
19    WASM --> Embedded[Embedded WAMR]
20```
21~
22### كيف يعمل
23~
24WASM هو **آلة افتراضية قائمة على المكدس (stack-based virtual machine)**. تدفع الدوال القيم وتسحبها من مكدس المعاملات. بيئة التشغيل المضيفة (V8 في Chrome، SpiderMonkey في Firefox) تجمّع بايت كود WASM إلى كود آلة أصلي بتقنية JIT، وهذا هو سبب أن الأداء قريب من الأداء الأصلي.
25~
26الخصائص الرئيسية:
27~
28- **التنفيذ المعزول (Sandboxed execution)**: يمكن لوحدات WASM الوصول فقط إلى الموارد التي يمنحها المضيف صراحةً. لا نظام ملفات، لا شبكة، لا وصول لنظام التشغيل ما لم يُسمح بذلك. هذا مختلف جذرياً عن الكود الأصلي.
29- **الذاكرة الخطية (Linear memory)**: `ArrayBuffer` واحد متصل مشترك بين WASM والمضيف. البيانات المعقدة (النصوص، الهياكل) تُمرر بالكتابة في الذاكرة ومشاركة المؤشر.
30- **محدود الأنواع (Type-limited)**: يدعم WASM أصلياً أربعة أنواع فقط: `i32`، `i64`، `f32`، `f64`. كل شيء آخر (النصوص، المصفوفات، الكائنات) يتطلب الترميز عبر الذاكرة الخطية أو Component Model.
31- **قابل للنقل (Portable)**: نفس ملف `.wasm` الثنائي يعمل على أي منصة تحتوي على بيئة تشغيل WASM، دون إعادة تجميع.
32~
33### WASM مقابل JavaScript
34~
35WASM لا يحل محل JavaScript. إنه يكمّله.
36~
37| الجانب | JavaScript | WebAssembly |
38|--------|-----------|-------------|
39| **التحليل** | تحليل + تجميع أثناء التشغيل | ثنائي مجمّع مسبقاً، فك تشفير فقط |
40| **سرعة التنفيذ** | محسّن بـ JIT، متغير | قريب من الأصلي، متسق |
41| **بدء التشغيل** | سريع للنصوص الصغيرة | فك تشفير سريع، متوقع |
42| **وصول DOM** | مباشر | غير مباشر (عبر كود JS الوسيط) |
43| **الأفضل لـ** | UI، معالجة DOM، معالجة الأحداث | الحسابات كثيفة المعالج |
44| **جمع المخلفات** | مدمج | WasmGC (جديد)، أو يدوي |
45~
46استخدم JavaScript لأعمال واجهة المستخدم وDOM. استخدم WASM للحسابات الثقيلة: معالجة الصور، ترميز الفيديو، محاكاة الفيزياء، التشفير، تحليل البيانات.
47~
48## WASM 3.0: ما الجديد
49~
50أصبح WebAssembly 3.0 معيار W3C في سبتمبر 2025، حيث وحّد تسع ميزات كانت قيد التطوير لسنوات.
51~
52| الميزة | ما تتيحه |
53|---------|----------------|
54| **WasmGC** | جمع مخلفات أصلي في WASM. اللغات المُدارة (Java, Kotlin, Dart) يمكنها التجميع إلى WASM دون شحن بيئة تشغيل GC خاصة بها. مدعوم في Chrome 119+، Firefox 120+، Safari 18.2+. |
55| **Exception Handling** | `try`/`catch` أصلي في WASM. سابقاً، كانت الاستثناءات تتطلب رحلات ذهاب وإياب مكلفة إلى JavaScript. |
56| **Tail Calls** | تمكين العودية الفعالة دون تجاوز المكدس. حاسم للغات الوظيفية. |
57| **Relaxed SIMD** | تعليمات متجهات 128 بت لمعالجة البيانات المتوازية. تمكين تحسينات خاصة بالعتاد. |
58| **Memory64** | يكسر حد الذاكرة الخطية 4GB. مطلوب لمعالجة البيانات واسعة النطاق. |
59| **Multi-memory** | مناطق ذاكرة مستقلة متعددة في وحدة واحدة. |
60~
61الأكثر تأثيراً هو **WasmGC**. قبله، كان تجميع Java أو Kotlin إلى WASM يعني شحن جامع مخلفات كامل كجزء من الملف الثنائي، مما يضخم حجم الملفات. الآن يتولى جامع المخلفات الخاص بالمتصفح إدارة الذاكرة لوحدات WASM، تماماً كما يفعل مع JavaScript.
62~
63## WASI: ‏WebAssembly خارج المتصفح
64~
65WASM في المتصفح قوي، لكن **WASI (واجهة نظام WebAssembly)** هو ما يجعل WASM بيئة تشغيل عالمية. يوفر WASI واجهات موحدة لموارد النظام  -  الملفات، الشبكات، الساعات، الأرقام العشوائية  -  مما يسمح لوحدات WASM بالعمل خارج المتصفح.
66~
67```mermaid
68graph TD
69    subgraph "Browser"
70        B[WASM Module] --> Web[Web APIs\nDOM, Fetch, Canvas]
71    end
72~
73    subgraph "Server / Edge / Embedded"
74        S[WASM Module] --> WASI[WASI Interfaces]
75        WASI --> FS[wasi:filesystem]
76        WASI --> Net[wasi:sockets]
77        WASI --> HTTP[wasi:http]
78        WASI --> Clock[wasi:clocks]
79        WASI --> Rand[wasi:random]
80    end
81```
82~
83يحدد WASI Preview 2 (الإصدار المستقر الحالي) هذه الواجهات:
84~
85- `wasi:filesystem`  -  عمليات الملفات عبر مقابض القدرات (ليس واصفات الملفات التقليدية)
86- `wasi:sockets`  -  شبكات TCP/UDP
87- `wasi:http`  -  معالجة طلبات/استجابات HTTP
88- `wasi:clocks`  -  ساعة الحائط، الساعة الرتيبة
89- `wasi:random`  -  عشوائية تشفيرية
90- `wasi:cli`  -  وسائط سطر الأوامر، متغيرات البيئة، stdio
91~
92المبدأ الأساسي هو **الأمان القائم على القدرات (capability-based security)**: لا يمكن لوحدة WASM الوصول إلى نظام الملفات ما لم يمنح المضيف صراحةً مقبضاً لمجلد محدد. هذا يجعل WASI أكثر أماناً جذرياً من تشغيل الملفات التنفيذية الأصلية.
93~
94### الطريق إلى WASI 1.0
95~
96من المتوقع صدور WASI 0.3.0 (إضافة أوليات async/concurrency) في 2026، يليه WASI 1.0. الإضافة الرئيسية هي async مدمج في اللغة مع تدفق I/O بدون نسخ.
97~
98## Component Model
99~
100وحدات WASM الأساسية يمكنها تبادل الأرقام فقط. **Component Model** يحل هذا القيد بإضافة نظام أنواع غني وطبقة قابلية التركيب فوق WASM.
101~
102### WIT (أنواع واجهة WebAssembly)
103~
104WIT هي لغة تعريف واجهات تتيح للمكونات الإعلان عن وارداتها وصادراتها بأنواع غنية  -  نصوص، سجلات، قوائم، متغيرات، تعدادات  -  ليس فقط `i32` و `f64`.
105~
106```wit
107// calculator.wit
108package myorg:calculator@1.0.0;
109~
110interface operations {
111    record calculation {
112        expression: string,
113        result: f64,
114        timestamp: u64,
115    }
116~
117    add: func(a: f64, b: f64) -> f64;
118    multiply: func(a: f64, b: f64) -> f64;
119    history: func() -> list<calculation>;
120}
121~
122world calculator {
123    export operations;
124}
125```
126~
127سلاسل الأدوات مثل `wit-bindgen` تولّد ربطاً خاصة باللغة من ملفات WIT. يمكن لمكون Rust ومكون Python تبادل النصوص والسجلات والقوائم عبر عقود WIT دون أن يعرف أي طرف لغة تنفيذ الطرف الآخر.
128~
129## بناء أول وحدة WASM باستخدام Rust
130~
131يمتلك Rust أنضج أدوات WASM. لنبنِ مثالاً عملياً: وحدة معالجة صور تعمل في المتصفح.
132~
133### الإعداد
134~
135```bash
136# Install the WASM target for Rust
137rustup target add wasm32-unknown-unknown
138~
139# Install wasm-pack (builds Rust to WASM + generates JS bindings)
140cargo install wasm-pack
141~
142# Create a new library project
143cargo new --lib image-processor
144cd image-processor
145```
146~
147### تكوين Cargo.toml
148~
149```toml
150[package]
151name = "image-processor"
152version = "0.1.0"
153edition = "2021"
154~
155[lib]
156crate-type = ["cdylib"]
157~
158[dependencies]
159wasm-bindgen = "0.2"
160```
161~
162### كتابة كود Rust
163~
164```rust
165// src/lib.rs
166use wasm_bindgen::prelude::*;
167~
168/// Convert an image buffer to grayscale.
169/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
170/// Output: Modified in place for zero-copy performance.
171#[wasm_bindgen]
172pub fn grayscale(pixels: &mut [u8]) {
173    for chunk in pixels.chunks_exact_mut(4) {
174        let r = chunk[0] as f32;
175        let g = chunk[1] as f32;
176        let b = chunk[2] as f32;
177        // ITU-R BT.709 luminance coefficients
178        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
179        chunk[0] = gray;
180        chunk[1] = gray;
181        chunk[2] = gray;
182        // chunk[3] is alpha, leave unchanged
183    }
184}
185~
186/// Adjust brightness of an image.
187/// factor > 1.0 brightens, < 1.0 darkens.
188#[wasm_bindgen]
189pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
190    for chunk in pixels.chunks_exact_mut(4) {
191        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
192        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
193        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
194    }
195}
196~
197/// Invert all colors in the image.
198#[wasm_bindgen]
199pub fn invert(pixels: &mut [u8]) {
200    for chunk in pixels.chunks_exact_mut(4) {
201        chunk[0] = 255 - chunk[0];
202        chunk[1] = 255 - chunk[1];
203        chunk[2] = 255 - chunk[2];
204    }
205}
206~
207/// Calculate the average brightness of an image (0-255).
208#[wasm_bindgen]
209pub fn average_brightness(pixels: &[u8]) -> f32 {
210    let mut total: f64 = 0.0;
211    let pixel_count = pixels.len() / 4;
212    for chunk in pixels.chunks_exact(4) {
213        let luminance = 0.2126 * chunk[0] as f64
214            + 0.7152 * chunk[1] as f64
215            + 0.0722 * chunk[2] as f64;
216        total += luminance;
217    }
218    (total / pixel_count as f64) as f32
219}
220```
221~
222### البناء
223~
224```bash
225wasm-pack build --target web
226```
227~
228ينتج هذا مجلد `pkg/` يحتوي على:
229- `image_processor_bg.wasm`  -  الملف الثنائي المجمّع لـ WASM
230- `image_processor.js`  -  كود JavaScript الوسيط مع تعريفات TypeScript
231- `package.json`  -  جاهز للنشر على npm
232~
233### الاستخدام في JavaScript
234~
235```html
236<!DOCTYPE html>
237<html>
238<head><title>WASM Image Processor</title></head>
239<body>
240  <canvas id="canvas" width="800" height="600"></canvas>
241  <button onclick="applyGrayscale()">Grayscale</button>
242  <button onclick="applyBrightness()">Brighten</button>
243  <button onclick="applyInvert()">Invert</button>
244~
245  <script type="module">
246    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";
247~
248    let ctx;
249    let imageData;
250~
251    async function setup() {
252      await init();
253      const canvas = document.getElementById("canvas");
254      ctx = canvas.getContext("2d");
255~
256      // Load an image onto the canvas
257      const img = new Image();
258      img.onload = () => {
259        ctx.drawImage(img, 0, 0);
260        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
261      };
262      img.src = "photo.jpg";
263    }
264~
265    window.applyGrayscale = () => {
266      grayscale(imageData.data);
267      ctx.putImageData(imageData, 0, 0);
268    };
269~
270    window.applyBrightness = () => {
271      adjust_brightness(imageData.data, 1.3);
272      ctx.putImageData(imageData, 0, 0);
273    };
274~
275    window.applyInvert = () => {
276      invert(imageData.data);
277      ctx.putImageData(imageData, 0, 0);
278    };
279~
280    setup();
281  </script>
282</body>
283</html>
284```
285~
286الرؤية الأساسية: `imageData.data` هو `Uint8ClampedArray` مدعوم بـ `ArrayBuffer`. عند تمريره إلى WASM، يتشارك نفس الذاكرة  -  بدون نسخ. تعدّل دالة Rust البكسلات في مكانها، ويرى جانب JavaScript التغييرات فوراً.
287~
288## المستوى الأدنى: إنشاء مثيل WASM يدوياً
289~
290إذا كنت لا تريد استخدام `wasm-bindgen`، يمكنك إنشاء مثيلات وحدات WASM مباشرة:
291~
292```javascript
293const response = await fetch("calculator.wasm");
294const { instance } = await WebAssembly.instantiateStreaming(response, {
295  env: {
296    // Functions the WASM module can call
297    log_result: (value) => console.log("Result:", value),
298  },
299});
300~
301// Call exported functions
302const { add, multiply } = instance.exports;
303console.log(add(5, 3));       // 8
304console.log(multiply(4, 7));  // 28
305```
306~
307هذا مفيد عندما تريد الحد الأدنى من الحمل الزائد ولا تحتاج إلى تكامل أنواع غني.
308~
309## الأداء: WASM مقابل JavaScript
310~
311تُظهر المعايير الواقعية تسريعات كبيرة للمهام كثيفة المعالج:
312~
313| المهمة | JavaScript | WASM | التسريع |
314|------|-----------|------|---------|
315| معالجة صور 4K | 180ms | 8ms (مع SIMD) | 22x |
316| تغيير حجم صورة (4K) | 250ms | 45ms | 5.5x |
317| محاكاة فيزياء (10K كيان) | إسقاط إطارات | 60fps سلس | ~10x |
318| تحليل JSON (حمولة كبيرة) | 12ms | 3ms | 4x |
319| تجزئة تشفيرية | 45ms | 6ms | 7.5x |
320~
321يعمل WASM بحوالي 95% من سرعة الكود الأصلي. أكبر المكاسب تأتي من:
322- أداء متوقع (لا إحماء JIT، لا توقفات GC)
323- تعليمات SIMD لمعالجة البيانات المتوازية
324- وصول مباشر للذاكرة دون تدخل جامع المخلفات
325~
326حيث لا يكون WASM أسرع: معالجة DOM، الحسابات الصغيرة، المهام المقيدة بالإدخال/الإخراج. JavaScript محسّن بالفعل لهذه الأمور.
327~
328## حالات الاستخدام الإنتاجية
329~
330### Figma: عرض متجهات في الوقت الحقيقي
331~
332محرك العرض الأساسي في Figma هو C++ مجمّع إلى WASM. كل شكل، تدرج، وتأثير يُحسب في WASM ويُرسم على عنصر Canvas. هذا يتيح لـ Figma التعامل مع تصميمات معقدة بآلاف الطبقات بمعدل 60fps في المتصفح  -  أداء يستحيل تحقيقه بـ JavaScript فقط.
333~
334### Adobe Photoshop على الويب
335~
336نقلت Adobe مرشحات وأدوات Photoshop الرئيسية إلى WASM باستخدام Rust. تُظهر معاييرهم معالجة صور 4K في 22ms مع WASM SIMD مقابل 180ms في JavaScript  -  تحسين 8x يجعل معاينة المرشحات في الوقت الحقيقي ممكنة.
337~
338### Cloudflare Workers
339~
340يشغّل Cloudflare وحدات WASM في عزلات V8 عبر أكثر من 330 موقعاً حافياً. بدايات التشغيل الباردة هي 1-5ms (مقارنة بـ 100-500ms للخوادم بدون خادم المعتمدة على الحاويات). في فبراير 2026، نشروا استدلال Llama-3-8b عبر شبكتهم الحافية باستخدام WASM.
341~
342### Google Meet
343~
344التمويه الخلفي والخلفيات الافتراضية في Google Meet تستخدم WASM مع SIMD لمعالجة الفيديو في الوقت الحقيقي. تعالج وحدة WASM كل إطار فيديو بسرعة كافية للحفاظ على فيديو سلس بمعدل 30fps.
345~
346## دعم المتصفحات (2026)
347~
348| الميزة | Chrome | Firefox | Safari | Edge |
349|---------|--------|---------|--------|------|
350| Core WASM | كامل | كامل | كامل | كامل |
351| Threads | نعم | نعم | نعم | نعم |
352| SIMD (128-bit) | نعم | نعم | نعم | نعم |
353| WasmGC | 119+ | 120+ | 18.2+ | نعم |
354| Exception Handling | نعم | نعم | نعم | نعم |
355| Memory64 | نعم | نعم | جزئي | نعم |
356~
357جميع المتصفحات الرئيسية تدعم WASM بالكامل. الميزات الأحدث (WasmGC, Exception Handling) وصلت إلى توفر واسع.
358~
359## مرجع الأدوات
360~
361| الأداة | الغرض | التثبيت |
362|------|---------|---------|
363| **wasm-pack** | بناء Rust إلى WASM، توليد حزم npm | `cargo install wasm-pack` |
364| **wasm-bindgen** | ربط تكامل Rust/JS (يستخدمه wasm-pack) | تبعية في Cargo.toml |
365| **wasm-opt** | تحسين حجم الملف الثنائي (تقليل 50%+) | جزء من Binaryen: `brew install binaryen` |
366| **wit-bindgen** | توليد ربط من ملفات WIT | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | بيئة تشغيل WASM على جانب الخادم (تطبيق WASI المرجعي) | `brew install wasmtime` |
368| **Wasmer** | بيئة تشغيل WASM بديلة مع دعم WASI | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | كشف ميزات المتصفح أثناء التشغيل | `npm install wasm-feature-detect` |
370~
371### تحسين حجم الملف الثنائي
372~
373يمكن أن تكون ملفات WASM الثنائية كبيرة. إليك كيفية تقليصها:
374~
375```toml
376# Cargo.toml
377[profile.release]
378opt-level = "z"     # Optimize for size
379lto = true          # Link-time optimization
380codegen-units = 1   # Better optimization, slower compile
381strip = true        # Strip debug symbols
382```
383~
384```bash
385# Build in release mode
386wasm-pack build --release --target web
387~
388# Further optimize with wasm-opt
389wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm
390```
391~
392وحدة Rust WASM نموذجية تنخفض من 500KB إلى أقل من 50KB مع هذه التحسينات.
393~
394## خارطة طريق البدء
395~
396```mermaid
397flowchart TD
398    A[Week 1: Basics] --> B[Week 2: Real Project]
399    B --> C[Week 3: WASI and Server-side]
400    C --> D[Month 2+: Production]
401~
402    A --> A1[Install Rust + wasm-pack]
403    A --> A2[Build hello-world WASM module]
404    A --> A3[Call WASM functions from JavaScript]
405~
406    B --> B1[Build image processor or game physics]
407    B --> B2[Use wasm-bindgen for rich types]
408    B --> B3[Benchmark against pure JS]
409~
410    C --> C1[Run WASM with Wasmtime]
411    C --> C2[Explore WASI interfaces]
412    C --> C3[Try Component Model with WIT]
413~
414    D --> D1[Optimize binary size]
415    D --> D2[Use SIMD for parallelism]
416    D --> D3[Deploy to Cloudflare Workers or browser]
417```
418~
419## الخلاصة
420~
421WebAssembly لم يعد تجريبياً. إنه تقنية إنتاجية تستخدمها بعض أكثر التطبيقات تطلباً على الويب. أداء قريب من الأصلي، أمان معزول، وقابلية نقل عالمية  -  لا يوجد هدف تجميع آخر يمنحك الثلاثة.
422~
423لست بحاجة لإعادة كتابة تطبيقك بالكامل بـ WASM. ابدأ بدالة واحدة كثيفة المعالج  -  مرشح صور، محلل بيانات، حساب فيزيائي  -  جمّعها إلى WASM، واستدعها من JavaScript. قِس الفرق. ثم قرر أين يمكن لـ WASM المساعدة أيضاً.
424~
425الأدوات ناضجة، دعم المتصفحات عالمي، والنظام البيئي ينمو. إذا كنت تكتب Rust، فأنت بالفعل على بُعد أمر واحد من المتصفح.
426~
427> **قائمة مراجعة البدء:**
428>
429> - [x] تثبيت Rust وwasm-pack
430> - [x] بناء أول وحدة WASM وتشغيلها في المتصفح
431> - [x] تكامل JavaScript يعمل (استدعاء WASM من JS)
432> - [x] بناء إصدار بتحسينات الحجم مطبقة
433> - [x] قياس الأداء مقارنة بمكافئ JavaScript الخالص
434> - [x] استكشاف WASI مع Wasmtime لحالات استخدام جانب الخادم
435~