रस्ट और वेबअसेंबली के साथ एक सरल वेब ऐप बनाना: एक चरण-दर-चरण मार्गदर्शिका

परिचय

क्या आपने कभी जावास्क्रिप्ट की प्रदर्शन सीमाओं से खुद को निराश पाया है? आप अकेले नहीं हैं। जैसे-जैसे वेब एप्लिकेशन अधिक जटिल होते जाते हैं, उच्च-प्रदर्शन समाधानों की आवश्यकता अधिक स्पष्ट होती जाती है। रस्ट और वेबअसेंबली दर्ज करें - दो प्रौद्योगिकियां जो न केवल प्रदर्शन बल्कि सुरक्षा और दक्षता का भी वादा करती हैं। इस लेख में, हम रस्ट और वेबअसेंबली का उपयोग करके एक सरल वेब एप्लिकेशन बनाने की प्रक्रिया के बारे में जानेंगे।

जंग और वेबअसेंबली क्यों?

जंग क्या है?

रस्ट एक सिस्टम प्रोग्रामिंग भाषा है जिसका उद्देश्य मेमोरी सुरक्षा, समवर्तीता और प्रदर्शन प्रदान करना है। इसे अपने मजबूत प्रकार के सिस्टम और स्वामित्व मॉडल की बदौलत नल पॉइंटर्स, बफर ओवरफ्लो और डेटा रेस के कारण होने वाली सामान्य बग को खत्म करने के लिए डिज़ाइन किया गया है। यह रस्ट को विश्वसनीय और कुशल सॉफ्टवेयर बनाने के लिए एक आदर्श विकल्प बनाता है।

जंग के फायदे

• मेमोरी सुरक्षा : रस्ट का स्वामित्व मॉडल यह सुनिश्चित करता है कि वेरिएबल्स का एक ही मालिक हो, जो मेमोरी लीक और अनधिकृत डेटा एक्सेस को रोकता है।
• प्रदर्शन : रस्ट को गति के लिए डिज़ाइन किया गया है, जो C और C++ जैसी भाषाओं के साथ निकटता से प्रतिस्पर्धा करता है।
• समवर्ती : रस्ट की भाषा डिज़ाइन समवर्ती कोड लिखना आसान बनाती है, जिससे यह अत्यधिक स्केलेबल हो जाता है।
• समृद्ध पारिस्थितिकी तंत्र : लगातार बढ़ते पैकेज भंडार के साथ, कार्गो, रस्ट वेब विकास, डेटा हेरफेर और बहुत कुछ के लिए पुस्तकालयों और रूपरेखाओं की एक विस्तृत श्रृंखला प्रदान करता है।

वेबअसेंबली क्या है?

WebAssembly (जिसे अक्सर wasm के रूप में संक्षिप्त किया जाता है) एक द्विआधारी निर्देश प्रारूप है जो C, C++ और Rust जैसी उच्च-स्तरीय भाषाओं के लिए संकलन लक्ष्य के रूप में कार्य करता है। इसे एक पोर्टेबल, कुशल कोड प्रारूप के रूप में डिज़ाइन किया गया है जो वेब ब्राउज़र पर लगभग मूल प्रदर्शन को सक्षम बनाता है।

वेबअसेंबली के लाभ

• प्रदर्शन : WebAssembly कोड सामान्य हार्डवेयर क्षमताओं का लाभ उठाकर लगभग मूल गति से निष्पादित होता है।
• सुरक्षा : WebAssembly को सुरक्षित और सैंडबॉक्स्ड होने के लिए डिज़ाइन किया गया है, जो होस्ट सिस्टम से अलग एक संरक्षित वातावरण के अंदर निष्पादित होता है।
• पोर्टेबिलिटी : WebAssembly प्लेटफ़ॉर्म-स्वतंत्र है, जिसका अर्थ है कि यह किसी भी मशीन पर चल सकता है जिसमें एक संगत वेब ब्राउज़र है।
• इंटरऑपरेबिलिटी : वेबअसेंबली मॉड्यूल को आसानी से जावास्क्रिप्ट अनुप्रयोगों में एकीकृत किया जा सकता है, जिससे आप मौजूदा वेब प्रौद्योगिकियों का लाभ उठा सकते हैं।

जंग और वेबअसेंबली का तालमेल

वेबअसेंबली की गति और पोर्टेबिलिटी के साथ रस्ट के प्रदर्शन और सुरक्षा सुविधाओं का संयोजन वेब विकास के लिए एक शक्तिशाली जोड़ी बनाता है। यही कारण है कि वे एक साथ इतना अच्छा काम करते हैं:

• अनुकूलित प्रदर्शन : रस्ट का शून्य-लागत अमूर्त पर ध्यान यह सुनिश्चित करता है कि आपके वेबअसेंबली मॉड्यूल दुबले और तेज़ हैं।
• सुरक्षा और सुरक्षा : रस्ट और वेबअसेंबली दोनों सुरक्षित निष्पादन को प्राथमिकता देते हैं, जिससे आपके वेब एप्लिकेशन अधिक विश्वसनीय हो जाते हैं।
• एकीकरण में आसानी : रस्ट में WebAssembly के लिए प्रथम श्रेणी का समर्थन है, जिससे रस्ट कोड को wasm में संकलित करना और इसे अपने वेब अनुप्रयोगों में एकीकृत करना आसान हो जाता है।

रस्ट और वेबअसेंबली का लाभ उठाकर, आप न केवल आधुनिक वेब विकास रुझानों के साथ तालमेल बिठा रहे हैं; आप वक्र से आगे रह रहे हैं.

अपना विकास परिवेश स्थापित करना

कोड में गोता लगाने से पहले, रस्ट और वेबअसेंबली के लिए तैयार एक विकास वातावरण स्थापित करना महत्वपूर्ण है। इससे यह सुनिश्चित होगा कि आपके पास सभी आवश्यक उपकरण और पुस्तकालय उपलब्ध हैं, जिससे विकास प्रक्रिया सुव्यवस्थित हो जाएगी।

जंग स्थापित करना

1. रस्ट इंस्टॉलर डाउनलोड करें : आधिकारिक रस्ट वेबसाइट पर जाएं और अपने ऑपरेटिंग सिस्टम के लिए उपयुक्त इंस्टॉलर डाउनलोड करें।

2. इंस्टॉलर चलाएँ : अपना टर्मिनल खोलें और रस्ट और उसके पैकेज मैनेजर, कार्गो को स्थापित करने के लिए निम्नलिखित कमांड चलाएँ।

    curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

3. स्थापना सत्यापित करें : यह सुनिश्चित करने के लिए कि रस्ट सही ढंग से स्थापित है, एक नई टर्मिनल विंडो खोलें और चलाएं:

    rustc --version

   आपको रस्ट कंपाइलर संस्करण को आउटपुट के रूप में देखना चाहिए।

wasm-pack स्थापित करना

wasm-pack रस्ट क्रेट्स को असेंबल करने और पैकेजिंग करने का एक उपकरण है जो WebAssembly को लक्षित करता है।

1. wasm-pack इंस्टॉल करें : अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएँ:

    curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

2. स्थापना सत्यापित करें : जाँचें कि क्या wasm-pack स्थापित है:

    wasm-pack --version

Node.js और npm इंस्टॉल करना

Node.js और npm निर्भरता को प्रबंधित करने और आपके वेब सर्वर को चलाने के लिए आवश्यक हैं।

1. Node.js डाउनलोड करें : आधिकारिक Node.js वेबसाइट पर जाएं और अपने ऑपरेटिंग सिस्टम के लिए इंस्टॉलर डाउनलोड करें।

2. इंस्टॉलर चलाएँ : Node.js और npm दोनों को इंस्टॉल करने के लिए इंस्टॉलेशन संकेतों का पालन करें।

3. इंस्टॉलेशन सत्यापित करें : एक टर्मिनल खोलें और यह जांचने के लिए निम्नलिखित कमांड चलाएँ कि Node.js और npm इंस्टॉल हैं:

    node --version npm --version

अपना आईडीई सेट करना

जबकि आप रस्ट और वेबअसेंबली विकास के लिए किसी भी टेक्स्ट एडिटर का उपयोग कर सकते हैं, विज़ुअल स्टूडियो कोड जैसे आईडीई रस्ट के लिए एक्सटेंशन प्रदान करते हैं जो कोड पूर्णता, लिंटिंग और डिबगिंग जैसी सुविधाएं प्रदान करते हैं।

1. विज़ुअल स्टूडियो कोड इंस्टॉल करें : इसे आधिकारिक वेबसाइट से डाउनलोड और इंस्टॉल करें।
2. रस्ट एक्सटेंशन इंस्टॉल करें : विज़ुअल स्टूडियो कोड खोलें, एक्सटेंशन मार्केटप्लेस पर जाएं और रस्ट-लैंग द्वारा "रस्ट" एक्सटेंशन खोजें। उन्नत जंग समर्थन के लिए इसे स्थापित करें।

MacOS उपयोगकर्ताओं के लिए नोट : इस गाइड में दिए गए इंस्टॉलेशन कमांड macOS के साथ संगत हैं। यदि आपको कोई समस्या आती है, तो कृपया प्लेटफ़ॉर्म-विशिष्ट निर्देशों के लिए संबंधित आधिकारिक दस्तावेज़ देखें।

• MacOS के लिए जंग इंस्टालेशन
• wasm-पैक इंस्टालेशन
• MacOS के लिए Node.js इंस्टालेशन

एक सरल जंग कार्यक्रम बनाना

इस अनुभाग में, हम एक रस्ट प्रोग्राम बनाएंगे जो किसी दिए गए नंबर के फैक्टोरियल की गणना करता है। यह हमें कम्प्यूटेशनल रूप से गहन प्रोग्राम बनाते समय रस्ट की कुछ विशेषताओं, जैसे फ़ंक्शन, लूप और सशर्त कथन का पता लगाने का मौका देगा।

रस्ट प्रोजेक्ट प्रारंभ करें

1. एक नई रस्ट लाइब्रेरी बनाएं : अपना टर्मिनल खोलें और एक नई रस्ट लाइब्रेरी प्रोजेक्ट बनाने के लिए निम्नलिखित कमांड चलाएँ।

    cargo new --lib factorial_calculator

2. प्रोजेक्ट निर्देशिका पर जाएँ :

    cd factorial_calculator

फैक्टोरियल फ़ंक्शन लिखना

1. lib.rs फ़ाइल खोलें : अपने टेक्स्ट एडिटर या IDE में src/lib.rs फ़ाइल पर जाएँ।

2. फैक्टोरियल फ़ंक्शन को कार्यान्वित करें : फैक्टोरियल फ़ंक्शन को कार्यान्वित करने के लिए निम्नलिखित रस्ट कोड जोड़ें।

    #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } }

   यहां, हम factorial नामक एक फ़ंक्शन को परिभाषित करते हैं जो एक u32 (अहस्ताक्षरित 32-बिट पूर्णांक) को एक तर्क के रूप में लेता है और एक u32 लौटाता है। फ़ंक्शन दिए गए नंबर के फैक्टोरियल की गणना करने के लिए रिकर्सन का उपयोग करता है।

WebAssembly में संकलित करें

1. रस्ट कोड संकलित करें : अब जब हमारे पास अपना फैक्टोरियल फ़ंक्शन है, तो आइए इसे एक WebAssembly मॉड्यूल में संकलित करें। अपने टर्मिनल में निम्नलिखित कमांड चलाएँ:

    wasm-pack build

2. बिल्ड को सत्यापित करें : कमांड चलाने के बाद, आपको अपने प्रोजेक्ट फ़ोल्डर में एक pkg निर्देशिका देखनी चाहिए। इसके अंदर, आपको WebAssembly मॉड्यूल ( factorial_calculator_bg.wasm ) और जेनरेट किया गया जावास्क्रिप्ट बाइंडिंग ( factorial_calculator.js ) मिलेगा।

आखिर तुमने इसे हासिल कर ही लिया है! आपने अभी-अभी एक रस्ट प्रोग्राम बनाया है जो किसी संख्या के फ़ैक्टोरियल की गणना करता है और उसे WebAssembly मॉड्यूल में संकलित करता है। यह न केवल रस्ट की क्षमताओं को प्रदर्शित करता है बल्कि इस तर्क को एक वेब एप्लिकेशन में एकीकृत करने के लिए मंच भी तैयार करता है।

WebAssembly को एक वेब ऐप में एकीकृत करना

अब जब हमारे पास फ़ैक्टोरियल की गणना के लिए एक WebAssembly मॉड्यूल है तो आइए इसे एक सरल वेब एप्लिकेशन में एकीकृत करें। हम एक बुनियादी HTML इंटरफ़ेस बनाएंगे जहां उपयोगकर्ता एक नंबर इनपुट कर सकते हैं और फिर हमारे रस्ट-जनरेटेड वेबअसेंबली मॉड्यूल का उपयोग करके उस नंबर का फैक्टोरियल प्रदर्शित कर सकते हैं।

HTML और जावास्क्रिप्ट सेटअप

