WebAssembly और Rust: उच्च-प्रदर्शन वेब एप्लिकेशन बनाना

WebAssembly और Rust का परिचय

आधुनिक वेब एप्लिकेशन को अधिक से अधिक प्रदर्शन की आवश्यकता होती है। JavaScript, अपनी सभी खूबियों के बावजूद, हमेशा कम्प्यूटेशनल रूप से जटिल कार्यों - इमेज प्रोसेसिंग, 3D रेंडरिंग, क्रिप्टोग्राफी या सिमुलेशन - को संभाल नहीं पाता। यहाँ WebAssembly (WASM) मदद के लिए आता है - एक बाइनरी इंस्ट्रक्शन फॉर्मेट जो ब्राउज़र में लगभग नेटिव स्पीड से चलता है।

Rust भाषा WASM मॉड्यूल लिखने के लिए सबसे अच्छे उम्मीदवारों में से एक बन गई है: यह सुरक्षित, तेज़ है और इसमें गार्बेज कलेक्टर नहीं है। इस लेख में, हम देखेंगे कि Rust कोड को WebAssembly में कैसे कंपाइल करें, इसे JavaScript से कैसे जोड़ें और वास्तविक उच्च-प्रदर्शन वेब एप्लिकेशन बनाएं।

Rust + WASM के लिए वातावरण सेटअप

कोड लिखने से पहले, आवश्यक टूल्स इंस्टॉल करें:

• Rust — rustup (आधिकारिक इंस्टॉलर) के माध्यम से इंस्टॉल करें।
• wasm-pack — WASM पैकेज बनाने के लिए मुख्य टूल।
• wasm-bindgen — Rust और JavaScript को जोड़ने के लिए लाइब्रेरी।
• Node.js और npm — फ्रंटएंड के परीक्षण और बिल्ड के लिए।

# wasm-pack इंस्टॉल करनाcurl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# नया प्रोजेक्ट बनानाcargo new --lib wasm-examplecd wasm-example

प्रोजेक्ट बनाने के बाद Cargo.toml खोलें और डिपेंडेंसीज़ जोड़ें:

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

[dependencies]wasm-bindgen = "0.2"

WebAssembly के लिए Rust में पहला फंक्शन लिखना

एक सरल फंक्शन बनाते हैं जो दो संख्याओं को जोड़ता है और परिणाम लौटाता है। src/lib.rs में लिखें:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn add(a: i32, b: i32) -> i32 {    a + b}

#[wasm_bindgen] एट्रीब्यूट स्वचालित रूप से इस फंक्शन के लिए JavaScript रैपर जनरेट करता है। अब प्रोजेक्ट बनाएं:

wasm-pack build --target web

बिल्ड के बाद pkg फोल्डर में फ़ाइलें दिखाई देंगी: .wasm, .js (रैपर) और .d.ts (TypeScript टाइप्स)।

HTML और JavaScript के साथ एकीकरण

परीक्षण के लिए एक सरल HTML पेज बनाएं:

<!DOCTYPE html><html><head>    <script type="module">        import init, { add } from './pkg/wasm_example.js';

        async function run() {            await init();            console.log('2 + 3 =', add(2, 3)); // 5        }        run();    </script></head><body>    <h1>Rust + WebAssembly काम कर रहा है!</h1></body></html>

फ़ाइल को लोकल सर्वर (जैसे, python3 -m http.server) के माध्यम से खोलें - ब्राउज़र कंसोल में आपको परिणाम 5 दिखाई देगा।

स्ट्रिंग्स और जटिल डेटा प्रकारों के साथ काम करना

WebAssembly केवल संख्याओं के साथ काम करता है। स्ट्रिंग्स, ऐरे और ऑब्जेक्ट्स के साथ काम करने के लिए wasm-bindgen का उपयोग किया जाता है, जो स्वचालित रूप से टाइप्स को कन्वर्ट करता है।

उदाहरण: स्ट्रिंग लौटाने वाला फंक्शन

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn greet(name: &str) -> String {    format!("नमस्ते, {}! आप Rust + WASM का उपयोग कर रहे हैं।", name)}

JavaScript में:

import init, { greet } from './pkg/wasm_example.js';

await init();console.log(greet("अलेक्से")); // "नमस्ते, अलेक्से! आप Rust + WASM का उपयोग कर रहे हैं।"

ऐरे (Vec) के साथ काम करना

ऐरे पास करने के लिए Vec<T> का उपयोग करें। उदाहरण - सभी तत्वों को दोगुना करने वाला फंक्शन:

#[wasm_bindgen]pub fn double_numbers(arr: Vec<i32>) -> Vec<i32> {    arr.iter().map(|x| x * 2).collect()}

JavaScript कोड:

const result = double_numbers([1, 2, 3, 4]);console.log(r