मौके और वेब विकास पर चल रहा है

सभी को नमस्कार!

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

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

और यहाँ कैसे है

आधुनिक फ्रंट-एंड डेवलपमेंट के लिए लोकप्रिय टेक्नोलॉजी स्टैक पर विचार करें:

टाइपस्क्रिप्ट + LESS / SCSS / PostCSS + प्रतिक्रिया + Redux / Mobx + वेबपैक

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

टाइपप्रति

कमाल की बात है। जिसने भी कभी वेब के लिए कुछ गंभीर लिखा है, वह इसे समझ जाएगा। अक्सर शुरुआती लोगों के लिए टाइपस्क्रिप्ट के बारे में लेखों में, उदाहरण देते हुए, वे कुछ बहुत ही सरल और केले की चीजों के बारे में बात करते हैं, जैसे कि फ़ंक्शन में टाइप किए गए तर्क पास करना या जावास्क्रिप्ट में टाइप कास्टिंग के विकिसिट्यूड, जिससे आप बच जाते हैं। लेकिन टीएस की क्षमताओं का संकलन चरण में प्रकार की जांच से अधिक और गहरा है, यह पूरे प्रोजेक्ट में "हाथ से" डेवलपर को प्रेरित कर सकता है, एक बार फिर से ठोकर खाने की अनुमति नहीं देता है। लेकिन टीएस की अपनी कमियां हैं: यह एक ब्राउज़र में ट्रांसपेल और इसके सिंटैक्स के बिना काम नहीं करता है, आइए बताते हैं, आंखों में "लहर"। जब आप फ्रंट-एंड के साथ काम करते हैं, तो आपके वर्कफ़्लो में अक्सर यह जाँचना शामिल होता है कि ब्राउज़र में आपका कोड कैसे चलता है, आपको मूल रनटाइम के लिए निरंतर पहुँच की आवश्यकता होती है। परिवर्तनों को प्रतिबिंबित करने के लिए एक परियोजना के पुनर्निर्माण के लिए समय का नुकसान, कुल मिलाकर भारी हो सकता है। यहां तक ​​कि अगर आपके पास सब कुछ है जो आपको चाहिए, तो कैश और अनुकूलित है। क्या करें? मेरा विकल्प: JS + JSDoc का उपयोग करें। हां, TS Static विश्लेषक JSDoc प्रारूप का समर्थन करता है। उसी समय, आप अपने कोड को सीधे ब्राउज़र में देखते हैं और सभ्यता के लाभों का लाभ उठाते हैं। प्रकारों और अन्य संकेतों का वर्णन करने वाले ब्लॉक कोड के साथ मिश्रित नहीं होते हैं और उनकी स्पष्ट सीमाएं होती हैं, जो व्यक्तिगत रूप से मेरे लिए, कोड को "तिरछे" पढ़ने में बहुत मदद करता है। यदि आप VS कोड का उपयोग करते हैं, तो आप अपने कोड की शुरुआत में बस // @ ts-check जोड़कर इस दृष्टिकोण की कोशिश कर सकते हैं। यदि आपको विरासत ब्राउज़रों के लिए समर्थन की आवश्यकता है, तो ES6 + से संकलन, निश्चित रूप से अभी भी आवश्यक होगा, लेकिन केवल उत्पादन संस्करण के लिए। नतीजतन, आप रनटाइम में डिबगिंग को सरल बनाते हैं (जिससे असेंबली के दौरान त्रुटियों और चेतावनियों की अनुपस्थिति नहीं बचती है) और बहुत समय बचाते हैं।

LESS / SCSS / PostCSS

