🥇हेयुरिस्टिक्स के बजाय सिद्धांत: बेहतर फ्रंटएंड डेवलपर्स बनना

अनुवाद अनुमान के बजाय बुनियादी बातों का उपयोग करके एक बेहतर फ्रंट-एंड डेवलपर बनना

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

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

"उपयोग $(document).ready(function(){}) jQuery साइटों पर कोड प्रारंभ करने के लिए"
"डिज़ाइन var self = this कॉलबैक फ़ंक्शन में किसी विधि को कॉल करने की आवश्यकता है"
"एरो फ़ंक्शंस में कोई ऑपरेटर नहीं है return»

साथ ही, सैद्धांतिक सिद्धांत का उपयोग अन्य समस्याओं का समाधान खोजने के लिए किया जा सकता है। यह सदैव सत्य है और अक्सर किसी विशेष तत्व के संचालन की संरचना को निर्धारित करता है। उदाहरण के लिए, सैद्धांतिक सिद्धांतों में शामिल हैं:

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

सैद्धांतिक दृष्टिकोण के पक्ष में तर्क

हमने अक्सर पाया है कि गैर-तकनीकी डेवलपर सैद्धांतिक सिद्धांतों का उपयोग करके समस्याओं को हल करने में अनिच्छुक हैं। ऐसा आमतौर पर इसलिए होता है क्योंकि उन्हें अपने करियर की शुरुआत में इन्हें सीखने का अवसर नहीं मिला, और क्योंकि अनुमान संतोषजनक ढंग से काम करते हैं, इसलिए वे उनका उपयोग करना जारी रखते हैं।

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

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

डेवलपर कौशल स्तर मानदंड

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

पहले वाले, बिना किसी अपवाद के, स्टैक ओवरफ़्लो से अधिक या कम उपयुक्त उदाहरणों से कोड कॉपी करते हैं। केवल जब कोड योजना के अनुसार काम नहीं करता है तो वे इसे अपने अनुरूप बनाना शुरू कर देंगे। अक्सर वे ऐसा करने में असफल हो जाते हैं.

बाद वाले एपीआई दस्तावेज़ में उत्तर तलाशते हैं। वहां उन्हें इस बारे में जानकारी मिलती है कि कोई विशेष फ़ंक्शन कितने पैरामीटर लेता है, या वांछित सीएसएस संपत्ति के विस्तारित रूप का विशिष्ट वाक्यविन्यास।

साक्षात्कार के पहले पांच मिनट में ही, आप सटीक रूप से यह निर्धारित कर सकते हैं कि उम्मीदवार किस प्रकार का प्रोग्रामर है।

उदाहरण

आइए डेवलपर बिल को एक उदाहरण के रूप में लें। उन्होंने कई प्रशिक्षण पाठ्यक्रम लिए, कई जावास्क्रिप्ट समस्याओं को हल किया, और अपने खाली समय में वेबसाइटें लिखीं, लेकिन उन्होंने जावास्क्रिप्ट का "वास्तव में" अध्ययन नहीं किया।

एक दिन बिल को एक ऐसी वस्तु मिलती है:

const usersById = {
    "5": { "id": "5", "name": "Adam", "registered": true },
    "27": { "id": "27", "name": "Bobby", "registered": true },
    "32": { "id": "32", "name": "Clarence", "registered": false },
    "39": { "id": "39", "name": "Danielle", "registered": true },
    "42": { "id": "42", "name": "Ekaterina", "registered": false }
}

ऐसी वस्तु उपयोगकर्ताओं की एक सूची प्रदर्शित कर सकती है और क्या उन्होंने किसी विशेष घटना के लिए पंजीकरण कराया है।

मान लीजिए कि बिल को पंजीकृत उपयोगकर्ताओं की एक सूची पुनः प्राप्त करने की आवश्यकता है। दूसरे शब्दों में, उन्हें फ़िल्टर करें. उसे कोड का पता चला जिसमें विधि थी .filter() सूची को फ़िल्टर करने के लिए उपयोग किया जाता है। तो वह कुछ इस तरह कोशिश करता है:

const attendees = usersById.filter(user => user.registered);

और उसे यही मिलता है:

TypeError: usersById.filter is not a function

"यह किसी प्रकार की बकवास है," बिल सोचता है, क्योंकि उसने वह कोड देखा था .filter() एक फ़िल्टर के रूप में कार्य किया।

समस्या यह है कि बिल अनुमानी पद्धति पर निर्भर था। वह यह नहीं समझता filter जबकि, सरणियों पर परिभाषित एक विधि है usersById - एक साधारण वस्तु जिसमें कोई विधि न हो filter.

भ्रमित बिल Googles "जावास्क्रिप्ट फ़िल्टर" वह सरणियों के बहुत सारे उल्लेख पाता है और महसूस करता है कि उसे मुड़ने की जरूरत है usersById एक सरणी के लिए. फिर अनुरोध पर "जावास्क्रिप्ट ऑब्जेक्ट को सरणी में बदल देता है» वह स्टैक ओवरफ़्लो का उपयोग करके उदाहरण ढूंढता है Object.keys(). इसके बाद वह प्रयास करता है:

const attendees = Object.keys(usersById).filter(user => user.registered);

इस बार कोई त्रुटि प्रदर्शित नहीं हुई है, लेकिन बिल को आश्चर्य हुआ, फ़ील्ड attendees खाली रहता है.

तथ्य यह है कि Object.keys() ऑब्जेक्ट की कुंजियाँ लौटाता है, लेकिन उसका मान नहीं। मूलतः, चर का नाम user आसानी से गुमराह किया जा सकता है क्योंकि यह कोई वस्तु नहीं है user, और पहचानकर्ता, यानी, स्ट्रिंग। गुण के बाद से registered स्ट्रिंग्स के लिए परिभाषित नहीं, filter प्रत्येक प्रविष्टि का मूल्यांकन गलत के रूप में करता है, और सरणी खाली निकलती है।

बिल स्टैक ओवरफ़्लो पर उत्तरों पर बारीकी से नज़र डालता है और निम्नलिखित परिवर्तन करता है:

const attendees = Object.keys(usersById).filter(id => usersById[id].registered);

इस बार परिणाम बेहतर : ["5", "27", "39"]. लेकिन बिल आगंतुकों की वस्तुएँ प्राप्त करना चाहता था, उनकी आईडी नहीं।

विज़िटरों को फ़िल्टर करने का तरीका जानने के लिए, नाराज़ बिल "की खोज करता हैजावास्क्रिप्ट ऑब्जेक्ट फ़िल्टर", स्टैक ओवरफ्लो पर खोज परिणामों की जांच करता है और पाता है यह उत्तर निम्नलिखित कोड के साथ:

Object.filter = (obj, predicate) => 
    Object.keys(obj)
          .filter( key => predicate(obj[key]) )
          .reduce( (res, key) => (res[key] = obj[key], res), {} );

बिल इन पंक्तियों को कॉपी करता है और प्रयास करता है:

const attendees = Object.filter(usersById, user => user.registered);

सब कुछ काम करता है - हालाँकि यह स्पष्ट नहीं है कि क्यों। बिल को समझ नहीं आया कि यह किसलिए है reduce और इसका उपयोग कैसे किया जाता है. इसके अलावा, बिल यह नहीं समझता कि उसने इसे केवल वैश्विक वस्तु के लिए परिभाषित किया है Object नई गैर-मानक विधि.

लेकिन बिल को इसकी परवाह नहीं है - यह काम करता है! उन्हें अभी नतीजों में कोई दिलचस्पी नहीं है.

बिल ने क्या गलत किया?

बिल ने समस्या को हल करने के लिए एक अनुमानी पद्धति का प्रयास किया और निम्नलिखित समस्याओं का सामना किया:

का उपयोग करते हुए .filter() चर पर, बिल मिला TypeError. उसे यह समझ नहीं आया filter सामान्य वस्तुओं पर इसका पता नहीं चलता।
उन्होंने आवेदन किया Object.keys()"ऑब्जेक्ट को एक सरणी में बदलना", लेकिन यह अपने आप में कोई परिणाम नहीं लाया। उसे ऑब्जेक्ट मानों की एक श्रृंखला बनाने की आवश्यकता थी।
मान प्राप्त करने और उन्हें फ़िल्टर करने के लिए एक शर्त के रूप में उपयोग करने के बाद भी, उन्हें उन पहचानकर्ताओं से जुड़े उपयोगकर्ता ऑब्जेक्ट के बजाय केवल पहचानकर्ता प्राप्त हुए। ऐसा इसलिए है क्योंकि फ़िल्टर किए गए सरणी में आईडी शामिल हैं, उपयोगकर्ता ऑब्जेक्ट नहीं।
समय के साथ, बिल ने इस दृष्टिकोण को त्याग दिया और इंटरनेट पर एक कार्यशील समाधान ढूंढ लिया। हालाँकि, वह अभी भी नहीं समझ पा रहा है कि यह कैसे काम करता है - और वह इसे समझने में समय बर्बाद नहीं करेगा, क्योंकि उसके पास करने के लिए अन्य काम भी हैं।

यह एक कृत्रिम उदाहरण है, लेकिन हमने कई बार डेवलपर्स को एक ही तरीके से समस्याओं का समाधान करते देखा है। उन्हें प्रभावी ढंग से हल करने के लिए, आपको अनुमानी तरीकों से दूर जाने और सिद्धांत का अध्ययन करने की आवश्यकता है।

आइये बुनियादी बातों पर आते हैं

यदि बिल सैद्धांतिक दृष्टिकोण का समर्थक होता, तो प्रक्रिया इस तरह दिखती:

दिए गए इनपुट को पहचानें और वांछित आउटपुट निर्धारित करें - उनके गुणों के संदर्भ में: “मेरे पास एक ऑब्जेक्ट है जिसकी कुंजियाँ आईडी का प्रतिनिधित्व करने वाली स्ट्रिंग हैं और जिनके मान उपयोगकर्ताओं का प्रतिनिधित्व करने वाली ऑब्जेक्ट हैं। मैं एक सरणी प्राप्त करना चाहता हूं जिसका मान उपयोगकर्ता ऑब्जेक्ट होगा - लेकिन केवल पंजीकृत उपयोगकर्ता ऑब्जेक्ट होगा"
समझें कि किसी ऑब्जेक्ट के माध्यम से पुनरावृति कैसे करें: "मुझे पता है कि मैं कॉल करके किसी ऑब्जेक्ट में कुंजियों की सरणी प्राप्त कर सकता हूं Object.keys(). मैं एक सरणी प्राप्त करना चाहता हूं क्योंकि सरणी पुनरावृत्ति का समर्थन करती है".
समझें कि यह विधि कुंजियाँ प्राप्त करने में मदद करती है, और आपको कुंजियों को मानों में बदलने की आवश्यकता है, और इसके बारे में याद रखें map किसी अन्य सरणी के मानों को परिवर्तित करके एक नई सरणी बनाने की एक स्पष्ट विधि है:
```
Object.keys(usersById).map(id => usersById[id])
```
देखें कि अब आपके पास कस्टम ऑब्जेक्ट्स की एक फ़िल्टर करने योग्य सरणी है जिसमें वे वास्तविक मान शामिल हैं जिन्हें आप फ़िल्टर करना चाहते हैं:
```
Object.keys(usersById).map(id => usersById[id]).filter(user => user.registered)
```

यदि बिल इस रास्ते पर गया होता, तो वह हमारे लिए काम कर सकता था।

लोग अक्सर सिद्धांत का सहारा क्यों नहीं लेते?

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

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

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

स्रोत: www.habr.com