അദൃശ്യമായ ഫ്രണ്ട്എൻഡ്: നിങ്ങളുടെ ഉൽപ്പന്നത്തെ സംരക്ഷിക്കുന്ന ചെറിയ തീരുമാനങ്ങൾ
ഏറ്റവും മികച്ച ഫ്രണ്ട്എൻഡ് ജോലികൾ ഒരിക്കലും ഒരു ഡെമോയിൽ കാണാൻ കഴിയില്ല.
ആളുകൾ അതിന്റെ സ്ക്രീൻഷോട്ടുകൾ എടുക്കാറില്ല. എന്നാൽ ഈ ജോലികൾ ഇല്ലെങ്കിൽ, ഉപയോക്താക്കൾ നിങ്ങളുടെ ഉൽപ്പന്നം ഉപേക്ഷിച്ചു പോകും, അതിന്റെ കാരണം നിങ്ങൾ ഒരിക്കലും അറിയുകയുമില്ല. സ്ക്രീനുകൾക്കും ടാബുകൾക്കും നിങ്ങളുടെ ബാക്കെൻഡിനും ഇടയിലുള്ള വിടവുകളിലാണ് ഈ ജോലികൾ നടക്കുന്നത്.
വലിയ നഷ്ടങ്ങൾ ഒഴിവാക്കാൻ സഹായിക്കുന്ന ചെറിയ പരിഹാരങ്ങളുടെ മൂന്ന് ഉദാഹരണങ്ങൾ ഇതാ.
- ലോഗിൻ പിശക് പരിഹരിക്കുക
മുൻപ്, ഒരു ലോഗിൻ വിജയിച്ചോ എന്ന് പരിശോധിക്കാൻ ഫ്രണ്ട്എൻഡ് ഒരു
statusഫീൽഡ് പരിശോധിച്ചിരുന്നു. ബാക്കെൻഡ് ഒരു സാധുവായtokenഅയച്ചിരുന്നുവെങ്കിലും അതോടൊപ്പം ഒരുnull statusകൂടി അയച്ചു. ഉപയോക്താവിന് ആക്സസ് ഉണ്ടായിരുന്നിട്ടും ആപ്പ് അവരെ നിരസിച്ചു.
ഇതിനുള്ള പരിഹാരം ലളിതമായിരുന്നു. വിജയം സ്ഥിരീകരിക്കുന്നതിനായി ഫ്രണ്ട്എൻഡ് ഇപ്പോൾ token തന്നെ പരിശോധിക്കുന്നു. ഒരു ഡോക്യുമെന്റിലെ അവ്യക്തമായ ഒരു ഫീൽഡ് ഉപയോക്താവിന് മുന്നിൽ അടഞ്ഞ വാതിലായി മാറുന്നു.
- വെരിഫിക്കേഷൻ ലിങ്ക് പരിഹരിക്കുക
ഒരു ഉപയോക്താവ് പുതിയൊരു ടാബിൽ ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ, പഴയ ടാബ്
unauthenticatedആയി തന്നെ തുടരുന്നു. അതിന് സെർവറിൽ നിന്ന് അപ്ഡേറ്റുകൾ ചോദിക്കാൻ കഴിയില്ല.
ഞാൻ browser storage event ഉപയോഗിച്ചു. ഒരു ടാബ് localStorage-ൽ എന്തെങ്കിലും എഴുതുമ്പോൾ, മറ്റെല്ലാ ടാബുകൾക്കും അത് ഉടൻ തന്നെ അറിയാൻ സാധിക്കും. ഇത് ടാബുകൾക്കിടയിൽ ഒരു സൗജന്യ message bus പോലെ പ്രവർത്തിക്കുന്നു. ഇത് നിങ്ങളുടെ ഓൺബോർഡിംഗിലെ (onboarding) തടസ്സങ്ങൾ നീക്കം ചെയ്യുന്നു.
- കൂൾഡൗൺ ടൈമർ (cooldown timer) പരിഹരിക്കുക ആപ്പ് സ്റ്റേറ്റിൽ (app state) സൂക്ഷിച്ചിരിക്കുന്ന "30 സെക്കൻഡിനുള്ളിൽ ഇമെയിൽ വീണ്ടും അയക്കുക" എന്ന ടൈമർ, ഉപയോക്താവ് പേജ് റീഫ്രഷ് ചെയ്യുമ്പോൾ റീസെറ്റ് ആകുന്നു. തുടർന്ന് ഉപയോക്താക്കൾ ആ ബട്ടൺ ആവർത്തിച്ച് അമർത്തുന്നു, ഇത് നിങ്ങളുടെ ഇമെയിൽ ചിലവ് വർദ്ധിപ്പിക്കുന്നു.
കൗണ്ട്ഡൗണിന് പകരം ഡെഡ്ലൈൻ (deadline) സൂക്ഷിക്കുക എന്നതായിരുന്നു പരിഹാരം.
- കൂൾഡൗൺ അവസാനിക്കുന്ന കൃത്യമായ
timestampസൂക്ഷിക്കുക. - ഓരോ റീഫ്രഷിന് ശേഷവും ബാക്കിയുള്ള സെക്കൻഡുകൾ വീണ്ടും കണക്കാക്കുക. ഇത് ദുരുപയോഗം തടയുകയും നിങ്ങളുടെ ബജറ്റ് സംരക്ഷിക്കുകയും ചെയ്യുന്നു.
സ്ഥാപകർക്ക് (Founders) ഇത് എന്തുകൊണ്ട് പ്രധാനമാണ്:
• ലോഗിൻ പരിഹാരം ഉപയോക്താക്കളുടെ ആക്ടിവേഷൻ (user activation) സംരക്ഷിക്കുന്നു. • ക്രോസ്-ടാബ് സിഗ്നൽ കൺവേർഷൻ നിരക്കുകൾ (conversion rates) സംരക്ഷിക്കുന്നു. • കൂൾഡൗൺ നിങ്ങളുടെ മാർജിനുകൾ (margins) സംരക്ഷിക്കുകയും ദുരുപയോഗം തടയുകയും ചെയ്യുന്നു.
മികച്ച എഞ്ചിനീയറിംഗ് എന്നാൽ ഇന്റർഫേസ് ഭംഗിയാക്കുക എന്നത് മാത്രമല്ല. വിടവുകളെക്കുറിച്ച് (gaps) സൂക്ഷ്മമായി ശ്രദ്ധിക്കുക എന്നത് കൂടിയാണ്. ഈ പരിഹാരങ്ങൾക്കായി ഓരോന്നിനും അമ്പതിലധികം വരി കോഡുകൾ പോലും വേണ്ടിവന്നില്ല. പ്രശ്നം തിരിച്ചറിയുന്നതിനും അത് ശരിയായ സ്ഥലത്ത് പരിഹരിക്കുന്നതിനുമാണ് മൂല്യം ലഭിക്കുന്നത്.
Source: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl