असेंबलीस्क्रिप्ट के लिए पहला परिचय

WebAssembly (Wasm) तकनीक के लिए समर्थन अपेक्षाकृत हाल ही में ब्राउज़रों में दिखाई दिया है। लेकिन यह तकनीक वेब की क्षमताओं का अच्छी तरह से विस्तार कर सकती है, जिससे यह एक ऐसे प्लेटफॉर्म का समर्थन करने में सक्षम है, जिसे आमतौर पर डेस्कटॉप के रूप में माना जाता है।

WebAssembly को माहिर करना वेब डेवलपर्स के लिए एक कठिन काम हो सकता है। हालाँकि, असेंबलीस्क्रिप्ट कंपाइलर स्थिति में सुधार कर सकता है।


लेख के लेखक, जिसे हम आज के अनुवाद में प्रकाशित कर रहे हैं, पहले इस बारे में बात करने की पेशकश करता है कि क्यों वेबअवेशन एक बहुत ही आशाजनक तकनीक है, और फिर इस बात पर ध्यान दें कि असेंबलीस्क्रिप्ट कैसे वास की क्षमता को अनलॉक करने में मदद कर सकता है।

WebAssembly

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

सभी प्रमुख ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स, सफारी और एज) के विकास के लिए जिम्मेदार टीमों के प्रतिनिधि WebAssembly मानक के निर्माण में शामिल थे। वे 2017 की शुरुआत में एक सिस्टम आर्किटेक्चर पर सहमत हुए। अब उपरोक्त सभी ब्राउज़र WebAssembly का समर्थन करते हैं। वास्तव में, इस तकनीक का उपयोग लगभग 87% ब्राउज़रों में किया जा सकता है।

WebAssembly कोड बाइनरी फॉर्मेट में मौजूद है। इसका मतलब है कि इस तरह के कोड समान जावास्क्रिप्ट कोड से छोटे होते हैं और तेजी से लोड होते हैं। इसके अलावा, वासम-कोड को पाठ प्रारूप में प्रस्तुत किया जा सकता है, ताकि लोग इसे पढ़ और संपादित कर सकें।

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

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

• खेल।
• वैज्ञानिक गणना, विज़ुअलाइज़ेशन, सिमुलेशन।
• सीएडी अनुप्रयोगों।
• छवियों और वीडियो का संपादन।

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

WebAssembly मौजूदा वेब परियोजनाओं का लाभ उठा सकता है। एक उदाहरण फिम्मा परियोजना है। Wasm के उपयोग के लिए धन्यवाद, इस परियोजना के लोडिंग समय में काफी सुधार हुआ था। यदि कोई वेबसाइट ऐसे कोड का उपयोग करती है जो भारी गणना करता है, तो, इस वेबसाइट के प्रदर्शन को बेहतर बनाने के लिए, इस तरह के कोड को केवल WebAssembly एनालॉग के साथ बदलने के लिए समझ में आता है।

आप अपने स्वयं के प्रोजेक्ट में WebAssembly का उपयोग करने का प्रयास कर सकते हैं। इस भाषा को सीखा जा सकता है और उस पर तुरंत लिखा जा सकता है । लेकिन, फिर भी, WebAssembly मूल रूप से अन्य भाषाओं के संकलन लक्ष्य के रूप में विकसित किया गया था। इसे C और C ++ के लिए अच्छे समर्थन के साथ डिजाइन किया गया था। वास प्रयोगात्मक समर्थन गो 1.11 में दिखाई दिया। बहुत सारे प्रयास वासना के अनुप्रयोगों को रस्ट में लिखने में किया जा रहा है।

लेकिन यह पूरी तरह से संभव है कि वेब डेवलपर C, C ++, Go, या Rust को केवल WebAssembly का उपयोग करना नहीं सीखना चाहेंगे। वे क्या करते हैं? इस प्रश्न का उत्तर असेंबलीस्क्रिप्ट दे सकता है।

AssemblyScript

असेंबलीस्क्रिप्ट एक कंपाइलर है जो टाइपस्क्रिप्ट कोड को WebAssembly कोड में परिवर्तित करता है। टाइपस्क्रिप्ट Microsoft द्वारा विकसित एक भाषा है। यह जावास्क्रिप्ट का एक सुपरसेट है, जिसमें बेहतर प्रकार का समर्थन और कुछ अन्य विशेषताएं हैं। टाइपस्क्रिप्ट एक काफी लोकप्रिय भाषा बन गई है। यह ध्यान दिया जाना चाहिए कि असेंबलीस्क्रिप्ट केवल टाइपस्क्रिप्ट कंस्ट्रक्शन के सीमित सेट को वास में बदलने में सक्षम है। इसका मतलब यह है कि यहां तक ​​कि कोई भी जो टाइपस्क्रिप्ट से परिचित नहीं है, जल्दी से इस भाषा को एक स्तर पर पर्याप्त रूप से कोड लिखने के लिए सीख सकता है जो असेंबलीस्क्रिप्ट समझ में आता है।

इसके अलावा, इस तथ्य को देखते हुए कि टाइपस्क्रिप्ट जावास्क्रिप्ट के समान है, हम कह सकते हैं कि असेंबलीस्क्रिप्ट तकनीक वेब डेवलपर्स को पूरी तरह से नई भाषा सीखने की आवश्यकता के बिना आसानी से अपने प्रोजेक्ट में वास-मॉड्यूल को एकीकृत करने की अनुमति देती है।

उदाहरण

आइए हमारा पहला असेंबलीस्क्रिप्ट मॉड्यूल लिखें। अब हम जिन सभी कोड पर चर्चा करने जा रहे हैं, उन्हें GitHub पर पाया जा सकता है । WebAssembly का समर्थन करने के लिए , हमें कम से कम Node.js 8 की आवश्यकता है।

एक नई निर्देशिका बनाएं, npm प्रोजेक्ट को इनिशियलाइज़ करें और असेंबलीस्क्रिप्ट स्थापित करें:

mkdir assemblyscript-demo cd assemblyscript-demo npm init npm install --save-dev github:AssemblyScript/assemblyscript 

ध्यान दें कि असेंबलीस्क्रिप्ट को सीधे प्रोजेक्ट GitHub रिपॉजिटरी से इंस्टॉल किया जाना चाहिए। असेंबलीस्क्रिप्ट अभी तक npm में प्रकाशित नहीं हुई है, क्योंकि डेवलपर्स अभी तक इसे व्यापक उपयोग के लिए तैयार नहीं मानते हैं।

हम असेंबली कमांड में शामिल asinit कमांड का उपयोग करके सहायक फाइलें asinit :

 npx asinit . 

अब हमारे package.json की scripts अनुभाग को निम्नलिखित रूप लेना चाहिए:

 {  "scripts": {    "asbuild:untouched": "asc assembly/index.ts -b build/untouched.wasm -t build/untouched.wat --sourceMap --validate --debug",    "asbuild:optimized": "asc assembly/index.ts -b build/optimized.wasm -t build/optimized.wat --sourceMap --validate --optimize",    "asbuild": "npm run asbuild:untouched && npm run asbuild:optimized"  } } 

प्रोजेक्ट के रूट फ़ोल्डर में स्थित index.js फ़ाइल इस तरह दिखाई देगी:

 const fs = require("fs"); const compiled = new WebAssembly.Module(fs.readFileSync(__dirname + "/build/optimized.wasm")); const imports = {  env: {    abort(_msg, _file, line, column) {       console.error("abort called at index.ts:" + line + ":" + column);    }  } }; Object.defineProperty(module, "exports", {  get: () => new WebAssembly.Instance(compiled, imports).exports }); 

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

assembly फ़ोल्डर में index.ts फ़ाइल है। इसमें असेम्बलीस्क्रिप्ट नियमों के अनुसार सोर्स कोड लिखा गया है। स्वचालित रूप से उत्पन्न बॉयलरप्लेट कोड दो संख्याओं को जोड़ने का एक सरल कार्य है:

 export function add(a: i32, b: i32): i32 {  return a + b; } 

शायद आपको add(a: number, b: number): number जैसे दिखने के लिए एक समान फ़ंक्शन के हस्ताक्षर की उम्मीद थी। तो ऐसा लगेगा कि यह साधारण टाइपस्क्रिप्ट में लिखा गया है। लेकिन यहां, number प्रकार के बजाय, i32 प्रकार का i32 । ऐसा इसलिए होता है क्योंकि असेंबली कोड, टाइपस्क्रिप्ट से जेनेरिक नंबर प्रकार के बजाय पूर्णांक और फ्लोटिंग पॉइंट संख्या के लिए विशिष्ट WebAssembly प्रकारों का उपयोग करता है।

आइए प्रोजेक्ट को इकट्ठा करें:

 npm run asbuild 

निम्न फ़ाइलें build फ़ोल्डर में दिखाई देनी चाहिए:

 optimized.wasm optimized.wasm.map optimized.wat untouched.wasm untouched.wasm.map untouched.wat 

विधानसभा के अनुकूलित और नियमित संस्करण हैं। असेंबली का प्रत्येक संस्करण हमें एक बाइनरी .wasm फ़ाइल, एक मैप मैप .wasm.map और एक .wat फ़ाइल में बाइनरी कोड का एक पाठ प्रतिनिधित्व देता है। प्रोग्रामर के लिए Wasm कोड का परीक्षण प्रस्तुत करना है, लेकिन हम इस फ़ाइल को भी नहीं देख पाएंगे। असल में, असेम्बलीस्क्रिप्ट का उपयोग करने का एक कारण यह है कि यह वास कोड के साथ काम करने की आवश्यकता को समाप्त करता है।

अब हम REPL मोड में Node.js चलाते हैं और यह सुनिश्चित करते हैं कि संकलित Wasm- मॉड्यूल का उपयोग उसी तरह किया जा सकता है जैसे किसी नियमित JS-मॉड्यूल:

 $ node Welcome to Node.js v12.10.0. Type ".help" for more information. > const add = require('./index').add; undefined > add(3, 5) 8 

सामान्य तौर पर, यह वह सब है जो Node.js. में WebAssembly तकनीक का उपयोग करने के लिए आवश्यक है

एक पर्यवेक्षक स्क्रिप्ट के साथ एक परियोजना को लैस करना

इसमें परिवर्तन करते समय विकास के दौरान मॉड्यूल को स्वचालित रूप से पुनर्निर्माण करने के लिए, मैं ऑनचेंज पैकेज का उपयोग करने की सलाह देता हूं। तथ्य यह है कि फ़ाइल परिवर्तन की निगरानी के लिए असेंबलीस्क्रिप्ट का अपना सिस्टम अभी तक नहीं है । Onchange पैकेज स्थापित करें:

 npm install --save-dev onchange 

asbuild:watch जोड़ें asbuild:watch script को package.json । -i ध्वज को कमांड में शामिल किया गया है ताकि किसी भी घटना के होने से पहले स्क्रिप्ट बनने पर निर्माण प्रक्रिया शुरू हो जाए।

 {  "scripts": {    "asbuild:untouched": "asc assembly/index.ts -b build/untouched.wasm -t build/untouched.wat --sourceMap --validate --debug",    "asbuild:optimized": "asc assembly/index.ts -b build/optimized.wasm -t build/optimized.wat --sourceMap --validate --optimize",    "asbuild": "npm run asbuild:untouched && npm run asbuild:optimized",    "asbuild:watch": "onchange -i 'assembly/**/*' -- npm run asbuild"  } } 

अब, asbuild कमांड को लगातार चलाने के बजाय, बस asbuild:watch एक बार देखें।

उत्पादकता

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

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

 function isPrime(x) {    if (x < 2) {        return false;    }    for (let i = 2; i < x; i++) {        if (x % i === 0) {            return false;        }    }    return true; } 

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

 function isPrime(x: u32): bool {    if (x < 2) {        return false;    }    for (let i: u32 = 2; i < x; i++) {        if (x % i === 0) {            return false;        }    }    return true; } 

कोड के प्रदर्शन का विश्लेषण करने के लिए, हम Benchmark.js पैकेज का उपयोग करेंगे। इसे स्थापित करें:

 npm install --save-dev benchmark 

benchmark.js बनाएँ। benchmark.js फ़ाइल:

 const Benchmark = require('benchmark'); const assemblyScriptIsPrime = require('./index').isPrime; function isPrime(x) {    for (let i = 2; i < x; i++) {        if (x % i === 0) {            return false;        }    }    return true; } const suite = new Benchmark.Suite; const startNumber = 2; const stopNumber = 10000; suite.add('AssemblyScript isPrime', function () {    for (let i = startNumber; i < stopNumber; i++) {        assemblyScriptIsPrime(i);    } }).add('JavaScript isPrime', function () {    for (let i = startNumber; i < stopNumber; i++) {        isPrime(i);    } }).on('cycle', function (event) {    console.log(String(event.target)); }).on('complete', function () {    const fastest = this.filter('fastest');    const slowest = this.filter('slowest');    const difference = (fastest.map('hz') - slowest.map('hz')) / slowest.map('hz') * 100;    console.log(`${fastest.map('name')} is ~${difference.toFixed(1)}% faster.`); }).run(); 

यहाँ वही है जो मैं अपने कंप्यूटर पर node benchmark कमांड चलाने के बाद प्राप्त करने में कामयाब रहा:

 AssemblyScript isPrime x 74.00 ops/sec ±0.43% (76 runs sampled) JavaScript isPrime x 61.56 ops/sec ±0.30% (64 runs sampled) AssemblyScript isPrime is ~20.2% faster. 

जैसा कि आप देख सकते हैं, जेएस कार्यान्वयन की तुलना में एल्गोरिथ्म का असेंबलीस्क्रिप्ट कार्यान्वयन 20% तेज था। हालाँकि, ध्यान दें कि यह परीक्षण एक माइक्रोबेनमार्क है । इसके परिणामों पर बहुत अधिक भरोसा न करें।

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

एक वेब पेज पर एक Wasm मॉड्यूल का उपयोग करना

वेब पेज पर हमारे Wasm मॉड्यूल का उपयोग करते हैं। हम निम्नलिखित सामग्री के साथ एक index.html फ़ाइल बनाकर शुरू करते हैं:

 <!DOCTYPE html> <html>    <head>        <meta charset="utf-8" />        <title>AssemblyScript isPrime demo</title>    </head>    <body>        <form id="prime-checker">            <label for="number">Enter a number to check if it is prime:</label>            <input name="number" type="number" />            <button type="submit">Submit</button>        </form>        <p id="result"></p>        <script src="demo.js"></script>    </body> </html> 

अब demo.js फ़ाइल बनाएं जिसका कोड नीचे दिखाया गया है। WebAssembly मॉड्यूल को लोड करने के कई तरीके हैं। WebAssembly.instantiateStreaming फ़ंक्शन का उपयोग करते हुए सबसे कुशल उन्हें स्ट्रीमिंग मोड में संकलित और आरंभ करना है। कृपया ध्यान दें कि हमें गर्भपात समारोह को फिर से परिभाषित करने की आवश्यकता होगी, जिसे कहा जाता है यदि कुछ कथन निष्पादित नहीं किया गया है।

 (async () => {    const importObject = {        env: {            abort(_msg, _file, line, column) {                console.error("abort called at index.ts:" + line + ":" + column);            }        }    };    const module = await WebAssembly.instantiateStreaming(        fetch("build/optimized.wasm"),        importObject    );    const isPrime = module.instance.exports.isPrime;    const result = document.querySelector("#result");    document.querySelector("#prime-checker").addEventListener("submit", event => {        event.preventDefault();        result.innerText = "";        const number = event.target.elements.number.value;        result.innerText = `${number} is ${isPrime(number) ? '' : 'not '}prime.`;    }); })(); 

अगला, स्थैतिक-सर्वर पैकेज स्थापित करें। हमें इस तथ्य के कारण सर्वर की आवश्यकता है कि WebAssembly.instantiateStreaming फ़ंक्शन का उपयोग करने के लिए, मॉड्यूल को application/wasm MIME प्रकार का उपयोग करके सेवित किया जाना चाहिए।

 npm install --save-dev static-server 

package.json में उपयुक्त स्क्रिप्ट जोड़ें:

 {  "scripts": {    "serve-demo": "static-server"  } } 

अब npm run serve-demo कमांड npm run serve-demo और ब्राउज़र में स्थानीय होस्ट URL खोलें। यदि आप फॉर्म में एक निश्चित संख्या दर्ज करते हैं, तो आप यह पता लगा सकते हैं कि यह सरल है या नहीं। अब, असेम्बलीस्क्रिप्ट विकसित करने में, हम कोड लिखने से लेकर Node.js और वेब पेज पर इसका उपयोग करने तक का लंबा सफर तय कर चुके हैं।

परिणाम

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

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

प्रिय पाठकों! आप अपनी परियोजनाओं में असेम्बलीस्क्रिप्ट का उपयोग करने की संभावनाओं का आकलन कैसे करते हैं?