निवेश में, "अभी बुरा - अच्छा है" की अवधारणा है। निवेशक नियमित रूप से भविष्य के लिए अपनी कमाई का 10, 20% या यहां तक कि अपनी कमाई का 30% भाग निकालता है। वह इस पैसे को बॉन्ड, स्टॉक, ओएफजेड, ईटीएफ में निवेश करता है - जो इसके लायक है। अब, पल में, निवेशक अपनी कमाई को निकाल रहा है, खुद को कुछ लाभों से वंचित कर रहा है, ताकि भविष्य में 10-20 वर्षों के क्षितिज पर, वह निवेश से लाभान्वित हो। भविष्य में लाभ आज की कठिनाइयों को कवर करेंगे।
अलेक्सी ओखारिमेंको (
obenjiro ) द्वारा घोषित एक ही रणनीति के बारे में, लेकिन विकास के संबंध में - एक दिन खोना बेहतर है, और फिर 5 मिनट में उड़ना।
स्रोतफ्रंटेंड कॉन्फ 2018 में, एलेक्सी ने बताया कि, अब बहुत समय खो दिया है, अंततः इसे बाद में बचाएं। यह रिपोर्ट ऊब की भावना के बारे में नहीं है और न कि नीरस और नियमित कार्यों से निपटने के बारे में, बल्कि
अधिकतम समय कैसे
बिताएं - कितना है, सब कुछ खर्च करें और देखें कि इसके बारे में क्या आता है। रिपोर्ट की प्रतिलेख डिबगिंग, परीक्षण, अनुकूलन, मचान और विभिन्न परियोजनाओं के लिए सत्यापन के लिए उपकरण लिखने का अनुभव है। एक बोनस के रूप में, एलेक्सी कई मौजूदा उपकरणों और उनके द्वारा लाए जाने वाले लाभों के बारे में बात करेंगे। आइए जानें कि आपको इस पर समय बर्बाद करने की आवश्यकता है या नहीं।
स्पीकर के बारे में: एलेक्सी ओखरीमेन्को एविटो फ्रंटेंड आर्किटेक्चर में एक डेवलपर है, जहां वह लाखों लोगों के जीवन को थोड़ा सुधारता है। पॉडकास्ट
"5 मिनट के कोणीय" को छोड़ देता है , और नींद और पॉडकास्ट से अपने खाली समय में,
टिंकॉफ़ के लोगों के साथ मिलकर
कोणीय मीटअप का आयोजन करता है, और विभिन्न और
विवादास्पद रिपोर्टों की एक बड़ी संख्या बनाता है।
मैं समय कहाँ खो सकता हूँ?
शून्य कदम एक मैक / iMac खरीदने के लिए है और तुरंत समय खोना शुरू कर देता है, या लैपटॉप पर लिनक्स डाल देता है और इसमें सभी काम करने का समय खो देता है, कॉन्फ़िगर बदल रहा है। मैं भी जेंटू के साथ शुरू करने की अत्यधिक सलाह देता हूं।
8 बिंदु हैं जिन पर हम समय बिता सकते हैं।
- टर्मिनल।
- डिज़ाइन करें।
- एक प्रोजेक्ट बनाएं।
- कोड जनरेशन।
- वर्तनी कोड।
- पुनर्रचना।
- परीक्षण।
- डिबगिंग।
हम क्रम में शुरू होने वाले ठोस नुकसान की ओर बढ़ते हैं।
अंतिम
जहां हम टर्मिनल पर अपना सब कुछ खोने के लिए समय बिता सकते हैं?
अपने कार्यक्षेत्र को व्यवस्थित करें - फ़ोल्डर बनाएँ "मेरा काम", "मेरे शौक परियोजनाएं" और उनमें सब कुछ डाल दिया। अतिरिक्त सॉफ़्टवेयर स्थापित करने के लिए अपने आप को
Homebrew सेट करें जिसका उल्लेख किया जाएगा।
मैक पर
iTerm2 , और डिफ़ॉल्ट टर्मिनल रखो - इसे बाहर फेंक दो।
ओह-माय-ज़श जैसे ऐड-ऑन स्थापित करें, जो बहुत ही शांत प्लगइन्स के एक गुच्छा के साथ आते हैं।
डिलीवर
tmux - टर्मिनल मल्टीप्लेक्सर। यह टर्मिनल के लिए एक कार्यक्रम है, जो आपको एक विंडो में कई विंडो खोलने और इसके अलावा सत्र का समर्थन करने की अनुमति देता है। आमतौर पर, यदि आप टर्मिनल बंद करते हैं, तो सब कुछ टूट जाता है और समाप्त हो जाता है, और tmux काम करना जारी रखेगा, भले ही आपने इसे बंद कर दिया हो। अगर मैंने कभी tmux के साथ काम नहीं किया है, तो मैं
DBMS स्टूडियो से समीक्षा की सलाह देता हूं।
उपनाम लिखिए । हर बार जब आप टर्मिनल में एक से अधिक बार कुछ लिखते हैं - अपने आप को उपनाम लिखें, यह काम में आएगा। दो बार - पहले से ही बहुत, निश्चित रूप से एक तीसरा, छठा और दसवां होगा।
अतिरिक्त उपकरण वितरित करें, उदाहरण के लिए,
jespespath या संक्षिप्त
रूप में - jp। इसे काढ़ा के माध्यम से स्थापित किया जा सकता है और JSON-files में दिलचस्प क्वेरी-अनुरोध कर सकते हैं।
brew tap jmespath/jmespath brew instal jp
उदाहरण के लिए, आपने JSON फ़ाइलों को पैक किया है, आप सब कुछ के माध्यम से जा सकते हैं और यह पता लगा सकते हैं कि आपके एप्लिकेशन और प्रोजेक्ट्स में कौन से रिएक्ट के कौन से संस्करण हैं।
अपने काम को स्वचालित करें - एक ही फाइल को कई बार न खोलें!
अब बात करते हैं कि यह सब कहां खर्च करना है। उपरोक्त सभी समय की एक छोटी सी हानि है, आप शेल लिपियों में अधिक खो सकते हैं।
शैल लिपि
यह एक प्रोग्रामिंग भाषा है, जो मुख्य रूप से अपने स्वयं के सिंटैक्स के साथ बैश के लिए है।
#!/bin/bash for dir in 'ls $YOUR_TOP_LEVEL_FOLDER'; do for subdir in 'Is $YOUR_TOP_LEVEL_FOLDER/$dir' do $(PLAY AS MUCH AS YOU WANT); done done
भाषा भरी हुई है - कुछ लोग गेम और वेब सर्वर बनाते हैं, जो मुझे करने की सलाह नहीं देते हैं। मैं उन सभी कामों की सलाह देता हूं जो इसे फिर से खर्च करने के लिए समय लेते हैं और इसे पूरी तरह से फ़ाइल में लिखते हैं। क्यों? सभी परिचित डेवलपर्स जो लंबे समय से उद्योग में काम कर रहे हैं, बस विन्यास के लिए अपना खुद का GitHub रिपॉजिटरी बनाते हैं और कॉन्फ़िगरेशन को उनके TMUX - टर्मिनल मल्टीप्लेयर, शेल लिपियों के लिए आरंभीकरण के लिए रखते हैं।
क्यों एक बार पहले से ही एक बार किया गया है पर एक टन खर्च करते हैं? फिर, जब आप दूसरी नौकरी पर जाते हैं, तो वे आपके कंप्यूटर को काम पर बदल देंगे, मदरबोर्ड जल जाएगा और आप
पर्यावरण को स्थापित करने के लिए एक या दो या तीन दिन फिर से खर्च करेंगे। जब आपके पास ऐसा भंडार होगा, तो सेटअप और स्थापना में केवल 10 मिनट लगेंगे।
डिज़ाइन
आमतौर पर हर कोई एक बार में बहुत प्रेरित होता है: “हाँ, डिजाइन! यूएमएल आरेख! ”, लेकिन जब मैं यूएमएल शब्द को जोर से कहता हूं, तो कई परिचित प्रोग्रामर नोटिस करते हैं:
- 2018 में?! क्या बात है तुम्हारे साथ? यूएमएल अतीत का एक भयानक अवशेष है। आप एक लाश क्यों खोद रहे हैं? फावड़ा गिरा दो!लेकिन यूएमएल बहुत उपयोगी है। उदाहरण के लिए, एक स्क्रैम रैली में, जावा डेवलपर एक पायथन प्रोग्रामर के रूप में सुनता है, बैकेंड फीचर आर्किटेक्चर पर चर्चा करता है। वह उदास होकर अपना सिर रगड़ता है और महसूस करता है कि उसे कुछ भी समझ नहीं आ रहा है, लेकिन बस अपना एक घंटा खो देता है। एक जावा डेवलपर पायथन प्रोग्रामर के साथ बातचीत नहीं कर सकता है - उसने यह नहीं कहा कि कोड कैसे लिखना है, कक्षाओं का उपयोग करना, मिश्रण, या कुछ और। वह बस इस मामले में शामिल नहीं है। हमारी कंपनी में जावास्क्रिप्ट, पायथन, और लुआ है। पल में 2/3 लोग ऊब गए हैं: पहले एक 2/3, फिर अन्य। यूएमएल इस समस्या को हल करता है।
यूएमएल सिस्टम डिजाइन के लिए एक सार्वभौमिक अमूर्त दृश्य भाषा है, जो आपको भाषाओं की विशेषताओं को अनदेखा करने की अनुमति देती है।
मैं अपने दो पसंदीदा उदाहरण दूंगा।
अनुक्रम आरेख
ये चित्र समय के साथ बातचीत के इतिहास को दिखाने में मदद करते हैं।
ऊर्ध्वाधर वाई अक्ष पर, एक अस्थायी निर्भरता नीचे जाती है: पहले हमें एक प्रमाणीकरण अनुरोध मिलता है, फिर हम एक उत्तर देते हैं, और फिर हम लॉग में कुछ डालते हैं। क्षैतिज अक्ष पर एक्स पहले से ही किसी घटना में पात्रों - प्रतिभागियों के बीच एक सीधी बातचीत है।
व्यक्तिगत रूप से, मैं समय-समय पर अनुप्रयोगों में प्रक्रिया प्रमाणीकरण का वर्णन करने के लिए
अनुक्रम डायग्राम का उपयोग करता हूं। ऐसा करने में, मैं, एक JS डेवलपर, पायथन, लुआ और जावा के बैकएंड के साथ एक आम भाषा पाता हूं। हम सभी एक दूसरे को समझते हैं और जानते हैं कि परिणामस्वरूप कोड कैसे काम करेगा, और हम इस या उस भाषा के विशिष्ट कार्यान्वयन के बारे में परेशान नहीं होते हैं।
वर्ग आरेख
ये चार्ट भी बहुत उपयोगी हैं। जावास्क्रिप्ट में कक्षाएं हैं, आरेख का क्या मतलब है? लेकिन टाइपस्क्रिप्ट है, और इसके साथ आप इंटरफेस, अमूर्त कक्षाएं प्राप्त कर सकते हैं - अंतिम वास्तुकला का एक पूरा प्रतिनिधित्व।
एक मिनट का डिज़ाइन एक सप्ताह की कोडिंग को बचाता है।
PlantUML
मैं
PlantUML जावा लाइब्रेरी का उपयोग करता
हूं । इसके साथ आप कुछ प्रकार के जटिल डीएसएल का उपयोग कर सकते हैं, जिसमें, उदाहरण के लिए, संकेत मिलता है कि लिस्ट को एनालाइस्ट से विरासत में मिला है, एब्सट्रैक्ट से संग्रह, साथ ही इंटरैक्शन, एकत्रीकरण, गुण, इंटरफेस और अन्य सभी।
@startuml abstract class AbstractList abstract AbstractCollection interface List interface Collection List <|— AbstractList Collection <|— AbstractCollection Collection <|— List AbstractCollection <|— AbstractList AbstractList <|— ArrayList class ArrayList { Object[ ] elementData size() } enum TimeUnit { DAYS
नतीजतन, मुझे अंतिम आरेख मिलता है।
यह सब अच्छी तरह से काम करता है, विजुअल स्टूडियो कोड के लिए प्लगइन्स हैं।
एक और दिलचस्प आवेदन है।
StarUML
हम सबसे सरल आरेख खींचते हैं: एक आधार वर्ग है जिसमें से परीक्षण वर्ग विरासत में मिला है।
इसके बाद हम
StarUML का उपयोग
करते हैं । यह बहुत महंगा नहीं है और जावा को निर्यात कर सकता है। कोई उपकरण नहीं है जो टाइपस्क्रिप्ट कोड के लिए यूएमएल आरेखों का निर्यात करेगा, लेकिन हम सिर्फ स्टारयूएमएल से जावा कोड का उपयोग करके निर्यात कर सकते हैं।
JSweet
फिर हम
JSweet लागू
करते हैं - एक पुस्तकालय जो आपको जावा कोड को टाइपस्क्रिप्ट या जावास्क्रिप्ट कोड में बदलने की अनुमति देता है।
जावा कोड ...
import java.until.*; public class BaseClass { public BaseClass(){ } protected String baseAttribute; }
... JSweet टाइप टाइप कोड में कन्वर्ट का उपयोग कर:
class BaseClass { public constructor) { this.baseAttribute = null; } baseAttribute : string; } BaseClass["_class«] = «BaseClass»;
यहां एक अतिरिक्त पैरामीटर
_class - यह जावा की एक विशेषता है, इसे हटाया जा सकता है। नतीजतन, हमें आरेखों से टाइपस्क्रिप्ट कोड की एक तैयार-निर्मित बॉयलरप्लेट मिली - एक आधार जिस पर आप काम कर सकते हैं। इसके अलावा, यह आधार सभी के लिए डिज़ाइन और स्पष्ट है।
यूएमएल डिजाइनिंग समय निश्चित रूप से इसके लायक है।
परियोजना निर्माण
जो हर बार Webpack को कॉन्फ़िगर करता है और एक नए प्रोजेक्ट में Webpack-config बनाता है - दोस्तों, आपके साथ क्या गलत है?! क्या सब ठीक है? क्या आपको कुछ मदद की ज़रूरत है? यदि आपको बंधक बनाया जाता है - टिप्पणियों में निर्देशांक लिखें, हम एक बचाव हेलीकॉप्टर भेजेंगे।
इससे बचने का सबसे आसान तरीका है और हर बार एक ही चीज़ को कॉन्फ़िगर न करना
स्थानीय रूप से GitHub पर एक सामान्य रिपॉजिटरी बनाना या GitLub CI को उठाना, इस रिपॉजिटरी को क्लोन करना, इसमें जाना और git फ़ोल्डर को हटाना है।
git clone something cd something rm -rf .git
अब हमारे पास एक संदर्भ परियोजना है जिससे हम क्लोनिंग कर रहे हैं। इस दृष्टिकोण के साथ आप बहुत सस्ते
बूटस्ट्रैपिंग प्राप्त कर सकते हैं।
योमन - पदावनत। निस्तब्ध - पदावनत
वह
योमन पदावनत बहुत अभिमानी है। यह अपवित्र नहीं है, बस कम और कम उपयोग करते हैं, जैसे
स्लश । ये दो समान उपकरण हैं, बस एक अलग आधार के साथ:
येओमान ग्रंट और कोड पीढ़ी है। स्लश गल्प और कोड जेनरेशन है ।
इस तथ्य के बावजूद कि उपकरण दिलचस्प हैं, अब दूसरों को अधिक बार उपयोग किया जाता है।
कोणीय सीएलआई, रिएक्ट ऐप बनाएं, Vue CLI
कौन कोणीय के साथ काम करता है - कोणीय सीएलआई का उपयोग करें। React App बनाएं - जो React के साथ काम करता है। Vue CLI - Vue.JS के प्रशंसक।
अधिकांश पहले से ही इन उपकरणों में चले गए हैं। सीएलआई के साथ काम करने के लायक एक मुख्य तर्क
एकरूपता है । यदि आप सीएलआई का उपयोग करके अपनी परियोजना को हथियाना भूल गए हैं, तो आप सुनिश्चित हैं कि आपके बाद आने वाले व्यक्ति को परियोजना की संरचना का पता चलेगा: टीमों, सुविधाओं, कि आप एंड-टू-एंड और यूनिट परीक्षण चला सकते हैं। ये उपकरण बहुत अच्छे हैं।
क्या यह योमन के बजाय सीएलआई का उपयोग करके बूटस्ट्रैपिंग परियोजनाओं पर समय बिताने के लिए लायक है? हां, संकोच न करें।
कोड जनरेशन
हमारे पास एक निश्चित कोड आधार है। आमतौर पर, जब हम एक परियोजना शुरू करते हैं, तो हम पहले रूटिंग बनाते हैं, और फिर Redux - इसके बिना हम कैसे कर सकते हैं? प्रत्येक फ्रेमवर्क में एक विशेष कोड जनरेशन टूल होता है। कोणीय में, यह
सीएलआई स्कैमैटिक्स है । Vue CLI में
Vue CLI प्लगइन्स जेनरेट करने के लिए एक अलग सेक्शन है: आप प्लगइन्स सेक्शन में हमारे प्रोजेक्ट्स
के लिए
कुछ कोड जेनरेट कर सकते
हैं ।
Redux सीएलआई
मैं रिएक्ट और रेडक्स सीएलआई पर ध्यान केंद्रित करना चाहता हूं, क्योंकि मेरे अभ्यास से, यह रिएक्ट प्रोग्रामर हैं जो कम से कम कोड पीढ़ी में लगे हुए हैं और इसे देखने के लिए दर्द होता है। हर बार लोग एक ही फाइल बनाते हैं और शिकायत करते हैं कि Redux के साथ काम करना कठिन है, आपको हर चीज का एक गुच्छा बनाने की जरूरत है। तो पहले से ही उपकरण हैं!
यह
Redux CLI है , जो आपके लिए एक डॉक फ़ाइल बनाएगा, जिसमें प्रभाव, और रिड्यूसर और संबंधित क्रियाएं और "बेवकूफ" घटक और "स्मार्ट" घटक होंगे। इसके अतिरिक्त, आप Redux CLI का उपयोग करके अपने घटकों या कोड आधार को उत्पन्न कर सकते हैं। Redux CLI बस स्थापित किया गया है, आप या तो इसका उपयोग करके एक परियोजना बना सकते हैं, या इसे तैयार किए गए एक में इनिशियलाइज़ कर सकते हैं, उदाहरण के लिए, Create React App का उपयोग करके।
npm i redux-cli -g blueprint new <project name> blueprint init blueprint g dumb SimpleButton
एक और सार्वभौमिक उपकरण है जो ढांचे पर निर्भर नहीं करता है -
प्लॉप ।
खटखटाने से
मुझे उसके बारे में हाल ही में पता चला। प्लॉप पिछले एक के समान है: इस उपकरण को शुरू करके, आप सभी आवश्यक बुनियादी घटकों को बना सकते हैं। इंगित करें कि आपके एप्लिकेशन में कौन से घटक शामिल हैं और बस उन्हें उत्पन्न करें। इसलिए आप मुख्य कोड आधार बनाने में समय बर्बाद न करें। एक उपयोगकर्ता कहानी और विनिर्देश होने से आप बुनियादी कार्यक्षमता, परीक्षण, मूल शैली उत्पन्न कर सकते हैं -
बड़ी मात्रा में काम बचा सकते हैं ।
आपको सभी उपकरणों को ट्यून करना होगा - मैं समय-समय पर रिएक्ट ब्लूप्रिंट को ट्यून करता हूं, मेरा घटक पुस्तकालय बनाता हूं, लेकिन
यह समय भुगतान करता है ।
कोड लेखन
तुच्छता होगी।
कोड स्निपेट
कोड स्निपेट्स आपको एक छोटा टुकड़ा, एक प्रमुख कोड शब्द लिखने और कार्यक्षमता का तैयार-तैयार टुकड़ा प्राप्त करने की अनुमति देता है। उदाहरण के लिए, आप
@Component लिखकर एक कोणीय घटक बना सकते हैं।
React और Vue के लिए, समान कोड स्निपेट हैं।
आम कोड स्निपेट्स के साथ एक समस्या है। अधिक पेशेवर डेवलपर, कम वह कोड स्निपेट्स का उपयोग करता है - केवल इसलिए कि वह पहले से ही जानता है कि सब कुछ कैसे लिखा गया है और उन्हें बनाने के लिए वह बहुत आलसी है। उन्हें पहले से ही याद था कि इस घटक को कैसे लिखना है।
मैं आपको याद दिला दूं कि
हमारा लक्ष्य बिना उपयोगी कुछ किए
समय बिताना है। इसलिए, हम बैठते हैं और कोड स्निपेट लिखते हैं। यहां आप असीम रूप से बड़ी मात्रा में समय बिता सकते हैं, और लक्ष्य प्राप्त किया जाएगा।
जब मैंने
i-bem.js के साथ काम किया, व्यक्तिगत रूप से, स्निपेट्स काम में आए:
modules.define("button<i>«,</i> [«i-bem-dom»], function(provide, bemDom) { provide( bemDom.declBlock( this.name, { /* */ }, { /* */ } ) ); });
यह घोषणा जटिल नहीं है, लेकिन वाक्यविन्यास न तो कोणीय है और न ही रिएक्ट है, न ही वीयू है, और इसे पहले सौ बार याद रखना बहुत मुश्किल है। एक सौ पहले याद किया जाता है। मुझे सताया गया था, बहुत समय बिताया, और फिर इन घटकों को केवल इस तथ्य के कारण बड़े पैमाने पर बनाना शुरू कर दिया कि मैंने कोड स्निपेट का उपयोग किया।
वेबस्टॉर्म के साथ काम करने वालों के लिए, यह बहुत उपयोगी नहीं है, बस क्योंकि इसमें प्लग-इन का इतना बड़ा पारिस्थितिकी तंत्र नहीं है और, मूल रूप से, सब कुछ शुरू में शामिल है - यह एक
पूर्ण आईडीई है ।
वीएसकोड एक्सटेंशन / वीआईएम एक्सटेंशन
विज़ुअल स्टूडियो कोड और
वीआईएम के संपादकों के साथ स्थिति अलग है। उनसे कोई लाभ प्राप्त करने के लिए, आपको प्लगइन्स इंस्टॉल करने की आवश्यकता है। सभी अच्छे प्लगइन्स को खोजने और उन्हें स्थापित करने के लिए आप कई दिन बिता सकते हैं - बहुत सारे प्लगइन्स हैं!
मैंने उन्हें खोजने के लिए एक पागल राशि की हत्या की, जो मैं आपको सलाह देता हूं। आप घंटों तक बैठ सकते हैं, देख सकते हैं, उन्हें देख सकते हैं, सुंदर एनिमेटेड जिफों पर - एक चमत्कार! टिप्पणियों में लिखें यदि आप चाहते हैं कि मेरे पास वह सब कुछ है जो मेरे पास है।
ऐसे उपकरण हैं जो स्वचालित रूप से कोड की जटिलता को उजागर करते हैं, जो परीक्षण पास करते हैं, जो नहीं करते हैं, जब आप कोड में सीधे विफलता का कारण देख सकते हैं, तो कौन सा कोड पास हुआ या नहीं, ऑटोकम्प्लिट्स, ऑटोप्रेफिक्स - यह सब प्लग इन में है।
यहां आप बहुत समय बिता सकते हैं, और हम अपने लक्ष्य को प्राप्त करेंगे। बेशक, प्लगइन्स कोड लिखने के लिए थोड़ा प्रासंगिक नहीं हैं, लेकिन कल्पना करें कि वे हमें इसे लिखने में मदद करते हैं।
रिफैक्टरिंग
यह मेरा पसंदीदा विषय है! और इतना ही कि मेरे पास रिफैक्टरिंग पर एक अलग रिपोर्ट है:
“रिफैक्टिंग - कहां? कहाँ तक? कब? कहाँ से? क्यों? क्यों और कैसे? ” मैं विस्तार से बताता हूं कि यह क्या है और इसके साथ कैसे काम करना है।
मैं
आपको तुरंत चेतावनी देता हूं कि
आप जिस चीज की कल्पना करते हैं , वह
रिफलेक्टिंग नहीं है । आमतौर पर, इसका मतलब है: "मैंने कोड आधार में सुधार किया और एक नई सुविधा जोड़ी।" यह रिफैक्टिंग नहीं है। यदि आपके पास अभी संज्ञानात्मक असंगति है, तो रिपोर्ट को देखें और यह पारित हो जाएगा।
एंगुलरज ग्रंट -> वेबपैक
मैं एक निर्देशात्मक कहानी बताना चाहता हूं। हमारे पास एक बहुत पुराना एंगुलरजेएस प्रोजेक्ट था, जिसे बैंट कॉन्क्लेनेशन के साथ ग्रंट का उपयोग करके बनाया गया था। परियोजना को कोणीय के पहले और दूसरे संस्करणों के दौरान लिखा गया था। तदनुसार, वहां सब कुछ बहुत सरल था: फाइलें संक्षिप्त थीं, फिर बदसूरत हो गईं, और यह बात है। कुछ बिंदु पर, हमें एहसास हुआ कि हमें वेबपैक पर जाना होगा। हमारे पास एक विशाल विरासत कोड आधार है - इसे वेबपैक में कैसे अनुवाद किया जाए?
हमने कुछ दिलचस्प दौरे किए। सबसे पहले, उन्होंने
lebab.io लाइब्रेरी का
रुख किया ।
Lebab.io
यह लाइब्रेरी आपको ES5 से ES6 और बहुत अच्छी तरह से कोड बदलने की अनुमति देती है। वह पुराने कोड आधार को लेती है और इसे एक नए रूप में बदल देती है: आयात को सम्मिलित करती है, नई लाइनों, कक्षाओं, सेट
let सही ढंग से और
const है - सब कुछ आपके लिए करता है। इस संबंध में, एक बहुत अच्छा पुस्तकालय।
हमने इस प्लगइन को स्थापित किया, फ़ाइल कोड को
Lebab.io के माध्यम से
चलाया । उसके बाद, उन्होंने बस
मूंछें टेम्प्लेट और कोड लिया, जो एक घटक दृष्टिकोण के साथ नए कोणीय 1.6 और 1.5 के तहत अलग दिखता था। नियमित की मदद से, हमने आवश्यक टुकड़ों को बाहर निकाला, मूंछों की मदद से हमने अपने टेम्पलेट को एक अलग तरीके से प्रस्तुत किया और हमारी सभी फाइलों के माध्यम से एक चक्र के माध्यम से चला गया।
var object_to_render = {key: «value», ...}; fs.readFile(path_to_mustache_template, function (err, data) { if (err) throw err; var output = Mustache.render(data.toString(), object_to_render); fs.saveFileSync(path_to_mustache_template); }):
परिणामस्वरूप, हमने विरासत कोड की एक बड़ी मात्रा को एक आधुनिक प्रारूप में परिवर्तित किया और वेबपैक से तेजी से जुड़ा। मेरे लिए व्यक्तिगत रूप से, कहानी बहुत शिक्षाप्रद है।
Jsfmt
यह एक उपकरण है जो आपको कोड आधार को प्रारूपित करने और नियमित खोज के साथ नहीं, बल्कि
शब्दार्थ के साथ खोज करने की अनुमति देता है। हम अपने पुस्तकालय, फ़ाइल सिस्टम को कनेक्ट करते हैं, फ़ाइल पढ़ते हैं और कुछ खोजना चाहते हैं। नीचे एक सार उदाहरण है, हम वर्तमान में कोणीय के साथ काम कर रहे हैं।
var jsfmt = require('jsfmt'); var fs = require('fs'); var js = fs.readFileSync('component.js'); jsfmt.search(js,"R.Component(a, { dependencies : z })").map((matches, wildcards) => { console.log(wildcards.z); });
यह हमारा अनुरोध जैसा दिखता है:
<b>R.Component</b> (a, { dependencies: z })
R/Component अपनी
R लाइब्रेरी और कुछ
Component ।
यह हिस्सा बहुत अजीब लगता है:
R.Component<b> (<u>a</b></u>, { dependencies: <b><u>z</b></u> })
यह मान्य जावास्क्रिप्ट प्रतीत नहीं होता है - और यह करता है। हम प्लेसहोल्डर्स की तरह छोटे अक्षर
डालते हैं , और
Jsfmt को
बताते हैं कि हमें इसमें कोई दिलचस्पी नहीं है: एक ऑब्जेक्ट या एक सरणी, एक स्ट्रिंग या बूलियन मान, अशक्त या अपरिभाषित - यह कोई फर्क नहीं पड़ता। हमारे लिए
ए और
जेड के लिंक प्राप्त करना महत्वपूर्ण है, जिसके बाद, जब हम पूरे कोड बेस से गुजरते हैं, तो हम
जेड के सभी वेरिएंट पाएंगे। उदाहरण के लिए, हम इस घटक की सभी निर्भरता पा सकते हैं। इसके लिए धन्यवाद, आप जटिल रीफैक्टरिंग कर सकते हैं।
उपकरण का उपयोग करते हुए, मैं पेड़ों और विश्लेषण का उपयोग करते हुए शब्दार्थ दृष्टिकोण के साथ एक विशाल कोड आधार को फिर से बनाने में सक्षम था।
मुझे जटिल क्वेरी, जटिल नियमित या एक वाक्यविन्यास पेड़ को लिखना नहीं था - मैंने सिर्फ एक क्वेरी बनाई और इसके लिए क्या संकेत दिया।
दो अतिरिक्त उपकरण
परावर्तन में, एक साधारण बात है जिसके बारे में मुझे कहना है। यदि आप किसी चीज को रिफ्लेक्टर करना चाहते हैं, तो विजुअल स्टूडियो कोड में, कोड का चयन करें, और वहां मौजूद संकेत और रीफैक्टरिंग विकल्प होंगे। उदाहरण के लिए, एक निकालने की विधि, एक इनलाइन विधि।
WebStorm का एक संदर्भ मेनू है जिसे कुंजियों के संयोजन का उपयोग करके कॉन्फ़िगरेशन और निर्भर कोड आधार के आधार पर बुलाया जा सकता है।
सामान्य तौर पर, WebStorm में अधिक कमांड होते हैं, यह अब Visual Studio कोड से अधिक विकसित है।
परीक्षण
अब सबसे दिलचस्प और प्रेरणादायक :)
सेलेनियम आईडीई
पहले एक छोटी सी कहानी। किसी तरह परीक्षक मेरे पास आए और बोले:
- हम अंत-से-अंत परीक्षण लिखते हैं, हम उन्हें स्वचालित करना चाहते हैं, और हमारे पास एक सेलेनियम आईडीई है।सेलेनियम आईडीई फ़ायरफ़ॉक्स के लिए एक प्लगइन है जो एक ब्राउज़र में आपके कार्यों को रिकॉर्ड करता है। यह आपके सभी चरणों को याद करता है - क्लिक, स्क्रॉल, इनपुट, संक्रमण, और आप इन चरणों को फिर से खो सकते हैं। लेकिन यह सब नहीं है। उदाहरण के लिए, आपने जावा या पायथन में जो कुछ भी लिखा है, उसे आप निर्यात कर सकते हैं और सेलेनियम आईडीई का उपयोग करके स्वचालित एंड-टू-एंड परीक्षण चला सकते हैं।
यह बहुत अच्छा लगता है, लेकिन वास्तव में सेलेनियम आईडीई स्वयं पूरी तरह से काम नहीं करता है, और इसके अलावा, उस समय हमारे पास अभी भी
एक्सटीजे थे ।
ExtJs
यदि आपके पास एक्सटीजे था - सहानुभूति और गले लगाओ। सेलेनियम आईडीई हमेशा सबसे अनोखा चयनकर्ता लिखता है। हमारे तत्वों पर, यह आईडी है। लेकिन प्रत्येक तत्व के लिए ExtJs एक यादृच्छिक आईडी बनाता है, मुझे नहीं पता कि क्यों। एक्सटीजे के साथ यह समस्या शून्य संस्करण के साथ आती है।
ExtJS = <div id="random_6452"/>
नतीजतन, हमारे परीक्षकों ने सुबह आवेदन खोला, सब कुछ रिकॉर्ड किया, फिर,
पृष्ठ को फिर से लोड किए बिना , समय-समय पर इसे चलाया, यह समझने की कोशिश की कि क्या बैकेंड, उदाहरण के लिए, टूट गया था। उन्होंने बैकएंड को अपडेट किया, लेकिन फ्रंटेंड को स्पर्श नहीं किया। मुख्य बात ताज़ा पर क्लिक नहीं करना था, क्योंकि उसके बाद एक नई आईडी तैयार की गई थी।
तुरंत एक शानदार विचार के साथ परीक्षक आए। सेलेनियम आईडीई अपने रिकॉर्ड को HTML प्रारूप में निर्यात कर सकता है - हम HTML के साथ काम कर सकते हैं, हमारे पास अस्थायी इंजन हैं - चलो इसे करने की कोशिश करें!
Google Chrome एक्सटेंशन
जल्दी से एक Google Chrome एक्सटेंशन बनाया और तुरंत chic
elementFromPoint विधि
elementFromPoint ।
document.elementFromPoint(x, y);
खिड़की पर माउस की आवाजाही और फिर एलिमेंटफ्रॉमपॉइंट पर कॉल करते हुए ट्राइट, जब क्लिक ने काम किया, तो मुझे उस एलिमेंट के निर्देशांक मिले, जिन पर मैंने क्लिक किया था। इसके अलावा, इस तत्व को विशेष रूप से चुनने के लिए किसी तरह एक निश्चित चयनकर्ता बनाना आवश्यक था। आईडी का उपयोग नहीं किया जा सकता है - क्या करना है?
एक विचार आया - इसके अलावा घटकों पर विशेष
परीक्षण-आईडी लटकाएं। एक सार परीक्षण आईडी घटक के लिए बनाई गई थी, जिसे केवल परीक्षणों के लिए आवश्यक था।
data-test-id="ComponentTestId«
यह केवल एक परीक्षण वातावरण में उत्पन्न हुआ था, और हमने डेटा विशेषता के अनुसार इस पर
select किया था। लेकिन यह हमेशा पर्याप्त नहीं था। उदाहरण के लिए, हमारे पास एक घटक है, लेकिन अंदर अभी भी आई-टैग में एक
div ,
span ,
icon , आइकन है। इसके बारे में क्या करना है?
इस पूंछ के लिए, हमने अतिरिक्त रूप से
XPath उत्पन्न किया:
function createXPathFromElement(elm) { var allNodes = document.getElementsByTagName('*'); for (var segs = [ ]; elm && elm.nodeType = 1; elm = elm.parentNode) { if (elm.hasAttribute('class')) { segs.unshift(elm.localName.toLowerCase() + '[a)class = «' + elm.getAttribute('class') + ' »] '); } else { for (i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) { if (sib.localName = elm.localName) i++; }; segs.unshift(elm.localName.toLowerCase() + '[' + i + ']'); }; }; return segs.length ? '/' + segs.join('/') : null; };
परिणामस्वरूप, एक अद्वितीय XPath चयनकर्ता बनता है, जिसमें घटक के नाम के साथ डेटा विशेषता द्वारा चयनकर्ता के डेटा विशेषता का एक सफल मामला होता है:
<b><u>.//*[@data-test-id='ComponentName']</b></u>/ul/li/div/p[2]
यदि घटक के अंदर अभी भी किसी प्रकार की जटिल संरचना थी, तो बाकी सभी सख्त XPath के अनुसार बाहर खड़े थे - आईडी के बिना। हमने id से परहेज किया क्योंकि हमने ExtJs के साथ काम किया।
इस XPath को आसानी से परखा जा सकता है। हम सभी रिकॉर्ड किए गए HTML दस्तावेज़ में वापस निर्यात किए गए, वापस सेलेनियम आईडीई पर अपलोड किए गए, और इसे चलाया गया।
हमने क्रोम एक्सटेंशन बनाया, जिसने केवल सेलेनियम आईडीई रिकॉर्ड स्वरूप उत्पन्न किया, लेकिन अपने तरीके से, सेलेनियम आईडीई जिस तरह से नहीं करता है। वहां हमने स्पिनर स्क्रॉलिंग, सफल एप्लिकेशन लोडिंग के लिए बहुत सारे स्मार्ट चेक जोड़े - हमने अतिरिक्त बारीकियों को जोड़ा जो कि सेलेनियम आईडीई को ध्यान में नहीं है। इसके लिए धन्यवाद, हमारे पास पूरी तरह से स्वचालित अंत-से-अंत परीक्षण हैं।
परीक्षकों के लिए केवल एक चीज जो उसके बाद बनी रही, वह थी आवेदन के किसी भी संस्करण को खोलना, क्लिक करना, सेलेनियम आईडीई पर अपलोड करना, चेक करना, इसे पायथन कोड के रूप में सहेजना, वेतन और बोनस वृद्धि का आनंद लेना और मुझे "धन्यवाद" कहना।
इकाई परीक्षणों के लिए, मैं प्रतिक्रिया और VueJS समुदायों के लोगों को खुश नहीं कर सकता - क्षमा करें! मैं रिएक्ट और वीयूजेएस के समान उपकरणों के बारे में नहीं जानता - शायद वे हैं। मैं केवल उन लोगों को खुश करूंगा जो अंगुलियों के साथ हैं।
SimonTest
Angular के लिए Visual Studio Code में एक
SimonTest प्लगइन है।
unit- — unit-. :
- - , - . , unit-.
— .
डिबगिंग
80% , 80% .
, ? ?
Chrome DevTools
, - , , , .
Debugger ? - - , . Profiler, , Dumps, runtime, , , .
Tracing
—
: . runtime : , , — promise, setTimeout, setTimeout promise. .
Spy-js vs TraceGL
:
Spy-js TraceGL . , . Debugger : , — ? , , — .
, , — , . , deadlocks — deadlock , .
JS , . . deadlocks .
Spy-js WebStorm, , . spy-js. TraceGL Mozilla. , , Firefox -. TraceGL , , , . TraceGL Chrome , , .
, WebStorm, Spy-js. : Spy-js, , . WebStorm : TypeScript, CoffeeScript, . Spy-js, , , , . .
, , 5 , : , , , . — , , .
?
- .
- , - , , -.
- . .
- — , , ;
- , : .
- , , — , .
- — .
- , ! .
? «, »:
— ! : , 5 ! !— 2018 . Frontend Conf . ++. ? ! Frontend Conf ++ , : , , .
. ..