अदृश्य फ्रंटएंड: छोटे निर्णय जो आपके प्रोडक्ट को बचाते हैं
सबसे बेहतरीन फ्रंटएंड काम कभी डेमो में दिखाई नहीं देता।
लोग इसके स्क्रीनशॉट नहीं लेते। लेकिन इस काम के बिना, उपयोगकर्ता आपके प्रोडक्ट को छोड़ देते हैं और आपको कभी पता नहीं चलता कि क्यों। यह काम स्क्रीन, टैब और आपके बैकएंड के बीच के अंतराल (gaps) में होता है।
यहाँ छोटे सुधारों के तीन उदाहरण दिए गए हैं जो बड़े नुकसान को रोकते हैं।
- लॉगिन एरर को ठीक करें एक बार फ्रंटएंड यह देखने के लिए कि लॉगिन सफल हुआ या नहीं, एक 'status' फ़ील्ड की जाँच करता था। बैकएंड ने एक वैध टोकन भेजा लेकिन साथ ही एक 'null' स्टेटस भी भेज दिया। इसके कारण ऐप ने उपयोगकर्ता को रिजेक्ट कर दिया, जबकि उनके पास एक्सेस था।
समाधान सरल था। अब फ्रंटएंड सफलता की पुष्टि करने के लिए स्वयं टोकन की जाँच करता है। किसी डॉक्यूमेंट में एक अस्पष्ट फ़ील्ड उपयोगकर्ता के लिए बंद दरवाज़े के समान बन जाती है।
- वेरिफिकेशन लिंक को ठीक करें जब कोई उपयोगकर्ता नए टैब में किसी लिंक पर क्लिक करता है, तो मूल टैब अन-ऑथेंटिकेटेड (unauthenticated) ही रहता है। वह अपडेट के लिए सर्वर से नहीं पूछ सकता।
मैंने ब्राउज़र स्टोरेज इवेंट (browser storage event) का उपयोग किया। जब एक टैब localStorage में कुछ लिखता है, तो अन्य सभी टैब को तुरंत पता चल जाता है। यह टैब के बीच एक फ्री मैसेज बस (message bus) की तरह काम करता है। यह आपके ऑनबोर्डिंग (onboarding) में आने वाली रुकावट को दूर करता है।
- कूलडाउन टाइमर को ठीक करें ऐप स्टेट (app state) में स्टोर किया गया "30 सेकंड में ईमेल दोबारा भेजें" वाला टाइमर उपयोगकर्ता द्वारा पेज रिफ्रेश करने पर रीसेट हो जाता है। इसके बाद उपयोगकर्ता बटन को बार-बार दबाते हैं (spam करते हैं), जिससे आपकी ईमेल लागत बढ़ जाती है।
समाधान काउंटडाउन के बजाय डेडलाइन (deadline) को स्टोर करना था।
- वह सटीक टाइमस्टैम्प (timestamp) स्टोर करें जब कूलडाउन समाप्त होता है।
- हर रिफ्रेश के बाद शेष सेकंड की पुनर्गणना (recompute) करें। यह दुरुपयोग को रोकता है और आपके बजट की रक्षा करता है।
संस्थापकों (Founders) के लिए यह क्यों महत्वपूर्ण है:
• लॉगिन सुधार यूजर एक्टिवेशन (user activation) की रक्षा करता है। • क्रॉस-टैब सिग्नल कन्वर्जन रेट (conversion rates) की रक्षा करता है। • कूलडाउन आपके मार्जिन की रक्षा करता है और दुरुपयोग को रोकता है।
बेहतरीन इंजीनियरिंग का मतलब केवल इंटरफ़ेस को अच्छा दिखाना नहीं है। इसका मतलब है अंतरालों (gaps) पर बारीकी से ध्यान देना। इन सुधारों में प्रत्येक के लिए पचास से भी कम लाइन का कोड लगा। असली मूल्य समस्या को पहचानने और उसे सही जगह पर ठीक करने से आता है।
स्रोत: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl