2020 के लिए तैयार हो रहा है: क्लाइंट-साइड जावास्क्रिप्ट विकास में 8 रुझान जिनके बारे में आपको जानना आवश्यक है

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

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



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

1. वेब घटकों के साथ काम करने के लिए सिस्टम, रूपरेखा और पुस्तकालयों से स्वतंत्र

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

प्रश्न में घटक कस्टम तत्व मानक का उपयोग करके बनाए गए हैं। यह आपको नए HTML टैग बनाने की अनुमति देता है, उनके गुणों को ठीक करता है - उपस्थिति से लेकर आंतरिक तंत्र और छाया डोम के साथ काम करने की विशेषताएं।

इस क्षेत्र में उल्लेखनीय परियोजनाएँ लिट- html (और लिट-एलिमेंट ), स्टैंसिलजेएस , स्वेल्टजेएस , बिट हैं ।

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

2. चौखटे और पुस्तकालयों के युद्धों के भविष्य के बारे में

एनपीएम से डाउनलोड की संख्या के संदर्भ में, प्रतिक्रिया अभी भी लगातार कोणीय और वीय को दरकिनार कर रही है। कम से कम अभी के लिए ।

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

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


Vue और React, उनके वास्तविक उपयोग के संदर्भ में, बहुत करीब हैं

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

3. घटकों के अलगाव, पुन: उपयोग और संरचना

बिट घटक विकसित करने, उनके साथ सहयोग करने और उनका पुन: उपयोग करने पर केंद्रित एक मंच का एक उदाहरण है

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

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

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

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

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

4. ईएस-मॉड्यूल और सीडीएन

ईएस-मॉड्यूल ईएस 6 मानक का हिस्सा हैं जो बताता है कि ब्राउज़र में मॉड्यूल के साथ कैसे काम किया जाए। इस तकनीक का उपयोग करने से आप कुछ कार्यक्षमता को उन मॉड्यूल में स्थानांतरित कर सकते हैं जिन्हें डाउनलोड किया जा सकता है, उदाहरण के लिए, सीडीएन के माध्यम से। फ़ायरफ़ॉक्स 60 की रिहाई के बाद, हम कह सकते हैं कि ईएस-मॉड्यूल सभी प्रमुख ब्राउज़रों का समर्थन करते हैं । ES मॉड्यूल के लिए समर्थन पर काम भी Node.js. में चल रहा है इसके अलावा, ES मॉड्यूल के लिए समर्थन WebAssembly में जोड़े जाने की उम्मीद है ।

5. घटक-स्तरीय राज्य प्रबंधन

एप्लिकेशन राज्य प्रबंधन के बारे में क्या नया है? इन दिनों, राज्य प्रबंधन वैश्विक Redux भंडार में कुछ भी डालने के लिए उबलता है।

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

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

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

6. घटकों का स्थिरीकरण एक रचना है

तर्क और शैलियों को लागू करने वाले घटकों का पृथक्करण - रचना के माध्यम से घटकों को स्टाइल करने का तरीका

कैसे घटकों को स्टाइल करने के बारे में बहुत कुछ कहा गया है। इस क्षेत्र में कई अवसर हैं। ये एम्बेडेड सीएसएस, सीएसएस मॉड्यूल, जेएस कोड में सीएसएस विवरण, शैलीगत घटक और स्टाइलेबल जैसे मध्यवर्ती समाधान हैं।

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

7. ग्राफ्कॉइन-एपीआई और डेटा-संचालित क्लाइंट एप्लिकेशन

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

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

8. घटक आधारित डिजाइनर उपकरण

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

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

परिणाम

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

प्रिय पाठकों! आप वेब विकास के भविष्य को कैसे देखते हैं?