Yew - जंग और WebAssembly फ्रंट-एंड फ्रेमवर्क

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



होलीजस 2018 पाइटर सम्मेलन में डेनिस की रिपोर्ट के आधार पर पोस्ट तैयार किया गया था। रिपोर्ट के कट - वीडियो और टेक्स्ट ट्रांसक्रिप्ट के तहत।


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

कार्यसूची

आज हम इस बारे में जानेंगे कि येव क्या है (फ्रेमवर्क का नाम अंग्रेजी शब्द "यू" - यू; यू "के समान है) अंग्रेजी से अनुवादित एक यू ट्री है।

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

अंत में, मैं आपको दिखाता हूं कि आज आप Yew और WebAssembly का उपयोग कैसे शुरू करें।

आप क्या हैं?

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

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

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

कैसा विकास दिखता है

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

Yew - wasm ढांचे का उपयोग करने के लिए तैयार

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

पहले स्केच में मुझे कई घंटे लगे, मुझे यह पता लगाना था कि WebAssembly को कैसे संकलित किया जाए। मैंने इसे लॉन्च किया और महसूस किया कि कुछ ही घंटों में इसने कोर बिछा दिया, जिसे विकसित करना बहुत आसान है। मुझे इसे न्यूनतम फ्रेमवर्क इंजन में लाने में बस कुछ ही दिन लगे।

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

रूपरेखा पूरी तरह से जंग में लिखी गई है। Yewcripten के बिना सीधे WebAssembly (wasm32- अज्ञात-अज्ञात लक्ष्य) के संकलन का समर्थन करता है। यदि आवश्यक हो, तो आप ईमस्क्रिप्ट के माध्यम से काम कर सकते हैं।

आर्किटेक्चर

अब कुछ शब्द पारंपरिक दुनिया में मौजूद पारंपरिक दृष्टिकोणों से अलग कैसे हैं, इसके बारे में कुछ शब्द।

सबसे पहले, मैं आपको बताता हूं कि एल्म में मुझे किन भाषा प्रतिबंधों का सामना करना पड़ा है। एक मॉडल होने पर मामले को लें और एक संदेश है जो आपको इस मॉडल को बदलने की अनुमति देता है।

type alias Model =    { value : Int    }  type Msg    = Increment    | Decrement 

 case msg of   Increment ->     { value = model.value + 1 }   Decrement ->     { value = model.value - 1 } 

एल्म में, हम बस एक नया मॉडल बनाते हैं और इसे स्क्रीन पर प्रदर्शित करते हैं। मॉडल का पिछला संस्करण अपरिवर्तित रहता है। मैं इस पर ध्यान क्यों दे रहा हूं? क्योंकि Yew में, मॉडल परिवर्तनशील है, और यह सबसे आम प्रश्नों में से एक है। आगे, मैं समझाऊंगा कि ऐसा क्यों किया जाता है।

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

 struct Model {   value: i64, } enum Msg {   Increment,   Decrement, } 

 match msg {   Msg::Increment => {       self.value += 1;   }   Msg::Decrement => {       self.value -= 1;   } } 

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



जब हमारे पास update फ़ंक्शन और दो फ़ील्ड - value और name । एक मान है जो input क्षेत्र में डेटा दर्ज करते समय सहेजा जाता है। मॉडल बदल रहा है।



यह महत्वपूर्ण है कि value प्रतिपादन में शामिल नहीं है। और इसलिए हम इसे जितना चाहें बदल सकते हैं। लेकिन हमें DOM ट्री को प्रभावित करने की आवश्यकता नहीं है और इन परिवर्तनों को आरंभ करने की आवश्यकता नहीं है।

इसने मुझे इस विचार के लिए प्रेरित किया कि केवल डेवलपर ही सही क्षण को जान सकता है जब प्रतिपादन वास्तव में शुरू करने की आवश्यकता है। आरंभ करने के लिए, मैंने ध्वज का उपयोग करना शुरू किया - बस एक बूलियन मान - ShouldRender , जो संकेत देता है कि मॉडल बदल गया है और हमें प्रतिपादन शुरू करने की आवश्यकता है। इसी समय, निरंतर तुलनाओं के लिए कोई ओवरहेड नहीं है, कोई मेमोरी खपत नहीं है - येव में लिखे गए एप्लिकेशन सबसे प्रभावी हैं।

ऊपर दिए गए उदाहरण में, उत्पन्न और भेजे गए संदेश के अलावा कोई स्मृति आवंटन नहीं था। मॉडल ने अपनी स्थिति को बनाए रखा, और यह केवल एक ध्वज की मदद से प्रतिपादन में परिलक्षित हुआ।

संभावनाएं

WebAssembly में काम करने वाली एक रूपरेखा लिखना कोई आसान काम नहीं है। हमारे पास जावास्क्रिप्ट है, लेकिन इसे कुछ प्रकार का वातावरण बनाना चाहिए, जिसके साथ बातचीत करना आवश्यक है, और यह बहुत बड़ी मात्रा में काम है। इन बंडलों के प्रारंभिक संस्करण कुछ इस तरह दिखे:



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

एकीकृत जेएस

रस्ट मैक्रोज़ की मदद से, आप भाषा का विस्तार कर सकते हैं - हम जावास्क्रिप्ट के टुकड़ों को रस्ट कोड में एम्बेड कर सकते हैं, यह भाषा की एक बहुत ही उपयोगी विशेषता है।

 let handle = js! {   var callback = @{callback};   var action = function() {       callback();   };   var delay = @{ms};   return {       interval_id: setInterval(action, delay),       callback: callback,   }; }; 

मैक्रोज़ और Stdweb का उपयोग करने से मुझे जल्दी और कुशलता से सभी आवश्यक लिंक लिखने की अनुमति मिली।

Jsx टेम्प्लेट

सबसे पहले, मैं एल्म पथ के साथ गया और कोड का उपयोग करके कार्यान्वित टेम्पलेट्स का उपयोग करना शुरू किया।

 fn view(&self) -> Html<Context, Self> {   nav("nav", ("menu"), vec![       button("button", (), ("onclick", || Msg::Clicked)),       tag("section", ("ontop"), vec![           p("My text...")       ])   ]) } 

मैं कभी भी रिएक्ट का समर्थक नहीं रहा। लेकिन जब मैंने अपना ढांचा लिखना शुरू किया, तो मुझे महसूस हुआ कि रिएक्ट में JSX एक बहुत ही अच्छी चीज है। यहाँ कोड टेम्प्लेट की एक बहुत ही सुविधाजनक प्रस्तुति है।

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

 impl Renderable<Context, Model> for Model {   fn view(&self) -> Html<Context, Self> {       html! {           <div>               <nav class="menu",>                   <button onclick=|_| Msg::Increment,>{ "Increment" }</button>                   <button onclick=|_| Msg::Decrement,>{ "Decrement" }</button>               </nav>               <p>{ self.value }</p>               <p>{ Local::now() }</p>           </div>       }   } } 

हम कह सकते हैं कि JSX- जैसे टेम्पलेट शुद्ध कोड टेम्पलेट हैं, लेकिन स्टेरॉयड पर। उन्हें एक सुविधाजनक प्रारूप में प्रस्तुत किया गया है। यह भी ध्यान दें कि यहाँ मैं सीधे बटन में एक रस्ट एक्सप्रेशन सम्मिलित करता हूं (इन टेम्प्लेट्स के अंदर रस्ट एक्सप्रेशन डाला जा सकता है)। यह आपको बहुत बारीकी से एकीकृत करने की अनुमति देता है।

काफी संरचित घटक

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



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

टाइप किए हुए क्षेत्र

एक और दिलचस्प विशेषता यह है कि जब एक घटक दूसरे घटक के अंदर रखा जाता है, तो यह माता-पिता के संदेश प्रकार को देख सकता है।



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

अन्य विशेषताएं

मैंने रस्ट से सीधे एक कार्यान्वयन को उस फ्रेमवर्क में स्थानांतरित कर दिया, जो आपको आसानी से विभिन्न क्रमांकन / डीरियलाइज़ेशन प्रारूपों (अतिरिक्त आवरण के साथ प्रदान करना) का उपयोग करने की अनुमति देता है। नीचे एक उदाहरण दिया गया है: हम स्थानीय भंडारण पर जाते हैं और, डेटा को पुनर्स्थापित करते हुए, एक निश्चित आवरण निर्दिष्ट करते हैं - हम यहां जो उम्मीद करते हैं वह जौन है।

 Msg::Store => {   context.local_storage.store(KEY, Json(&model.clients)); } Msg::Restore => {    if let Json(Ok(clients)) = context.local_storage.restore(KEY) {        model.clients = clients;   } } 

यह बाइनरी सहित कोई भी प्रारूप हो सकता है। तदनुसार, क्रमबद्धता और निर्जनीकरण पारदर्शी और सुविधाजनक हो जाते हैं।

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

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

 html! {   <>       <tr><td>{ "Row" }</td></tr>       <tr><td>{ "Row" }</td></tr>       <tr><td>{ "Row" }</td></tr>   </> } 

अतिरिक्त लाभ

जंग कई और अलग-अलग शक्तिशाली सुविधाएँ प्रदान करता है, मैं केवल सबसे महत्वपूर्ण के बारे में बात करूंगा।

सेवाएं: बाहरी दुनिया के साथ बातचीत

पहले अवसर के बारे में मैं बात करना चाहता हूं। आप कुछ सेवा के रूप में आवश्यक कार्यक्षमता का वर्णन कर सकते हैं, इसे एक टोकरा के रूप में प्रकाशित कर सकते हैं और इसका पुन: उपयोग कर सकते हैं।

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

सेवाओं के उदाहरण:

• TimeOutService;
  
• IntervalService;
  
• FetchService;
  
• WebSocketService;
  
• कस्टम सेवाएँ ...
  

जंग सेवाएँ और बक्से: crates.io

संदर्भ: राज्य की आवश्यकताएं

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

मान लीजिए कि हमारे सार घटक को S3 में कुछ अपलोड करने की क्षमता की आवश्यकता है।



यह नीचे देखा जा सकता है कि यह इस अपलोड का उपयोग करता है, अर्थात S3 को डेटा भेजता है। इस तरह के एक घटक को एक रैक के रूप में बाहर रखा जा सकता है। जो उपयोगकर्ता इस घटक को डाउनलोड करता है और इसे अपने एप्लिकेशन में टेम्पलेट के अंदर जोड़ता है, वह एक त्रुटि का सामना करेगा - कंपाइलर उससे पूछेगा कि S3 समर्थन कहां है? उपयोगकर्ता को इस समर्थन को लागू करना होगा। उसके बाद, घटक स्वचालित रूप से पूर्ण जीवन जीना शुरू कर देता है।

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

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

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

संकलक आपको गलती नहीं करने देगा

कल्पना करें कि हम कुछ गुणों के साथ एक घटक बना रहे हैं, जिनमें से एक कॉल बैक सेट करने की क्षमता है। और, उदाहरण के लिए, हमने संपत्ति निर्धारित की और उसके नाम पर एक पत्र याद किया।



संकलन करने की कोशिश कर रहा है, रस्ट जल्दी से प्रतिक्रिया करता है। वह कहते हैं कि हमसे गलती हुई और ऐसी कोई संपत्ति नहीं है:



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

अब कल्पना करें, हमारे पास एक बटन है जो हमारे वैश्विक संदर्भ को S3 से कनेक्ट करने में सक्षम होने के लिए कहता है। और एक संदर्भ बनाएं जो S3 समर्थन को लागू नहीं करता है। देखते हैं क्या होता है।



कंपाइलर रिपोर्ट करता है कि हमने एक बटन डाला है, लेकिन यह इंटरफ़ेस संदर्भ के लिए लागू नहीं है।



यह केवल संपादक में जाने के लिए बनी हुई है, संदर्भ में अमेज़ॅन के लिए एक लिंक जोड़ें, और सब कुछ शुरू हो जाएगा। आप कुछ प्रकार के एपीआई के साथ तैयार सेवाओं को बना सकते हैं, फिर बस संदर्भ में जोड़ सकते हैं, इसके लिए एक लिंक स्थानापन्न कर सकते हैं, और घटक तुरंत जीवन में आता है। यह आपको बहुत ही शांत चीजें करने की अनुमति देता है: आप घटक जोड़ते हैं, एक संदर्भ बनाते हैं, इसे सेवाओं के साथ सामान करते हैं। और यह सब पूरी तरह से स्वचालित रूप से काम करता है; सभी को एक साथ जोड़ने के लिए न्यूनतम प्रयासों की आवश्यकता होती है।

Yew का उपयोग कैसे शुरू करें?

यदि आप एक WebAssembly एप्लिकेशन को संकलित करने का प्रयास करना चाहते हैं तो कहां से शुरू करें? और येव फ्रेमवर्क का उपयोग करके कैसे किया जा सकता है?

जंग-से-वास संकलन

सबसे पहले, आपको संकलक को स्थापित करने की आवश्यकता है। इसके लिए एक रस्टअप टूल है:

curl https://sh.rustup.rs -sSf | sh

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

उदाहरण के लिए, एक ब्राउज़र में यादृच्छिक संख्या पीढ़ी उसी तरह से नहीं किया जाता है जैसे लिनक्स में। यदि आप ऐसे पुस्तकालयों का उपयोग करना चाहते हैं जो सिस्टम API की आवश्यकता है तो emscripten उपयोगी है।

लाइब्रेरी और संपूर्ण बुनियादी ढाँचा चुपचाप ईमानदार WebAssembly पर स्विच कर रहा है, और emscripten की आवश्यकता नहीं है (आप यादृच्छिक संख्या और अन्य चीजों को उत्पन्न करने के लिए जावास्क्रिप्ट-आधारित क्षमताओं का उपयोग करते हैं), लेकिन अगर आपको कुछ ऐसा बनाने की आवश्यकता है जो ब्राउज़र में समर्थित नहीं है, तो आप emscripten के बिना नहीं कर सकते ।

मैं कार्गो-वेब का उपयोग करने की भी सलाह देता हूं:

cargo install cargo-web

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

एक नई परियोजना इस प्रकार बनाई गई है:

cargo new --bin my-project

[package]
name = "my-project"
version = "0.1.0"

[dependencies]
yew = "0.3.0"

तो बस परियोजना शुरू:

cargo web start --target wasm32-unknown-unknown

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

मौजूदा प्रतिबंध

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

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

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

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

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

फ्रेमवर्क का भविष्य

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

जेएस एकता

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

टाइप सीएसएस

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

तैयार घटक

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

निजी मामलों में प्रदर्शन में सुधार

प्रदर्शन एक बहुत ही नाजुक और जटिल मुद्दा है। क्या WebAssembly जावास्क्रिप्ट से तेज है? मेरे पास सकारात्मक या नकारात्मक उत्तर की पुष्टि करने वाला कोई प्रमाण नहीं है। ऐसा लगता है और मेरे द्वारा किए गए कुछ बहुत ही सरल परीक्षणों के अनुसार, WebAssembly बहुत तेज है। और मुझे पूरा विश्वास है कि इसका प्रदर्शन जावास्क्रिप्ट की तुलना में अधिक होगा, सिर्फ इसलिए कि यह एक निम्न-स्तरीय बायोटेक है, जहां मेमोरी आवंटन और कई अन्य संसाधन-गहन क्षणों की आवश्यकता नहीं है।

अधिक योगदानकर्ता

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

परियोजना में पहले से ही कई योगदानकर्ताओं ने भाग लिया है। लेकिन फिलहाल कोई कोर योगदानकर्ता नहीं हैं, क्योंकि इसके लिए आपको फ्रेमवर्क के विकास वेक्टर को समझने की आवश्यकता है, लेकिन यह अभी तक स्पष्ट रूप से तैयार नहीं किया गया है। लेकिन एक रीढ़ की हड्डी है, जो लोग यव में बहुत पारंगत हैं - लगभग 30 लोग। अगर आप भी फ्रेमवर्क में कुछ जोड़ना चाहते हैं, तो कृपया एक पुल अनुरोध भेजें।

प्रलेखन

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

कभी-कभी लोग मुझे फ्रेमवर्क का उपयोग करने के दिलचस्प मामले दिखाते हैं। फिर भी, एक रूपरेखा तैयार करना उस पर पेशेवर रूप से लिखने के समान नहीं है। ढांचे का उपयोग करने के अभ्यास अभी भी बनाए जा रहे हैं।

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

यदि आपको रिपोर्ट पसंद आई है, तो ध्यान दें: 24-25 नवंबर को मॉस्को में एक नया होलीजेएस आयोजित होगा, और वहां कई दिलचस्प चीजें भी होंगी। — , ( ).