1. एक HTML फ़ाइल बनाएँ : अपनी प्रोजेक्ट निर्देशिका में index.html नामक एक नई फ़ाइल बनाएँ और निम्नलिखित HTML कोड जोड़ें:

    <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html>

   यहां, हम संख्या के लिए एक इनपुट फ़ील्ड, गणना को ट्रिगर करने के लिए एक बटन और परिणाम प्रदर्शित करने के लिए एक पैराग्राफ के साथ एक सरल इंटरफ़ेस बनाते हैं।

2. एक जावास्क्रिप्ट फ़ाइल बनाएं : bootstrap.js नामक एक नई फ़ाइल बनाएं और निम्नलिखित जावास्क्रिप्ट कोड जोड़ें:

    import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error);

   इस स्क्रिप्ट में, हम गतिशील रूप से अपने WebAssembly मॉड्यूल को आयात करते हैं और calculateFactorial नामक एक फ़ंक्शन को परिभाषित करते हैं। यह फ़ंक्शन इनपुट फ़ील्ड से संख्या पढ़ता है, हमारे WebAssembly मॉड्यूल से factorial फ़ंक्शन को कॉल करता है और परिणाम प्रदर्शित करता है।

वेब ऐप चलाना

1. एक वेब सर्वर स्थापित करें : यदि आपके पास स्थानीय वेब सर्वर नहीं है, तो आप एनपीएम का उपयोग करके एक स्थापित कर सकते हैं:

    npm install -g http-server

2. वेब सर्वर चलाएँ : टर्मिनल में अपनी प्रोजेक्ट निर्देशिका पर जाएँ और चलाएँ:

    http-server .

3. वेब ऐप खोलें : अपना वेब ब्राउज़र खोलें और http://localhost:8080 पर नेविगेट करें। आपको अपना फैक्टोरियल कैलकुलेटर वेब ऐप देखना चाहिए। एक संख्या दर्ज करें, "गणना करें" पर क्लिक करें और संख्या का फैक्टोरियल प्रदर्शित होना चाहिए।

और बस! आपने रस्ट-जनरेटेड वेबअसेंबली मॉड्यूल को एक सरल वेब एप्लिकेशन में सफलतापूर्वक एकीकृत कर लिया है। यह उच्च-प्रदर्शन वाले वेब ऐप्स बनाने के लिए रस्ट को WebAssembly के साथ संयोजित करने की शक्ति और लचीलेपन को प्रदर्शित करता है।

निष्कर्ष

इस लेख में, हमने वेब विकास के लिए रस्ट और वेबअसेंबली के शक्तिशाली संयोजन का पता लगाया है। हमने अपना विकास परिवेश स्थापित करके शुरुआत की, फिर एक रस्ट प्रोग्राम बनाने के लिए आगे बढ़े जो किसी संख्या के फैक्टोरियल की गणना करता है। अंत में, हमने इस प्रोग्राम को एक सरल वेब एप्लिकेशन में एकीकृत कर दिया।

रस्ट और वेबअसेंबली के बीच तालमेल उच्च-प्रदर्शन, सुरक्षित और कुशल वेब एप्लिकेशन बनाने के लिए ढेर सारे अवसर प्रदान करता है। चाहे आप किसी मौजूदा प्रोजेक्ट को अनुकूलित करना चाह रहे हों या कोई नया प्रोजेक्ट शुरू करना चाह रहे हों, ये प्रौद्योगिकियाँ मजबूत समाधान प्रदान करती हैं जो विचार करने योग्य हैं।

जैसे-जैसे वेब प्रौद्योगिकियां विकसित हो रही हैं, प्रगति में आगे रहना महत्वपूर्ण है। रस्ट और वेबअसेंबली केवल आधुनिक रुझान नहीं हैं; वे अगली पीढ़ी के वेब अनुप्रयोगों के लिए बिल्डिंग ब्लॉक हैं।

इस यात्रा में मेरे साथ शामिल होने के लिए धन्यवाद, और मैं आपको रस्ट और वेबअसेंबली की दुनिया में गहराई से उतरने के लिए प्रोत्साहित करता हूं। हमारे आगामी लेखों के लिए बने रहें, जहां हम अधिक जटिल सुविधाओं के निर्माण और वास्तविक दुनिया के अनुप्रयोगों की खोज करेंगे।

अतिरिक्त संसाधन

• जंग प्रोग्रामिंग भाषा
• वेबअसेंबली आधिकारिक साइट

अनस्प्लैश पर स्पेसएक्स द्वारा फोटो