🥉 ✨ 🌞 फ्रंट-एंड टूलकिट: उपयोगी उपयोगिताओं और सुविधाओं के विकास को गति देने के लिए 👂🏼 🆘 🚊

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

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

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

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

इस पोस्ट में, मैं उपयोगी उपकरण साझा करूंगा जो कि टीम और मैं यूजर इंटरफेस बनाते समय उपयोग करते हैं। वे संयुक्त विकास और आगे परियोजना समर्थन दोनों को बहुत सरल करते हैं।

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

जैसा कि आप शायद पहले से ही ऊपर दिए गए पाठ से समझ गए हैं, इस वेब एप्लिकेशन के इंटरफ़ेस का निर्माण इसकी रूपरेखा के बिना नहीं था। हमने Vue.js. को चुना उसके साथ काम करने के लिए सुखद बनाने के लिए, उन्होंने अतिरिक्त उपकरण भी तैनात किए। इससे हमें विकास प्रक्रिया को यथासंभव अनुकूलित करने में मदद मिली।

Vue सीएलआई

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

Vue CLI मुख्य वेब विकास तकनीकों के लिए समर्थन प्रदान करता है। बॉक्स में से Webpack, Babel, TypeScript, ESLint, Sass जैसे टूल हैं। और इसके अलावा, मोचा और नाइटवॉच का उपयोग करके यूनिट और एंड-टू-एंड परीक्षण के लिए अंतर्निहित समर्थन है।

Vue devtools

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

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

Zeplin

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

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

साथ ही, सभी परिवर्तनों का एक इतिहास है। आप आसानी से ट्रैक कर सकते हैं कि यह प्रारंभिक चरण में कैसे था और अंत में क्या हुआ।

निर्भरता के रूप में url प्राप्त करें

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

इस प्रकार, प्रत्येक समानताएं कर्मचारी के पास यूआई कोड आधार तक पहुंच है, और चूंकि यह गिट है, इसलिए संस्करण की समस्या भी हल हो गई है। अपडेट के कारण कोई समस्या नहीं होगी, कुछ भी नहीं टूटेगा।

पहरेदार

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

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

इसने हमें अपने तकनीकी समर्थन को थोड़ा उतारने की अनुमति दी, हमारे सहयोगियों को अनावश्यक कॉल और कॉल से बचाया।

व्यसनों के खतरों के बारे में

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

चार साल पहले एक शिक्षाप्रद कहानी हुई। एक व्यक्ति ने npm रजिस्ट्री से अपने 11-लाइन पैकेज को हटा दिया और इस तरह लगभग एक हजार प्रोजेक्ट टूट गए। "लेफ्ट-पैड" नामक एक छोटे मॉड्यूल की कमी के कारण अपने अनुप्रयोगों को तैनात करने का प्रयास करते समय दुनिया भर के डेवलपर्स ने त्रुटि संदेश प्राप्त करना शुरू कर दिया।

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