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