അദൃശ്യമായ ഫ്രണ്ട്എൻഡ്: ഒരു ഉൽപ്പന്നത്തെ സംരക്ഷിക്കുന്ന ചെറിയ തീരുമാനങ്ങൾ
മികച്ച ഫ്രണ്ട്എൻഡ് ജോലികൾ ഒരിക്കലും ഒരു ഡെമോയിൽ കാണാൻ കഴിയില്ല.
ഞാൻ ഏറ്റവും വിലമതിക്കുന്ന ജോലി അദൃശ്യമാണ്. ആരും അതിന്റെ സ്ക്രീൻഷോട്ടുകൾ എടുക്കാറില്ല. എന്നാൽ ഈ ജോലികളില്ലാതെ ഉപയോക്താക്കൾ ഉപേക്ഷിച്ചു പോകും. അവർ എന്തുകൊണ്ടാണ് പോയതെന്ന് നിങ്ങൾക്ക് ഒരുപക്ഷേ അറിയില്ലായിരിക്കാം.
ഈ ജോലികൾ സംഭവിക്കുന്നത് വിടവുകളിലാണ് (gaps). സ്ക്രീനുകൾക്കിടയിലും നിങ്ങളുടെ ബാക്കെൻഡും ഒരു യഥാർത്ഥ മനുഷ്യനും തമ്മിലുമാണ് ഇത് നടക്കുന്നത്.
വലിയ പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ സഹായിക്കുന്ന ചെറിയ പരിഹാരങ്ങളുടെ മൂന്ന് ഉദാഹരണങ്ങൾ താഴെ നൽകുന്നു.
- ലോഗിൻ പിശകുകൾ പരിഹരിക്കുക
The problem: ലോഗിൻ വിജയിച്ചോ എന്ന് പരിശോധിക്കാൻ ഫ്രണ്ട്എൻഡ് ഒരു 'status' ഫീൽഡ് പരിശോധിച്ചിരുന്നു. എന്നാൽ ബാക്കെൻഡ് ഒരു സാധുവായ (valid) ടോക്കണോടൊപ്പം 'null' ആയ സ്റ്റാറ്റസും അയച്ചു. ലോഗിൻ ശരിയായി നടന്നുവെങ്കിലും ഉപയോക്താവിന് ഒരു എറർ കാണിച്ചു.
The fix: ഇപ്പോൾ ഫ്രണ്ട്എൻഡ് ഒരു സ്റ്റാറ്റസ് സ്ട്രിംഗിന് പകരം ഒരു ടോക്കൺ ഉണ്ടോ എന്ന് പരിശോധിക്കുന്നു.
The lesson: സാങ്കേതിക വിവരണങ്ങളിലെ (technical spec) അവ്യക്തമായ ഒരു ഫീൽഡ് ഉപയോക്താവിന് മുന്നിൽ ഒരു അടഞ്ഞ വാതിലായി മാറുന്നു.
- വെരിഫിക്കേഷൻ ലിങ്കുകൾ കൈകാര്യം ചെയ്യുക
The problem: ഒരു ഉപയോക്താവ് ഒരു വെരിഫിക്കേഷൻ ലിങ്ക് പുതിയൊരു ടാബിൽ തുറക്കുന്നു. എന്നാൽ പഴയ ടാബ് അവിടെത്തന്നെ കുടുങ്ങിക്കിടക്കുന്നു. ആദ്യത്തെ ടാബിൽ ലോഗിൻ ടോക്കൺ ഇല്ലാത്തതിനാൽ സെർവറിൽ നിന്ന് വിവരങ്ങൾ ശേഖരിക്കാൻ (polling) സാധിക്കുന്നില്ല.
The fix: ബ്രൗസർ സ്റ്റോറേജ് ഇവന്റ് (browser storage event) ഉപയോഗിക്കുക. ഒരു ടാബ് ലോക്കൽ സ്റ്റോറേജ് അപ്ഡേറ്റ് ചെയ്യുമ്പോൾ, മറ്റ് എല്ലാ ടാബുകളിലേക്കും ആ സന്ദേശം ഉടനടി ലഭിക്കുന്നു. ടാബുകൾ സമന്വയിപ്പിക്കാൻ (sync) ഇത് സൗജന്യവും വേഗതയുമുള്ള ഒരു മാർഗമാണ്.
- റീസെൻഡ് ബട്ടൺ കൂൾഡൗൺ (Resend button cooldowns)
The problem: "30 സെക്കൻഡിനുള്ളിൽ ഇമെയിൽ വീണ്ടും അയക്കുക" എന്ന ടൈമർ കോംപോണന്റ് സ്റ്റേറ്റിൽ (component state) ആണ് സൂക്ഷിച്ചിരുന്നത്. ഉപയോക്താവ് പേജ് റീഫ്രഷ് ചെയ്താൽ ടൈമർ വീണ്ടും പൂജ്യമായി മാറുന്നു. ഉപയോക്താക്കൾ ബട്ടൺ ആവർത്തിച്ച് അമർത്തുന്നത് (spamming) നിങ്ങളുടെ ഇമെയിൽ ചിലവ് വർദ്ധിപ്പിച്ചു.
The fix: കൗണ്ട്ഡൗൺ സൂക്ഷിക്കരുത്. പകരം ഡെഡ്ലൈൻ ടൈംസ്റ്റാമ്പ് (deadline timestamp) സൂക്ഷിക്കുക.
കൂൾഡൗൺ അവസാനിക്കുന്ന കൃത്യമായ സമയം സേവ് ചെയ്യുന്നതിലൂടെ, പേജ് റീഫ്രഷ് ചെയ്താലും ടൈമർ നിലനിൽക്കും. പേജ് റീലോഡ് ചെയ്തുകൊണ്ട് ഇത് റീസെറ്റ് ചെയ്യാൻ കഴിയില്ല.
Why founders must care:
• ലോഗിൻ പരിഹാരം ഉപയോക്താക്കളുടെ ആക്ടിവേഷൻ (user activation) സംരക്ഷിക്കുന്നു. • ടാബ് സിങ്ക് നിങ്ങളുടെ കൺവേർഷൻ റേറ്റ് (conversion rate) സംരക്ഷിക്കുന്നു. • കൂൾഡൗൺ നിങ്ങളുടെ ബജറ്റിനെ ദുരുപയോഗത്തിൽ നിന്ന് സംരക്ഷിക്കുന്നു.
മികച്ച എഞ്ചിനീയറിംഗ് എന്നാൽ സ്ക്രീൻ ഭംഗിയാക്കുക എന്നത് മാത്രമല്ല. വിടവുകളെക്കുറിച്ച് (gaps) സൂക്ഷ്മമായി ശ്രദ്ധിക്കുക എന്നതാണ്. ഈ പരിഹാരങ്ങൾ നടപ്പിലാക്കാൻ അമ്പതിലധികം വരി കോഡുകൾ പോലും വേണ്ടിവന്നില്ല. പ്രശ്നം തിരിച്ചറിയുന്നതിനും അത് ശരിയായ രീതിയിൽ പരിഹരിക്കുന്നതിനുമാണ് മൂല്യം ലഭിക്കുന്നത്.
Source: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl