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

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

लोक त्याचे स्क्रीनशॉट्स घेत नाहीत. परंतु या कामाशिवाय, वापरकर्ते तुमचे उत्पादन सोडून जातात आणि तुम्हाला कधीच कळत नाही की का. हे काम स्क्रीन, टॅब्स आणि तुमच्या बॅकएंडमधील त्रुटींमध्ये (gaps) घडते.

मोठ्या नुकसानीला रोखणाऱ्या छोट्या दुरुस्त्यांची येथे तीन उदाहरणे दिली आहेत.

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

उपाय सोपा होता. आता फ्रंटएंड यशाची खात्री करण्यासाठी स्वतः टोकन तपासते. डॉक्युमेंटमधील एक संदिग्ध (ambiguous) फील्ड वापरकर्त्यासाठी बंद दरवाजा ठरू शकते.

२. व्हेरिफिकेशन लिंक (verification link) दुरुस्त करा जेव्हा वापरकर्ता नवीन टॅबमध्ये लिंकवर क्लिक करतो, तेव्हा मूळ टॅब अन-ऑथेंटिकेटेड (unauthenticated) राहतो. तो सर्व्हरकडे अपडेट्ससाठी विचारू शकत नाही.

मी 'browser storage event' चा वापर केला. जेव्हा एक टॅब localStorage मध्ये काही लिहितो, तेव्हा इतर प्रत्येक टॅबला त्याची त्वरित माहिती मिळते. हे टॅब्समधील एक मोफत 'message bus' म्हणून काम करते. यामुळे तुमच्या ऑनबोर्डिंगमधील अडथळा दूर होतो.

३. कूडाऊन टाइमर (cooldown timer) दुरुस्त करा ॲप स्टेटमध्ये साठवलेला "३० सेकंदात ईमेल पुन्हा पाठवा" असा टाइमर वापरकर्त्याने पेज रिफ्रेश केल्यावर रिसेट होतो. त्यानंतर वापरकर्ते बटणावर वारंवार क्लिक करतात (spam), ज्यामुळे तुमचा ईमेल खर्च वाढतो.

उपाय म्हणजे काउंटडाउनऐवजी डेडलाइन (deadline) साठवणे हा होता.

  • कूडाऊन कधी संपेल त्याचा अचूक टाइमस्टॅम्प (timestamp) साठवा.
  • प्रत्येक रिफ्रेशनंतर उरलेले सेकंद पुन्हा मोजा. यामुळे गैरवापर रोखला जातो आणि तुमच्या बजेटचे संरक्षण होते.

संस्थापकांसाठी (Founders) हे का महत्त्वाचे आहे:

• लॉगिनमधील सुधारणा वापरकर्त्यांच्या सक्रियतेचे (user activation) रक्षण करते. • क्रॉस-टॅब सिग्नल कन्वर्जन रेट्सचे (conversion rates) रक्षण करते. • कूडाऊन तुमच्या मार्जिनचे (margins) रक्षण करते आणि गैरवापर रोखते.

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

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