ویب ڈویلپرز کے لیے WebAssembly: صفر سے پروڈکشن تک

WebAssembly (WASM) کی شروعات براؤزر میں C++ چلانے کے ایک طریقے کے طور پر ہوئی۔ 2026 میں، یہ ہر جگہ چلتا ہے - براؤزرز، سرورز، ایج نیٹ ورکس، ایمبیڈڈ ڈیوائسز - اور ویب پر سب سے زیادہ مطالبہ والی کچھ ایپلیکیشنز کو طاقت دیتا ہے۔ Figma کا رینڈرنگ انجن، ویب پر Adobe Photoshop، Google Meet کی ویڈیو پروسیسنگ، اور Cloudflare کا ایج کمپیوٹ پلیٹ فارم سبھی WebAssembly پر چلتے ہیں۔

Chrome Platform Status کے مطابق 2026 کے اوائل میں WASM تمام Chrome پیج لوڈز کا تقریباً 5.5% ہے، جو پچھلے سال 4.5% سے بڑھا ہے۔ WASM 3.0 کے W3C معیار بننے اور WASI کے 1.0 کی طرف پختہ ہونے کے ساتھ، ایکو سسٹم ایک اہم موڑ پر پہنچ گیا ہے۔

یہ گائیڈ WebAssembly کے ساتھ تعمیر شروع کرنے کے لیے آپ کو جو کچھ جاننے کی ضرورت ہے اسے شامل کرتی ہے۔

WebAssembly کیا ہے؟

WebAssembly ایک بائنری انسٹرکشن فارمیٹ ہے جو ایک compilation target کے طور پر ڈیزائن کیا گیا ہے۔ آپ ایک اعلیٰ سطحی زبان (Rust, C, C++, Go, Kotlin) میں کوڈ لکھتے ہیں، اسے .wasm میں کمپائل کرتے ہیں، اور اسے کسی بھی ایسے ماحول میں چلاتے ہیں جس میں WASM رن ٹائم ہے - براؤزرز، Node.js، Cloudflare Workers، Wasmtime، یا Wasmer۔

یہ کیسے کام کرتا ہے

WASM ایک stack-based virtual machine ہے۔ فنکشنز ایک operand stack پر ویلیوز push اور pop کرتے ہیں۔ ہوسٹ رن ٹائم (Chrome میں V8، Firefox میں SpiderMonkey) WASM بائیٹ کوڈ کو نیٹو مشین کوڈ میں JIT-کمپائل کرتا ہے، اسی لیے کارکردگی تقریباً نیٹو ہوتی ہے۔

اہم خصوصیات:

• Sandboxed execution: WASM ماڈیولز صرف ان وسائل تک رسائی حاصل کر سکتے ہیں جو ہوسٹ واضح طور پر فراہم کرتا ہے۔ اجازت کے بغیر کوئی فائل سسٹم، کوئی نیٹ ورک، کوئی OS رسائی نہیں۔ یہ نیٹو کوڈ سے بنیادی طور پر مختلف ہے۔
• Linear memory: WASM اور ہوسٹ کے درمیان مشترکہ ایک واحد مسلسل ArrayBuffer۔ پیچیدہ ڈیٹا (strings, structs) میموری میں لکھ کر اور پوائنٹر شیئر کرکے پاس کیا جاتا ہے۔
• Type-limited: WASM مقامی طور پر صرف چار اقسام کی حمایت کرتا ہے: i32، i64، f32، f64۔ باقی سب کچھ (strings, arrays, objects) کو linear memory یا Component Model کے ذریعے انکوڈنگ کی ضرورت ہوتی ہے۔
• Portable: وہی .wasm بائنری WASM رن ٹائم والے کسی بھی پلیٹ فارم پر دوبارہ کمپائلیشن کے بغیر چلتی ہے۔

WASM بمقابلہ JavaScript

WASM JavaScript کی جگہ نہیں لیتا۔ یہ اس کا تکمیلی ہے۔

UI اور DOM کام کے لیے JavaScript استعمال کریں۔ بھاری حسابات کے لیے WASM استعمال کریں: امیج پروسیسنگ، ویڈیو انکوڈنگ، فزکس سمیولیشن، کرپٹوگرافی، ڈیٹا پارسنگ۔

WASM 3.0: نیا کیا ہے

WebAssembly 3.0 ستمبر 2025 میں W3C معیار بنا، جس نے نو ایسی خصوصیات کو معیاری بنایا جو سالوں سے تیاری میں تھیں۔

سب سے زیادہ اثر انگیز WasmGC ہے۔ اس سے پہلے، Java یا Kotlin کو WASM میں کمپائل کرنے کا مطلب تھا بائنری کے حصے کے طور پر ایک مکمل garbage collector شپ کرنا، جو فائل سائز بڑھا دیتا تھا۔ اب براؤزر کا اپنا GC WASM ماڈیولز کے لیے میموری مینجمنٹ سنبھالتا ہے، بالکل ویسے جیسے یہ JavaScript کے لیے کرتا ہے۔

WASI: براؤزر سے آگے WebAssembly

براؤزر میں WASM طاقتور ہے، لیکن WASI (WebAssembly System Interface) وہ ہے جو WASM کو ایک آفاقی رن ٹائم بناتا ہے۔ WASI سسٹم وسائل کے لیے معیاری انٹرفیسز فراہم کرتا ہے - فائلز، نیٹ ورکنگ، گھڑیاں، رینڈم نمبرز - جو WASM ماڈیولز کو براؤزر سے باہر چلنے کی اجازت دیتا ہے۔

WASI Preview 2 (موجودہ مستحکم ریلیز) ان انٹرفیسز کی وضاحت کرتا ہے:

• wasi:filesystem - capability handles کے ذریعے فائل آپریشنز (روایتی file descriptors نہیں)
• wasi:sockets - TCP/UDP نیٹ ورکنگ
• wasi:http - HTTP request/response ہینڈلنگ
• wasi:clocks - wall clock, monotonic clock
• wasi:random - کرپٹوگرافک رینڈمنس
• wasi:cli - کمانڈ لائن آرگیومنٹس، انوائرمنٹ ویریایبلز، stdio

بنیادی اصول capability-based security ہے: ایک WASM ماڈیول فائل سسٹم تک رسائی نہیں حاصل کر سکتا جب تک کہ ہوسٹ واضح طور پر کسی مخصوص ڈائریکٹری کے لیے ہینڈل فراہم نہ کرے۔ یہ WASI کو نیٹو executables چلانے سے بنیادی طور پر زیادہ محفوظ بناتا ہے۔

WASI 1.0 کی راہ

WASI 0.3.0 (async/concurrency primitives شامل کرنا) 2026 میں متوقع ہے، جس کے بعد WASI 1.0 آئے گا۔ اہم اضافہ zero-copy streaming I/O کے ساتھ language-integrated async ہے۔

Component Model

کور WASM ماڈیولز صرف نمبرز کا تبادلہ کر سکتے ہیں۔ Component Model WASM کے اوپر ایک امیر type system اور composability تہہ شامل کرکے اس حد کو حل کرتا ہے۔

WIT (WebAssembly Interface Types)

WIT ایک Interface Definition Language ہے جو components کو اپنے imports اور exports کو امیر اقسام کے ساتھ ظاہر کرنے دیتی ہے - strings, records, lists, variants, enums - نہ کہ صرف i32 اور f64۔

// calculator.wit
package myorg:calculator@1.0.0;

interface operations {
    record calculation {
        expression: string,
        result: f64,
        timestamp: u64,
    }

    add: func(a: f64, b: f64) -> f64;
    multiply: func(a: f64, b: f64) -> f64;
    history: func() -> list<calculation>;
}

world calculator {
    export operations;
}

wit-bindgen جیسے ٹول چینز WIT فائلوں سے زبان مخصوص بائنڈنگز تیار کرتے ہیں۔ ایک Rust component اور ایک Python component WIT معاہدوں کے ذریعے strings, records، اور lists کا تبادلہ کر سکتے ہیں بغیر کسی فریق کو دوسرے کی implementation زبان جانے۔

Rust کے ساتھ اپنا پہلا WASM ماڈیول بنانا

Rust میں سب سے زیادہ پختہ WASM ٹولنگ ہے۔ آئیے ایک عملی مثال بنائیں: ایک امیج پروسیسنگ ماڈیول جو براؤزر میں چلتا ہے۔

سیٹ اپ

# Install the WASM target for Rust
rustup target add wasm32-unknown-unknown

# Install wasm-pack (builds Rust to WASM + generates JS bindings)
cargo install wasm-pack

# Create a new library project
cargo new --lib image-processor
cd image-processor

Cargo.toml کنفیگر کریں

[package]
name = "image-processor"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Rust کوڈ لکھیں

// src/lib.rs
use wasm_bindgen::prelude::*;

/// Convert an image buffer to grayscale.
/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
/// Output: Modified in place for zero-copy performance.
#[wasm_bindgen]
pub fn grayscale(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        let r = chunk[0] as f32;
        let g = chunk[1] as f32;
        let b = chunk[2] as f32;
        // ITU-R BT.709 luminance coefficients
        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
        chunk[0] = gray;
        chunk[1] = gray;
        chunk[2] = gray;
        // chunk[3] is alpha, leave unchanged
    }
}

/// Adjust brightness of an image.
/// factor > 1.0 brightens, < 1.0 darkens.
#[wasm_bindgen]
pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
    for chunk in pixels.chunks_exact_mut(4) {
        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
    }
}

/// Invert all colors in the image.
#[wasm_bindgen]
pub fn invert(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        chunk[0] = 255 - chunk[0];
        chunk[1] = 255 - chunk[1];
        chunk[2] = 255 - chunk[2];
    }
}

/// Calculate the average brightness of an image (0-255).
#[wasm_bindgen]
pub fn average_brightness(pixels: &[u8]) -> f32 {
    let mut total: f64 = 0.0;
    let pixel_count = pixels.len() / 4;
    for chunk in pixels.chunks_exact(4) {
        let luminance = 0.2126 * chunk[0] as f64
            + 0.7152 * chunk[1] as f64
            + 0.0722 * chunk[2] as f64;
        total += luminance;
    }
    (total / pixel_count as f64) as f32
}

بلڈ

wasm-pack build --target web

یہ ایک pkg/ ڈائریکٹری بناتا ہے جس میں:

• image_processor_bg.wasm - کمپائل شدہ WASM بائنری
• image_processor.js - TypeScript definitions کے ساتھ JavaScript گلو کوڈ
• package.json - npm پر شائع کرنے کے لیے تیار

JavaScript میں استعمال کریں

<!DOCTYPE html>
<html>
<head><title>WASM Image Processor</title></head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <button onclick="applyGrayscale()">Grayscale</button>
  <button onclick="applyBrightness()">Brighten</button>
  <button onclick="applyInvert()">Invert</button>

  <script type="module">
    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";

    let ctx;
    let imageData;

    async function setup() {
      await init();
      const canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");

      // Load an image onto the canvas
      const img = new Image();
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      };
      img.src = "photo.jpg";
    }

    window.applyGrayscale = () => {
      grayscale(imageData.data);
      ctx.putImageData(imageData, 0, 0);
    };

    window.applyBrightness = () => {
      adjust_brightness(imageData.data, 1.3);
      ctx.putImageData(imageData, 0, 0);
    };

    window.applyInvert = () => {
      invert(imageData.data);
      ctx.putImageData(imageData, 0, 0);
    };

    setup();
  </script>
</body>
</html>

اہم بصیرت: imageData.data ایک Uint8ClampedArray ہے جو ایک ArrayBuffer کی حمایت سے ہے۔ جب WASM کو پاس کیا جاتا ہے، تو یہ ایک ہی میموری شیئر کرتا ہے - کوئی کاپی نہیں۔ Rust فنکشن پکسلز کو in place تبدیل کرتا ہے، اور JavaScript کی طرف فوری طور پر تبدیلیاں نظر آتی ہیں۔

نچلی سطح: دستی WASM Instantiation

اگر آپ wasm-bindgen استعمال نہیں کرنا چاہتے، تو آپ براہ راست WASM ماڈیولز کو instantiate کر سکتے ہیں:

const response = await fetch("calculator.wasm");
const { instance } = await WebAssembly.instantiateStreaming(response, {
  env: {
    // Functions the WASM module can call
    log_result: (value) => console.log("Result:", value),
  },
});

// Call exported functions
const { add, multiply } = instance.exports;
console.log(add(5, 3));       // 8
console.log(multiply(4, 7));  // 28

یہ اس وقت مفید ہے جب آپ کم سے کم اوورہیڈ چاہتے ہیں اور امیر type interop کی ضرورت نہیں ہے۔

کارکردگی: WASM بمقابلہ JavaScript

حقیقی دنیا کے بینچ مارکس CPU-بھاری کاموں کے لیے نمایاں سپیڈ اپ دکھاتے ہیں:

WASM نیٹو کوڈ کی تقریباً 95% رفتار پر چلتا ہے۔ سب سے بڑے فوائد ان سے آتے ہیں:

• قابل پیشگوئی کارکردگی (کوئی JIT warmup نہیں، کوئی GC pauses نہیں)
• متوازی ڈیٹا پروسیسنگ کے لیے SIMD instructions
• garbage collector مداخلت کے بغیر direct memory access

جہاں WASM تیز نہیں ہے: DOM manipulation، چھوٹی حسابات، I/O-bound کام۔ ان کے لیے JavaScript پہلے سے آپٹمائزڈ ہے۔

پروڈکشن استعمال کے کیسز

Figma: ریئل ٹائم ویکٹر رینڈرنگ

Figma کا بنیادی رینڈرنگ انجن C++ ہے جو WASM میں کمپائل کیا گیا ہے۔ ہر shape، gradient، اور effect WASM میں حساب کیا جاتا ہے اور ایک Canvas element پر ڈرا کیا جاتا ہے۔ یہ Figma کو براؤزر میں ہزاروں layers والے پیچیدہ ڈیزائنز کو 60fps پر سنبھالنے کی اجازت دیتا ہے - ایک ایسی کارکردگی جو خالص JavaScript میں ناممکن ہوگی۔

ویب پر Adobe Photoshop

Adobe نے Rust استعمال کرکے اہم Photoshop فلٹرز اور ٹولز کو WASM میں پورٹ کیا۔ ان کے بینچ مارکس WASM SIMD کے ساتھ 22ms میں 4K امیج پروسیسنگ دکھاتے ہیں بمقابلہ JavaScript میں 180ms - 8x بہتری جو ریئل ٹائم فلٹر پریویوز کو ممکن بناتی ہے۔

Cloudflare Workers

Cloudflare 330+ ایج لوکیشنز پر V8 isolates میں WASM ماڈیولز چلاتا ہے۔ Cold starts 1-5ms ہیں (container-based serverless کے لیے 100-500ms کے مقابلے میں)۔ فروری 2026 میں، انہوں نے WASM استعمال کرکے اپنے ایج نیٹ ورک پر Llama-3-8b inference تعینات کیا۔

Google Meet

Google Meet میں بیک گراؤنڈ بلر اور ورچوئل بیک گراؤنڈز ریئل ٹائم ویڈیو پروسیسنگ کے لیے SIMD کے ساتھ WASM استعمال کرتے ہیں۔ WASM ماڈیول ہر ویڈیو فریم کو اتنی تیزی سے پروسیس کرتا ہے کہ 30fps پر ہموار ویڈیو برقرار رہے۔

براؤزر سپورٹ (2026)

تمام بڑے براؤزرز مکمل طور پر WASM سپورٹ کرتے ہیں۔ نئی خصوصیات (WasmGC, Exception Handling) وسیع دستیابی تک پہنچ چکی ہیں۔

ٹولنگ حوالہ

بائنری سائز کی آپٹمائزیشن

WASM بائنریز بڑی ہو سکتی ہیں۔ انہیں چھوٹا کرنے کا طریقہ:

# Cargo.toml
[profile.release]
opt-level = "z"     # Optimize for size
lto = true          # Link-time optimization
codegen-units = 1   # Better optimization, slower compile
strip = true        # Strip debug symbols

# Build in release mode
wasm-pack build --release --target web

# Further optimize with wasm-opt
wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm

ایک عام Rust WASM ماڈیول ان آپٹمائزیشنز کے ساتھ 500KB سے 50KB سے کم ہو جاتا ہے۔

شروع کرنے کا روڈ میپ

نتیجہ

WebAssembly اب تجرباتی نہیں رہا۔ یہ ایک پروڈکشن ٹیکنالوجی ہے جو ویب پر سب سے زیادہ مطالبہ والی کچھ ایپلیکیشنز استعمال کرتی ہیں۔ تقریباً نیٹو کارکردگی، sandboxed سیکیورٹی، اور آفاقی پورٹیبلٹی - کوئی اور compilation target آپ کو یہ تینوں نہیں دیتا۔

آپ کو WASM میں اپنی پوری ایپلیکیشن دوبارہ لکھنے کی ضرورت نہیں ہے۔ ایک واحد CPU-بھاری فنکشن سے شروع کریں - ایک امیج فلٹر، ایک ڈیٹا پارسر، ایک فزکس حساب - اسے WASM میں کمپائل کریں، اور JavaScript سے کال کریں۔ فرق ماپیں۔ پھر فیصلہ کریں کہ WASM اور کہاں مدد کر سکتا ہے۔

ٹولنگ پختہ ہے، براؤزر سپورٹ آفاقی ہے، اور ایکو سسٹم بڑھ رہا ہے۔ اگر آپ Rust لکھتے ہیں، تو آپ پہلے سے ہی براؤزر سے ایک کمانڈ دور ہیں۔

شروع کرنے کی چیک لسٹ:

• Rust اور wasm-pack انسٹال ہو چکے ہیں
• پہلا WASM ماڈیول بنایا اور براؤزر میں چل رہا ہے
• JavaScript interop کام کر رہا ہے (JS سے WASM کال کرنا)
• سائز آپٹمائزیشنز کے ساتھ release build لاگو
• خالص JavaScript مساوی کے مقابلے میں کارکردگی بینچ مارک کیا
• سرور سائیڈ استعمال کے کیسز کے لیے Wasmtime کے ساتھ WASI کی تحقیق کی