इस सेट से, मेरे पसंदीदा LESS और PostCSS थे। मैं इसके अधिक "मूल" वाक्यविन्यास और विकास के वातावरण के लिए आवश्यक निर्भरता के सापेक्ष आसानी के लिए LESS को प्यार करता था। पोस्टसीएसएस ने एसवीजी और ट्रैक उपसर्गों के साथ सभी प्रकार की चाल बनाने में मदद की। नुकसान, पिछले पैराग्राफ में, मैं निरंतर पुनर्मिलन की आवश्यकता को बुलाऊंगा। खैर, निर्भरताएं खुद। हालांकि, हमारे 2018 वर्ष में, हमारे पास देशी सीएसएस चर के रूप में ऐसी अद्भुत चीज है! यह एक अत्यंत शक्तिशाली चीज है जिसकी कोई भी प्रीप्रोसेसर के साथ तुलना नहीं की जा सकती है: आप अपने चरों को सीधे रनटाइम में पुनर्परिभाषित कर सकते हैं! इससे नई संभावनाओं की पूरी दुनिया खुल जाती है। उदाहरण के लिए, आप बहुत ही सरलता से, "फ्लाई पर", पूरे एप्लिकेशन के विषयों को बदल सकते हैं, साथ ही इसके व्यक्तिगत ब्लॉक भी। सचमुच, एक उपयोगकर्ता कुछ रंग बीनने वाले के साथ एक आवेदन के लिए एक त्वचा को चिपका सकता है, और इसके लिए आपको पूर्व संकलित शैलियों के साथ अलग-अलग पैकेज रखने या अतिरिक्त तर्क के साथ अपने जेएस को बोझ करने की आवश्यकता नहीं है। और बहुत अधिक, अधिक सूक्ष्म और विशिष्ट। मैं मूल आधुनिक सीएसएस का चयन करता हूं। लेकिन अगर आपको IE11 का समर्थन करने की आवश्यकता है तो उदासी ।

प्रतिक्रिया

रिएक्ट ने हमें मॉड्यूलर अपघटन की एक नई अवधारणा ला दी, जो क्लाइंट साइड विकास की जरूरतों पर बहुत अच्छी तरह से गिर गई, क्योंकि घटकों की संरचना ने प्रस्तुति की संरचना को दोहराया, धारणा को सरल बनाने और डेवलपर्स के प्रमुखों के लिए आदेश लाया। इसीलिए, मेरी राय में, वह इतना लोकप्रिय हो गया है और इसलिए वह उसका धन्यवाद करता है। हालांकि, अब रिएक्ट अधिक से अधिक एक कार्गो पंथ के गुणों को प्राप्त करता है: लोग इसे केवल परियोजनाओं में खींचना शुरू करते हैं क्योंकि "हर कोई इसे करता है।" और यह भयानक है, क्योंकि इंजीनियरिंग पसंद, विशेष रूप से इस तरह के एक महत्वपूर्ण मुद्दे में, जितना संभव हो उतना सचेत होना चाहिए। और जागरूकता के लिए, आपको यह समझने की आवश्यकता है कि रिएक्ट खामियों से भरा है। मेरे लिए, यह, सबसे पहले, यह है कि यह देशी डोम के शीर्ष पर बहुत अधिक अमूर्त है और अपनी खुद की बारीकियों की एक बड़ी मात्रा में लाता है जिन्हें आपको सीधे समस्याओं को हल करने के बजाय निपटने की आवश्यकता है। यह विशेष रूप से महसूस और निराशाजनक है यदि आपके कार्य केले के सांचे की तुलना में थोड़ा कम तुच्छ हैं। आप इस विषय पर लंबे समय तक बात कर सकते हैं, JSX, VDOM और बहुत कुछ याद कर सकते हैं, लेकिन हमारे लिए अब मुख्य सवाल यह है: विकल्प क्या है? नहीं, वीयू नहीं। और नहीं, विशेष रूप से, कोणीय। मेरे लिए, ये वेब घटक हैं: मानकों का एक सेट CustomElements + ShadowDOM + ES मॉड्यूल + HTML टेम्पलेट । क्यों? क्योंकि ये वेब प्लेटफ़ॉर्म द्वारा समर्थित मानक हैं, न कि मेटा प्लेटफ़ॉर्म और जेएस ऐड-ऑन।

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

Redux / mobx

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

Webpack

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

परिणाम क्या है?

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

जेएस + सीएसएस + वेब घटक + वेबपैक

पांच "ट्रेडमिल" में से हमारे पास केवल एक ही बचा है, काफी हल्का। और यह "पंखों के पीछे" महसूस करने के लिए पर्याप्त है।

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