बैकएंड डेवलपर के लिए फ्रंटेंड

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

तो, चलो समस्या पर चलते हैं। मुझे एक लेख याद आता है, और यह भी, कि ह्राब के खुले स्थानों में कई और समान थे। वे सभी कॉमिक के रूप में प्रस्तुत किए जाते हैं, लेकिन जैसा कि वे कहते हैं, "हर मज़ाक में सच्चाई का एक दाना होता है", और यहाँ यह थोड़ा सा भी नहीं है ... लेकिन यहाँ सवाल है, ये सभी चौखटे कितने उपयोगी हैं, क्या उनकी ज़रूरत है?

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

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

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

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

तो, चलो निर्भरता लोड करने के लिए एक ढाल स्क्रिप्ट लिखें। इसका उपयोग kotlin dsl द्वारा इस कारण से किया जाता है कि groovy dsl को फिर से लिखना काफी तुच्छ है, लेकिन इसके विपरीत, यदि कोई पूर्व अनुभव नहीं था तो समय लगेगा।

repositories { mavenLocal() jcenter() } dependencies { classpath("com.github.artfable.gradle:gradle-npm-repository-plugin:0.0.3") } apply(plugin = "artfable.npm") configure<GradleNpmRepositoryExtension> { output = "$projectDir/src/libs/" dependencies = mapOf( Pair("@polymer/polymer", "3.0.5"), Pair("@polymer/app-layout", "3.0.1"), Pair("@polymer/paper-toolbar", "3.0.1"), Pair("@polymer/paper-icon-button", "3.0.1"), Pair("@polymer/iron-icons", "3.0.1"), Pair("@webcomponents/webcomponentsjs", "2.1.3") ) } 

यह प्लगइन हमें npmLoad जोड़ देगा । IDE समूह को अच्छी तरह से जाने देने के लिए, इसे एक समूह में परिभाषित करें

 tasks["npmLoad"].group = "frontend" 

महान, आप हमारे दृश्यपटल के लिए कोड लिखने की कोशिश कर सकते हैं। बिल्ट-इन Intellij सर्वर आपको डिफ़ॉल्ट रूप से बताएगा कि Method Not Allowed , स्क्रिप्ट को आयात के माध्यम से जोड़ने का प्रयास कर रहा है। इससे बचने के लिए, अनुरोध चेकबॉक्स का उपयोग करके अनुमति की जांच करें। (नवीनतम संस्करणों में यह इसके बिना काम करता है)।



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

 import '@polymer/polymer/polymer-legacy.js'; 

यह सिंटैक्स आयात सही नहीं है, क्योंकि एक ब्राउज़र के लिए, पथ केवल '/', './' या '../' से शुरू होना चाहिए। इसके अलावा, इस रूप में इसे या तो रिश्तेदार के रूप में या निरपेक्ष के रूप में नहीं लिया जा सकता है, क्योंकि यहां पर लाइब्रेरी निर्देशिका की शुरुआत के लिए गणना रूट से की गई है। इसलिए, ऐसे रास्तों को ठीक करने की आवश्यकता है, और इसे स्वयं न करने के लिए, आप एक तैयार प्लग-इन ले सकते हैं।

के अनुसार

 classpath("com.github.artfable.gradle:gradle-js-import-fix-plugin:0.0.1") 

 apply(plugin = "artfable.js.import.fix") configure<GradleJsImportFixExtension> { directory = "$projectDir/src/libs" } 

टास्क jsImportFix जोड़ा जाएगा जो सभी आयातों को क्रम में लाएगा।

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

इस विषय पर निर्माण के लिए किसी भी प्लग-इन को ढूंढना कोई समस्या नहीं है, मूल रूप से, वे सभी एक आधार के रूप में लिबास लेते हैं और जावा में एक रैपर होता है । सभी के लिए एकमात्र समस्या (कम से कम उस समय जब मैंने उन पर विचार किया था) निर्भर फ़ाइलों की नकल कर रहा है।

एक उदाहरण:

फाइल करें:

 @import “b”; @import “c”; 

_B और _c फाइलें:

 @import “d”; 

नतीजतन, हम _c फ़ाइल से मुख्य फ़ाइल 2 समान ब्लॉकों में प्राप्त करते हैं। यदि आप आयातक को jsass में जोड़ते हैं, तो आप इसे ठीक कर सकते हैं। दरअसल, इसलिए, मैं यहां फिर से अपने फैसले के साथ हूं (यदि ऐसी कोई आवश्यकता नहीं है, तो दूसरे समाधान का उपयोग करना बेहतर है)।

सूची में npm निर्भरता जोड़ें

 Pair("bootstrap", "4.1.3") 

प्लगिन निर्भरता

 classpath("com.github.artfable.gradle:gradle-sass-plugin:0.0.1") 

 apply(plugin = "artfable.sass") configure<GradleLibsassPluginExtension> { group(delegateClosureOf<GradleLibsassPluginGroup> { sourceDir = "src/sass" outputDir = "src/css" } as Closure<Any>) } tasks.create("processResources") 

अगर java- प्लगइन जुड़ा नहीं है (और हमें इसकी आवश्यकता नहीं है), तो फर्जी कार्य को फर्जी कार्य बनाना होगा । यह निश्चित रूप से एक दोष है, तो मैं निश्चित रूप से इसे ठीक कर दूंगा।

कृपया ध्यान दें कि परिणामी सीएसएस फ़ाइल को सिर से नहीं जोड़ा जाना चाहिए, क्योंकि तब घटक के अंदर यह दिखाई नहीं देगा, लेकिन सीधे घटक के टेम्पलेट में।

अंतिम चरण स्क्रिप्ट को सामान्य रूप से बिल्ड डायरेक्टरी प्राप्त करने के लिए थोड़ा संशोधित करना है, एक तैयार-किए गए प्रोजेक्ट के साथ जो कि ठेस के लिए तैनात किया जा सकता है।

पूर्ण कोड जीथब पर अपलोड किया गया था (आपको बाद में गिटलैब में माइग्रेट करना होगा ...)।

मुझे उम्मीद है कि मूल विचार स्पष्ट है, और फिर आप अपनी पसंद के अनुसार काफी कुछ जोड़ सकते हैं। पढ़ने के लिए धन्यवाद।