WebAssembly और TypeScript: बिना दर्द के वेब को गति देना

WebAssembly और TypeScript: जब JavaScript हार मान जाता है

क्या आपने कभी महसूस किया है कि आपकी वेबसाइट धीमी हो रही है, भले ही आपने सब कुछ आधुनिक TypeScript में लिखा हो? वीडियो प्रोसेसिंग, 3D रेंडरिंग, जटिल गणितीय गणनाएँ - ब्राउज़र JavaScript दम तोड़ने लगता है। यहीं पर WebAssembly (या बस Wasm) मंच पर आता है - एक ऐसी तकनीक जो ब्राउज़र में C++, Rust या Go में लिखे कोड को लगभग नेटिव गति से चलाने की अनुमति देती है। लेकिन इसका TypeScript से क्या संबंध है? स्पॉइलर: सीधे तौर पर कोई नहीं, लेकिन साथ मिलकर ये एक शक्तिशाली जोड़ी बनाते हैं।

इस लेख में हम केवल सूखी परिभाषाएँ नहीं देंगे। हम दिखाएंगे कि कैसे TypeScript और WebAssembly एक टीम के रूप में काम कर सकते हैं, जहाँ प्रत्येक अपने क्षेत्र के लिए जिम्मेदार है: TypeScript सुविधा और टाइपिंग के लिए, और Wasm प्रदर्शन के लिए। आप सीखेंगे कि एक सरल Wasm मॉड्यूल कैसे लिखें और इसे TypeScript से कैसे कॉल करें, और सबसे महत्वपूर्ण बात, आप समझ जाएंगे कि क्या यह प्रयास के लायक है।

सरल शब्दों में WebAssembly क्या है

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

WebAssembly की मुख्य विशेषताएँ:

\n
• गति - कम्प्यूटेशनल कार्यों में JavaScript से 10-20 गुना तेज।
\n
• सुरक्षा - एक पृथक वातावरण (सैंडबॉक्स) में काम करता है, DOM तक सीधी पहुँच नहीं है।
\n
• पोर्टेबिलिटी - एक ही .wasm फ़ाइल Chrome, Firefox, Safari और Edge में काम करती है।
\n
• JS का प्रतिस्थापन नहीं - बल्कि एक पूरक। DOM, इवेंट, एसिंक्रोनसी JavaScript/TypeScript के पास ही रहती है।
\n

Wasm इंटरफ़ेस लॉजिक लिखने के लिए नहीं है। इसका क्षेत्र भारी गणनाएँ हैं: एन्क्रिप्शन, इमेज प्रोसेसिंग, भौतिक सिमुलेशन, गेम।

और यहाँ TypeScript कहाँ आता है?

TypeScript स्वयं WebAssembly में संकलित नहीं होता (हालाँकि प्रयोगात्मक प्रोजेक्ट हैं, लेकिन वे प्रोडक्शन के लिए नहीं हैं)। हालाँकि, TypeScript Wasm मॉड्यूल और उपयोगकर्ता इंटरफ़ेस के बीच एक आदर्श "गोंद" बन जाता है। कल्पना करें: आपके पास C++ में एक तेज़ एल्गोरिदम है, जिसे Wasm में संकलित किया गया है। आप TypeScript में टाइप के साथ एक साफ-सुथरा रैपर लिखते हैं, और आपकी IDE यह संकेत देना शुरू कर देती है कि फ़ंक्शन किन पैरामीटर्स की अपेक्षा करता है और वह कौन से टाइप लौटाता है। कोई जादू नहीं - बस टाइप की सख्ती और ऑटो-कम्प्लीशन।

यहाँ एक विशिष्ट आर्किटेक्चर है:

\n
• Wasm मॉड्यूल - एक ब्लैक बॉक्स जो जटिल काम करता है।
\n
• TypeScript कोड - मॉड्यूल लोड करता है, उसके फ़ंक्शन कॉल करता है और UI अपडेट करता है।
\n
• ब्राउज़र - खुश है, क्योंकि भारी काम मुख्य थ्रेड को ब्लॉक नहीं करता।
\n

उदाहरण लिखना: WebAssembly और TypeScript पर अभाज्य संख्याओं का जनरेटर

आइए एक वास्तविक प्रोजेक्ट बनाएँ। हम C++ में अभाज्य संख्याएँ खोजने के लिए एक एल्गोरिदम (एराटोस्थनीज की छलनी) लेंगे, इसे Wasm में संकलित करेंगे, और फिर इसे TypeScript से कॉल करेंगे। C++ से डरें नहीं - कोड सरल होगा, और बिल्ड के लिए हम Emscripten का उपयोग करेंगे।

चरण 1. C++ में स्रोत कोड

एक फ़ाइल बनाएँ primes.cpp:

#include <emscripten.h>\n\nextern "C" {\n    EMSCRIPTEN_KEEPALIVE\n    int count_primes(int limit) {\n        if (limit < 2) return 0;\n        bool* sieve = new bool[limit + 1];\n        for (int i = 0; i <= limit; i++) sieve[i] = true;\n        sieve[0] = sieve[1] = false;\n        for (int i = 2; i * i <= limit; i++) {\n            if (sieve[i]) {\n                for (int j = i * i; j <= limit; j += i) {\n                    sieve[j] = false;\n                }\n            }\n        }\n        int count = 0;\n        for (int i = 0; i <= limit; i++) {\n            if (sieve[i]) count++;\n        }\n        delete[] sieve;\n        return count;\n    }\n}