जेएसएक्स को डस्ट टेम्प्लेट का अनुवाद करना

हेलो हब्र! मैं मीट से मिलो हूँ, और यह मेरा पहला हबर पोस्ट है, जो मूल रूप से हमारे तकनीकी ब्लॉग में प्रकाशित हुआ है। आशा है कि आप इसे पसंद करेंगे, और यदि आपके कोई प्रश्न हैं तो कृपया साझा करें और टिप्पणी करें

तो ... प्रतिक्रिया, amirite ???

यह दशक के अंत में दिखाई दिया (अंतहीन जावास्क्रिप्ट फ्रेमवर्क युद्धों से त्रस्त), डोम को गले लगाया, HTML को जावास्क्रिप्ट के साथ मिलाकर सभी को चौंका दिया और वेब विकास परिदृश्य को मान्यता से परे बदल दिया।

उन सभी उपलब्धियों, एक रूपरेखा के बिना भी ।

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


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

कुछ जांच के बाद, रिएक्ट को सबसे अच्छा विकल्प माना गया और हमने इसके साथ जाने का फैसला किया।

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

JSX

रिएक्ट HTML को जावास्क्रिप्ट के साथ JSX नामक प्रारूप में मिलाता है। यद्यपि यह एक टेम्पलेट भाषा की तरह दिखता है, JSX वास्तव में सिर्फ एक सिंटैक्स, या सिंटैक्टिक शुगर है यदि आप करेंगे, तो रिएक्ट कॉल के लिए, HTML के समान दिखने वाला।

हमारी अपनी HTML फाइलें अच्छी तरह से व्यवस्थित थीं, और हमारा ज्यादातर रेंडर template.render() रूप में किया गया था। रिएक्ट करते हुए हम इस आदेश और सादगी को कैसे बरकरार रख सकते हैं? मेरे लिए, तकनीकी कठिनाइयों को एक तरफ, एक विचार स्पष्ट था: हमारे मौजूदा कॉलों को जेएसएक्स कोड से बदलें।



कुछ प्रारंभिक योजना के बाद मैंने इसे दिया और एक कमांड-लाइन टूल को लपेटा जो दो सरल चीजें करता है:

1. UI (जावास्क्रिप्ट) फ़ाइल में संदर्भित टेम्पलेट पढ़ता है
2. HTML सामग्री के साथ template.render() कॉल को बदलें

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

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



लो और निहारना, कई दिनों के बाद Dust.js HTML जैसे टेम्पलेट्स को JSX रिएक्ट कोड में बदलने के लिए एक उपकरण का जन्म हुआ। हमने डस्ट का इस्तेमाल किया, लेकिन पार्सर्स की एक विस्तृत उपलब्धता के साथ, प्रक्रिया किसी अन्य लोकप्रिय टेंपलेटिंग भाषा के अनुवाद के लिए समान होनी चाहिए।

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

 <div class="encounters {?isExpanded}is-expanded{/isExpanded}"> {?showTooltip} <div class="tooltip"> <span>{#_t}{encounters_tooltip}{/_t}</span> <div class="icon"> {@Icon name="icon-encounters" size="stretch" /} </div> </div> {/showTooltip} <div class="images"> {#images} <img src="{src}"> <input type="radio" id="{id}" {?selected}checked{/selected} /> <label for="showme-{id}"> {name} </label> {/images} </div> <div class="footer"> {! encounters-footer template will be injected here !} </div> </div> 

इसके JSX कोड के बराबर:

 <div className="encounters {props.isExpanded ? 'is-expanded' : ''}"> {props.showTooltip ? <div className="tooltip"> <span>{i18n.get('encounters_tooltip')}</span> <div className="icon"> <Icon name="icon-encounters" size="stretch" /> </div> </div> : null} <div className="images"> {props.images.map(item => <img src={item.src}> <input type="radio" id={`showme-${item.id}`} defaultChecked={item.selected ? true : undefined} /> <label htmlFor={`showme-${item.id}`}> {item.name} </label> )} </div> <div className="footer"> {/* encounters-footer template will be injected here */} </div> </div> 

यहां साइड-बाय-साइड तुलना देखें।

इसके बाद, हमारी प्रक्रिया बहुत सीधी थी। हमने अपने टेम्प्लेट को स्वचालित रूप से एक प्रारूप से दूसरे प्रारूप में बदल दिया, और सब कुछ अपेक्षित रूप से काम किया (धन्यवाद, स्वचालित परीक्षण)। आरंभ करने के लिए, हमने अपने पुराने template.render() संरक्षित किए हैं।

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

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



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

ES7 / 8 / अगला, एल्म और कारण के उदय के साथ, टाइपस्क्रिप्ट और इसी तरह के समाधानों का उल्लेख नहीं करने के लिए, कोड जो एक बार *.js था। जावास्क्रिप्ट से अधिक से अधिक अप्रभेद्य होता जा रहा है, और यह प्रवृत्ति ऐसी है कि यह जारी रखने के लिए सेट है। इससे अभिभूत होने के बजाय, हमारे लाभ के लिए इसका उपयोग क्यों न करें?

खुला स्रोत

एक काम को अच्छी तरह से करने की भावना में, हमने इन आंतरिक उपकरणों को कई भागों में बनाया है:

1. dust2jsx - jsx अनुवाद के लिए वास्तविक धूल के लिए जिम्मेदार पैकेज
2. रट (सभी चीजों को प्रतिक्रिया दें) - डिस्क पर फ़ाइलों को पढ़ने / लिखने के लिए कमांड लाइन टूल। संदर्भित टेम्प्लेट सहित के लिए जिम्मेदार है, और कोड को बदलने के लिए आंतरिक रूप से dust2jsx का उपयोग करता है

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