WebAssembly के साथ भविष्य में वापस

नमस्कार, हेब्र! मैं आपके लिए Attila Vágó द्वारा "वापस भविष्य के साथ भविष्य में WebAssembly" लेख का अनुवाद प्रस्तुत करता हूं।

यह पोस्ट एक लेख का अनुवाद है जो WebAssemly और Emscripten के गुणों के बारे में बात करता है। मूल लेख अंग्रेजी में।

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

2011 में, मैंने गैर-एचटीएमएल कोड की अपनी पहली स्वतंत्र पंक्ति (मैंने 2007 में इसके साथ काम किया था) लिखी थी, और यह हार्वर्ड विश्वविद्यालय के प्रोफेसर डेविड जे। मालन द्वारा सिखाई गई बहुत अच्छी पुरानी सी में लिखा गया था। वह हमेशा न केवल प्रोग्रामिंग के अध्ययन के लिए, बल्कि प्रोग्रामिक सोच के लिए भी मेरी प्रेरणा बने रहेंगे। मुझे यह भी याद आया कि पीनट बटर सैंडविच बनाना मेरे लिए ही है, लेकिन यह कंप्यूटर के लिए अविश्वसनीय रूप से कठिन काम है और कंप्यूटर का दिखावा करने वाले व्यक्ति के लिए भी उतना ही मुश्किल है।

यदि आपने वीडियो देखा, तो कम से कम पहले 18 मिनट (मुझे पता है कि इसमें लंबा समय लगता है, लेकिन प्रोग्रामिंग में समय लगता है), तो आप समझ जाएंगे कि इस दिन सी मेरे दिल के करीब क्यों है। मेरी निराशा के लिए, मैंने इसे कभी नहीं सीखा, क्योंकि, चलो इसका सामना करते हैं, एक वेब डेवलपर के लिए, सी प्राथमिकताओं में से कम से कम है। मेरे पास इस तरह की गहरी भाषा में गोता लगाने का कोई वास्तविक कारण नहीं था, अनगिनत उदमी पाठ्यक्रम और सी किताबें खरीदने के बावजूद, मैंने उन्हें कभी नहीं छुआ (अपने निर्णय को अपने आप पर रखें, आपने भी किया था) या खुद से झूठ बोलें कि अगर मैं खरीदूं स्मार्ट घड़ी कंकड़, जो सी में काम करते हैं, फिर उनके लिए एक कोड लिखना सुनिश्चित करें। हाँ, यकीन के लिए! इनमें से कोई भी कारण काफी अच्छा नहीं था।

WebAssembly क्या है और यह JS से आगे कैसे निकलता है?

WebAssembly (कम के लिए Wasm) एक स्टैक्ड वर्चुअल मशीन के लिए एक द्विआधारी अनुदेश प्रारूप है।

"Wasm को C / C ++ / Rust जैसी उच्च-स्तरीय भाषाओं के संकलन के लिए एक पोर्टेबल प्लेटफ़ॉर्म के रूप में विकसित किया गया था, जो आपको इंटरनेट पर क्लाइंट और सर्वर एप्लिकेशन को तैनात करने की अनुमति देता है"

- कृपया webassembly.org बताते हैं

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

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

Emscripten "glues" C और JS

अब पकड़ो! मुझे पता है कि मैं क्या कह रहा हूं। आप "जेएस में सी चलाएं और इसके विपरीत" जैसी चीजों के बारे में नहीं कह सकते हैं और उम्मीद करते हैं कि दुनिया को कोई प्रतिक्रिया नहीं होगी। यह कितना अजीब लगता है, मैं बेवकूफ नहीं हूं। एलएलवीएम (मेरे भगवान का उपयोग करके बनाया गया है, मैंने लेख के पाठ को टाइप करते समय इनमें से आधी बातें सीखीं), जो आपको प्लग-इन के बिना लगभग मूल गति से इंटरनेट पर सी और सी ++ चलाने की अनुमति देता है।

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

emcc lib/strings.c -s WASM=1 -o public/strings.js 

जबकि एक गैर-बुनियादी आदेश इस तरह चलता है:

 emcc lib/imports.c -s WASM=1 -s EXPORTED_FUNCTIONS="['_getNum', '_main', '_getDoubleNum', '_greet']" -o public/imports.js 

Emscripten को स्थापित करना सबसे आसान काम नहीं है, लेकिन एक रॉकेट लॉन्च करना नहीं है। केवल एक चीज जो सेटअप को जटिल करती है, वह यह है कि इसमें कई निर्भरताएं हैं जैसे कि पायथन, नोड, xCode, Git और cMake। सभी निर्देशों को इंस्टॉलेशन पृष्ठ पर पाया जा सकता है और इसका पालन करना आसान है।
इसलिए Emscripten:

• पोर्टिंग के लिए एक बढ़िया उपकरण है, जो आपको C या C ++ में लिखी गई मौजूदा परियोजनाओं को संकलित करने और उन्हें सभी आधुनिक ब्राउज़रों में चलाने की अनुमति देता है। यहाँ से बाहर जाओ, इंटरनेट एक्सप्लोरर!
• API के लिए बहुत अच्छा है क्योंकि यह OpenGL को WebGL में परिवर्तित करता है और आपको SDL या सीधे HTML5 जैसे परिचित API का उपयोग करने की अनुमति देता है। अरे हाँ!
• और यह बहुत तेज़ है: LLVM, Emscripten, asm.js और WebAssembly के लिए धन्यवाद, कोड लगभग अपनी गति से चलता है। भागो, खरगोश, भागो!
  

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

उदाहरण ... उदाहरण हर जगह हैं!

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

दोस्तों, अगर कोई मेरी प्रतिक्रिया में सी कोड देखना शुरू कर दे, तो मुझे वास्तविकता में वापस लाएं, ठीक है?

थोड़ा दूर विषय, यहाँ वर्तमान सी कोड है:

और, तदनुसार, जावास्क्रिप्ट में:

ठीक है, इन फ़ाइलों में वास्तव में क्या होता है? वास्तव में काफी, इसलिए मैं सूची दूंगा।

1. यह समझना महत्वपूर्ण है कि मुख्य () , जब तक कि अन्यथा निर्दिष्ट न हो, हमेशा पहले शुरू होता है और डिफ़ॉल्ट रूप से भी संकलन करता है। यदि आप किसी अन्य फ़ंक्शन को संकलित करना चाहते हैं, तो आपको विशेष रूप से EXPORTED_FUNCTIONS सरणी के ध्वज में सेट करना होगा, जैसा कि पिछले अनुभाग में दिखाया गया है।
2. आप अपना सी कोड लिखते हैं, हमेशा की तरह, इसके नियमित पुस्तकालयों का आयात करते हैं, लेकिन इसके शीर्ष पर आपको Emscripten सिंथैटिक शुगर, साथ ही साथ किसी भी अन्य उपकरण की तुलना में अधिक विधियाँ / कार्य मिलते हैं।
3. Imports.js फ़ाइल (नाम मनमाना है, लेकिन हमेशा सी फ़ाइल के समान है) HTML द्वारा संदर्भित "गोंद" ईस्मैप्टेन से अधिक कुछ नहीं है, जो स्वचालित रूप से संकलन पर उत्पन्न होता है। इसके बारे में चिंता करने की ज़रूरत नहीं है, बस सुनिश्चित करें कि यह वास्तव में संदर्भित है।
4. Printf सिर्फ एक साधारण सी स्टेटमेंट है जो कंसोल पर एक स्ट्रिंग दर्ज करता है। कुछ खास नहीं, आगे बढ़ें।
5. लाइन्स 14 और 17 एक एंटी-पैटर्न हैं, लेकिन आपके सी कोड में JS चलाने का एक अच्छा उदाहरण है। emscripten_run_script और emscripten_async_run_script के बीच एकमात्र वास्तविक अंतर यह है कि आप JS को C अतुल्यकालिक रूप से चलाने की अनुमति देते हैं। अधिकतर सेटटाइमआउट () के साथ । कारण मैंने कहा कि यह एक विरोधी पैटर्न है क्योंकि यह है। WebAssembly का पूरा विचार सी में जेएस को चलाने के लिए है, जेएस इन सी में नहीं, और इसलिए ...
6. लाइन्स 20 और 24 और उनके संबंधित जेएस फ़ंक्शन इंडेक्स । Html फ़ाइल में सही टेम्प्लेट का प्रतिनिधित्व करते हैं, अर्थात् आपके जेएस में आपका जेएस घोषित करने और सी पर कुछ वापस करने के लिए।
7. EM_JS , जो तब jsFunction लॉन्च करता है , बस एक आसान तरीका है - अंक 4 और 5 में समान लक्ष्य को प्राप्त करने के लिए।

उपरोक्त का अनुमानित परिणाम निम्नानुसार है:

लेडीज अहेड!

किसी भी कोड की तरह, WebAssembly के पास भी एक रनिंग ऑर्डर है। कतार से मत उलझो! इस मामले में आदेश सी ऑर्डर के लिए मानक है। सब कुछ मेन () में शुरू होता है और जब भी मेन () तैयार होता है, वासम तैयार होता है। हालाँकि, क्या होता है यदि आपको रनटाइम पर कॉल करने के लिए एक स्थिर फ़ंक्शन की आवश्यकता होती है? ठीक है, बस थोड़ा सा Emscripten सिंथेटिक चीनी, और सब कुछ घड़ी की कल की तरह चला जाता है:

हम केक से मक्खियों को इकट्ठा करते हैं

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

जब आप JS या किसी भी Wasm में C चलाते हैं, तो इस मामले के लिए, सब कुछ और भी निराशाजनक हो सकता है। सौभाग्य से, Emscripten दो बहुत उपयोगी डिबगिंग विधि प्रदान करके फिर से बचाव में आता है:

 // browser debugger gets triggered emscripten_debugger(); // browser console warning with stack-trace emscripten_log(EM_LOG_WARN, “'param' your message”); 

त्वरित गोंजालेज मदद करने के लिए तूफान

मानो या न मानो, Emscripten के रचनाकारों ने सब कुछ के बारे में सोचा है। एक बड़ी विशेषता - और पिछले एक जिसे मैं इस लेख में उल्लेख करूंगा, क्योंकि उनमें से सभी को एक में रखने के लिए बहुत सारे हैं - तेजी से विकास और परीक्षण का आधार है। आप अपने Wasm को संकलित कर सकते हैं, एक परियोजना का निर्माण कर सकते हैं और सर्वर को एक झपट्टा में शुरू कर सकते हैं:

 emrun --port 7777 --no_browser public/index.html Now listening at http://localhost:7777/ 

आप जिस html पेज को चला रहे हैं, वह Emrun-सक्षम नहीं है। Stdout, stderr और exit (रिटर्नकोड) कैप्चर काम नहीं करेगा। इसे सक्षम करने के लिए --emrun लिंकर ध्वज के साथ एप्लिकेशन को पुन: व्यवस्थित करें, या इस चेक को छुपाने के लिए --no_emrun_detect पास करें।

ठीक है, दो साथियों में ... उपरोक्त उदाहरण काम करता है, लेकिन अगला बेहतर काम करता है, जो दिखाई गई त्रुटि की व्याख्या करता है।

 <b>// compile as emrun project emcc lib/strings.c -s WASM=1 --emrun -o public/index.html // run the emrun server again emrun --port 7777 --no_browser public/index.html</b> 

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