અદ્રશ્ય ફ્રન્ટએન્ડ: નાના નિર્ણયો જે તમારી પ્રોડક્ટને બચાવે છે
શ્રેષ્ઠ ફ્રન્ટએન્ડ કામ ક્યારેય ડેમોમાં દેખાતું નથી.
લોકો તેના સ્ક્રીનશોટ લેતા નથી. પરંતુ આ કામ વગર, વપરાશકર્તાઓ તમારી પ્રોડક્ટ છોડી દે છે અને તમને ક્યારેય ખબર પડતી નથી કે શા માટે. આ કામ સ્ક્રીન, ટેબ્સ અને તમારા બેકએન્ડ વચ્ચેના અંતરાલોમાં થાય છે.
અહીં નાના સુધારાઓના ત્રણ ઉદાહરણો છે જે મોટા નુકસાનને અટકાવે છે.
- લોગિન એરર સુધારો એકવાર ફ્રન્ટએન્ડ લોગિન સફળ થયું છે કે નહીં તે જોવા માટે સ્ટેટસ ફીલ્ડ (status field) તપાસતું હતું. બેકએન્ડ એક માન્ય ટોકન મોકલતું હતું પરંતુ સાથે 'null' સ્ટેટસ પણ મોકલતું હતું. વપરાશકર્તા પાસે એક્સેસ હોવા છતાં એપ્લિકેશને તેમને નકારી દીધા હતા.
સુધારો સરળ હતો. હવે ફ્રન્ટએન્ડ સફળતાની ખાતરી કરવા માટે પોતે જ ટોકન તપાસે છે. ડોક્યુમેન્ટમાં રહેલું એક અસ્પષ્ટ ફીલ્ડ વપરાશકર્તા માટે બંધ દરવાજા સમાન બની જાય છે.
- વેરિફિકેશન લિંક સુધારો જ્યારે વપરાશકર્તા નવા ટેબમાં લિંક પર ક્લિક કરે છે, ત્યારે મૂળ ટેબ અનોથેન્ટિકેટેડ (unauthenticated) રહે છે. તે સર્વર પાસેથી અપડેટ્સ માંગી શકતું નથી.
મેં બ્રાઉઝર સ્ટોરેજ ઇવેન્ટનો ઉપયોગ કર્યો. જ્યારે એક ટેબ localStorage માં લખે છે, ત્યારે અન્ય દરેક ટેબને તરત જ ખબર પડી જાય છે. તે ટેબ્સ વચ્ચે એક મફત મેસેજ બસ તરીકે કામ કરે છે. આ તમારા ઓનબોર્ડિંગમાં આવતા અવરોધને દૂર કરે છે.
- કૂલડાઉન ટાઈમર સુધારો એપ્લિકેશન સ્ટેટમાં સંગ્રહિત "30 સેકન્ડમાં ઇમેઇલ ફરીથી મોકલો" ટાઈમર જ્યારે વપરાશકર્તા પેજ રિફ્રેશ કરે છે ત્યારે રીસેટ થઈ જાય છે. ત્યારબાદ વપરાશકર્તાઓ બટન પર વારંવાર ક્લિક કરે છે (spam), જેનાથી તમારી ઇમેઇલ ખર્ચ વધી જાય છે.
સુધારો કાઉન્ટડાઉન (countdown) ને બદલે ડેડલાઇન (deadline) સંગ્રહિત કરવાનો હતો.
- કૂલડાઉન ક્યારે સમાપ્ત થાય તેનો ચોક્કસ ટાઈમસ્ટેમ્પ (timestamp) સંગ્રહિત કરો.
- દરેક રિફ્રેશ પછી બાકી રહેલા સેકન્ડોની ફરીથી ગણતરી કરો. આ દુરુપયોગ અટકાવે છે અને તમારા બજેટનું રક્ષણ કરે છે.
ફાઉન્ડર્સ માટે આ શા માટે મહત્વનું છે:
• લોગિન સુધારો યુઝર એક્ટિવેશન (user activation) નું રક્ષણ કરે છે. • ક્રોસ-ટેબ સિગ્નલ કન્વર્ઝન રેટ (conversion rates) નું રક્ષણ કરે છે. • કૂલડાઉન તમારા માર્જિનનું રક્ષણ કરે છે અને દુરુપયોગ અટકાવે છે.
ઉત્તમ એન્જિનિયરિંગ એટલે માત્ર ઇન્ટરફેસને સુંદર બનાવવું એવું નથી. તે અંતરાલો (gaps) પર ધ્યાન કેન્દ્રિત કરવા વિશે છે. આ સુધારાઓમાં દરેક માટે પચાસથી ઓછી લાઈનોનો કોડ લાગ્યો હતો. મૂલ્ય સમસ્યાને ઓળખવામાં અને તેને યોગ્ય જગ્યાએ સુધારવામાંથી આવે છે.
સ્ત્રોત: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl