📰 👩🏿‍🎤 👩🏿‍🤝‍👨🏽 Imba: जावास्क्रिप्ट डोम के साथ तेजी से काम के लिए संगत भाषा 🕺🏼 🌤️ 👩🏻

Imba एक खुला स्रोत प्रोग्रामिंग भाषा है जो विशेष रूप से वेब एप्लिकेशन विकसित करने के लिए स्क्रिम्बा द्वारा बनाई गई है। यह जावास्क्रिप्ट में संकलित है और मौजूदा जेएस पारिस्थितिकी तंत्र के भीतर काम करने में सक्षम है। हम बात कर रहे हैं, उदाहरण के लिए, Node.js के बारे में, npm के बारे में, Webpack के बारे में।

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

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

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

इमबा का उपयोग करने वाली परियोजनाओं के बारे में

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

इसके आवेदन का एक उदाहरण आइसलैंड में मछली की नीलामी का समर्थन करने वाला मंच है। इस देश में जीडीपी का लगभग 1.6% मछली व्यापार होता है, जो लगभग $ 390 मिलियन है।

आइसलैंडिक मछली नीलामी

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

Scrimba.com प्लेटफार्म

नतीजतन, हम कह सकते हैं कि आज आप जिस भाषा से मिलेंगे, वह विभिन्न पैमानों की परियोजनाओं के विकास के लिए उपयुक्त है।

वाक्य-विन्यास

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

 function findGreatest(num1, num2) { if (num1 > num2) {   return num1 } else if (num2 > num1){   return num2 } else {   return false } }

अब वही बात इमबा पर लिखिए।

 def findGreatest num1, num2   if num1 > num2       num1   elif num2 > num1       num2   else       false

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

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

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

यूजर इंटरफेस डिजाइन

आइए Imba का उपयोग करके उपयोगकर्ता इंटरफ़ेस बनाने के बारे में बात करते हैं। वास्तव में, यह भाषा सिर्फ इसके लिए बनाई गई थी। विशेष रूप से, इसका मतलब है कि डोम नोड्स को तथाकथित "प्रथम श्रेणी की वस्तुओं" के रूप में भाषा में एम्बेड किया गया है।

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

निम्नलिखित कोड पर विचार करें, जिसमें बटन को रेंडर करने के लिए और इस बटन को क्लिक करने पर कंसोल को संदेश प्रदर्शित करने के लिए रिएक्ट लाइब्रेरी का उपयोग किया जाता है।

 class App extends React.Component { logOut() {   console.log('button clicked!') } render() {   return (     <div className="container">       <button onClick={this.logOut}>click me!</button>     </div>   ) } }

यदि आप इसे इमबा पर फिर से लिखते हैं, तो आपको निम्नलिखित मिलते हैं।

 tag App   def logOut e       log 'button clicked!'   def render       <self.container>           <button :tap.logOut> 'Click me!' Imba.mount <App>

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

इनलाइन टैग। ध्यान दें कि class App extends React.Component का निर्माण class App extends React.Component बहुत सरल रूप में बदल class App extends React.Component गया है - tag App । tag कीवर्ड भाषा में बनाया गया है। DOM टैग भी बिल्ट-इन हैं।
समापन टैग का अभाव। चूंकि पंक्ति संरेखण कार्यक्रम की संरचना को निर्धारित करता है, आपको टैग (उदाहरण के लिए </button> का उपयोग करके) को बंद करने की आवश्यकता नहीं है। यह प्रोग्राम टेक्स्ट के इनपुट को गति देता है और इसके आकार को कम करता है।
सरल वर्ग वाक्य रचना। Imba HTML कक्षाओं के साथ काम करना सरल करता है। अर्थात्, className="container" के बोझिल निर्माण के बजाय className="container" यह टैग को .container जोड़ने के लिए पर्याप्त है।

आपने इम्बा में इवेंट हैंडलर की विशेषताओं को भी देखा होगा। अर्थात्, हम संबंधित हैंडलर को निर्माण का उपयोग करके बटन से :tap.logOut onClick={this.logOut} बजाय इसका उपयोग किया जाता है। उपयोगकर्ता से आने वाली घटनाओं को संभालने के लिए यह कई तरीकों में से एक है। इसके बारे में विवरण यहां पाया जा सकता है ।

डेटा के साथ काम करें

अब बात करते हैं इम्बा में डेटा के साथ काम करने की। निम्न उदाहरण एक रिएक्ट एप्लिकेशन को दिखाता है, जिसमें App घटक की स्थिति में 0. के बराबर एक count चर है। इस चर का मूल्य घटता है या संबंधित बटनों पर क्लिक करके बढ़ता है।

 class App extends React.Component { state = {   count: 0 } increase = () => {   this.setState({     count: this.state.count + 1   }) } decrease = () => {   this.setState({     count: this.state.count - 1   }) } render() {   return (     <div className="container">       <button onClick={this.increase}>Increase!</button>       <button onClick={this.decrease}>Decrease!</button>       <p>{this.state.count}</p>     </div>   ) } }

यहाँ वही है जो इमबा पर दिखेगा।

 tag App   prop count default: 0   def increase       count += 1   def decrease       count -= 1   def render       <self.container>           <button :tap.increase> 'Increase!'           <button :tap.decrease> 'Decrease!'           <p> count Imba.mount <App>

इन दो उदाहरणों की तुलना करते समय आपकी आंख को पकड़ने वाली पहली चीज कोड की मात्रा में अंतर है।

इमबा का उदाहरण लगभग दो गुना छोटा है - दोनों लाइनों की संख्या और कोड की मात्रा के संदर्भ में।

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

स्वत: प्रवेश

आपने देखा होगा कि उपरोक्त उदाहरण में, हम सीधे ऑब्जेक्ट के उदाहरण चर पर पहुँचते हैं, केवल उसके नाम की count उल्लेख करते हैं। प्रतिक्रिया में, इसी बात का उपयोग करके किया जाता है this.state.count निर्माण।

Imba पर हमारे उदाहरण में, कोई self self.count निर्माण का उपयोग भी कर सकता है, हालांकि, self को यहां तक पहुंचाया गया है, इसलिए self वैकल्पिक है। Imba, जब count करने के लिए संदर्भित करता count , तो पता चलता है कि इस तरह के एक चर या तो स्कोप में मौजूद है या ऐप के उदाहरण में।

परिवर्तनशील

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

प्रतिक्रिया एक अलग दृष्टिकोण लेती है, जहां this.state के मूल्य को अपरिवर्तनीय माना जाता है, जिसके परिणामस्वरूप इसे बदलने का एकमात्र तरीका this.setState का उपयोग this.setState ।

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

विकास का माहौल बनाना

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

 git clone https://github.com/somebee/hello-world-imba.git cd hello-world-imba npm install npm run dev

उसके बाद, http://localhost:8080/ पर ब्राउजर पर जाएं और आपको प्रोजेक्ट का मुख्य पेज दिखाई देगा। एप्लिकेशन को संशोधित करने के लिए - फ़ाइल को संपादित करें, जिसे src/client.imba पर पाया जा सकता है।

यदि इम्बा की स्थानीय स्थापना आपको सूट नहीं करती है, तो आप स्क्रिम्बा परियोजना के इंटरैक्टिव ऑनलाइन सैंडबॉक्स का उपयोग कर सकते हैं।

Imba प्रदर्शन

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

इस बेंचमार्क में, जिसे आप इसके पेज पर RUN BENCHMARK बटन पर क्लिक करके घर पर ही चला सकते हैं, हम DOM के साथ उन ऑपरेशनों की संख्या की तुलना करते हैं जिन्हें Imba, React और Vue का उपयोग करके TODO सूची के संशोधन के दौरान एक सेकंड में किया जा सकता है।

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

Imba, React, और Vue प्रदर्शन माप

जैसा कि आप देख सकते हैं, Imba का उपयोग करने का मतलब है कि DOM के साथ बहुत तेज़ी से काम करने की क्षमता।

परिणाम

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

प्रिय पाठकों! क्या आप अपनी परियोजनाओं में इम्बा भाषा का उपयोग करने की योजना बना रहे हैं?

Imba: जावास्क्रिप्ट डोम के साथ तेजी से काम के लिए संगत भाषा