अदृश्य फ्रंटएंड: उत्पादन वाचवणारे छोटे निर्णय

सर्वोत्तम फ्रंटएंड काम कधीच डेमोमध्ये दिसत नाही.

मला सर्वात जास्त मौल्यवान वाटणारे काम अदृश्य असते. कोणीही त्याचे स्क्रीनशॉट घेत नाही. पण या कामाशिवाय, वापरकर्ते (users) सोडून जातात. ते का सोडून गेले हे तुम्हाला कदाचित कधीच समजणार नाही.

हे काम त्रुटींच्या किंवा रिकाम्या जागांच्या (gaps) मध्ये घडते. हे स्क्रीनमधील अंतर आणि तुमचे बॅकएंड (backend) व प्रत्यक्ष मानव यांच्यामधील दुव्यामध्ये घडते.

मोठ्या समस्या टाळणाऱ्या छोट्या सुधारणांची ही तीन उदाहरणे आहेत.

१. लॉगिन त्रुटी सुधारणे (Fixing login errors)

समस्या: लॉगिन यशस्वी झाले की नाही हे पाहण्यासाठी फ्रंटएंडने 'status' फील्ड तपासले. परंतु बॅकएंडने वैध टोकन (valid token) पाठवले होते, पण 'status' मात्र 'null' होता. वापरकर्त्याने योग्यरित्या लॉगिन करूनही त्यांना त्रुटी (error) दिसली.

उपाय: आता फ्रंटएंड 'status' स्ट्रिंगऐवजी टोकनच्या उपस्थितीची (presence) तपासणी करते.

धडा: तांत्रिक स्पेसिफिकेशनमधील (technical spec) संदिग्ध फील्ड वापरकर्त्यासाठी बंद दरवाजा ठरू शकते.

२. व्हेरिफिकेशन लिंक्स हाताळणे (Handling verification links)

समस्या: वापरकर्ता नवीन टॅबमध्ये व्हेरिफिकेशन लिंक उघडतो. मूळ टॅब अडकून पडतो (stuck राहतो). सर्व्हरला पोलिंग (polling) करणे अयशस्वी होते कारण पहिल्या टॅबमध्ये लॉगिन टोकन नसते.

उपाय: ब्राउझर स्टोरेज इव्हेंटचा (browser storage event) वापर करा. जेव्हा एक टॅब 'local storage' अपडेट करते, तेव्हा इतर प्रत्येक टॅबला तो संदेश त्वरित मिळतो. टॅब सिंक (sync) करण्याचा हा एक मोफत आणि त्वरित मार्ग आहे.

३. 'Resend' बटण कूलडाउन (Resend button cooldowns)

समस्या: "३० सेकंदात ईमेल पुन्हा पाठवा" (Resend email in 30 seconds) हा टाइमर 'component state' मध्ये साठवला होता. जर वापरकर्त्याने पेज रिफ्रेश केले, तर टाइमर पुन्हा शून्यावर सेट होत असे. वापरकर्त्यांनी वारंवार बटण दाबले (spamming), ज्यामुळे तुमचा ईमेल खर्च वाढला.

उपाय: काउंटडाउन (countdown) साठवू नका. त्याऐवजी डेडलाइन टाइमस्टॅम्प (deadline timestamp) साठवा.

कूलडाउन कधी संपणार याची नेमकी वेळ साठवल्यामुळे, पेज रिफ्रेश होऊनही टाइमर चालू राहतो. पेज रीलोड करून तो रिसेट करणे अशक्य होते.

संस्थापकांनी (Founders) याकडे लक्ष देणे का आवश्यक आहे:

• लॉगिन सुधारणा वापरकर्त्यांच्या सक्रियतेचे (user activation) रक्षण करते. • टॅब सिंक तुमच्या कन्व्हर्जन रेटचे (conversion rate) रक्षण करते. • कूलडाउन तुमच्या बजेटचे गैरवापरापासून रक्षण करते.

उत्तम इंजिनिअरिंग म्हणजे केवळ स्क्रीन सुंदर दिसणे नव्हे. तर त्रुटींच्या किंवा रिकाम्या जागांच्या (gaps) बारकाईने तपासणी करणे होय. या सुधारणांसाठी पन्नास ओळींपेक्षा कमी कोड लागला. खरी किंमत समस्या ओळखण्यात आणि ती योग्य ठिकाणी सोडवण्यात आहे.

स्रोत: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl