ਅਦਿੱਖ ਫਰੰਟਐਂਡ: ਛੋਟੇ ਫੈਸਲੇ ਜੋ ਇੱਕ ਪ੍ਰੋਡਕਟ ਨੂੰ ਬਚਾਉਂਦੇ ਹਨ
ਸਭ ਤੋਂ ਵਧੀਆ ਫਰੰਟਐਂਡ ਕੰਮ ਕਦੇ ਵੀ ਡੈਮੋ ਵਿੱਚ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ।
ਜਿਸ ਕੰਮ ਨੂੰ ਮੈਂ ਸਭ ਤੋਂ ਵੱਧ ਮਹੱਤਵ ਦਿੰਦਾ ਹਾਂ, ਉਹ ਅਦਿੱਖ ਹੁੰਦਾ ਹੈ। ਕੋਈ ਵੀ ਇਸਦੇ ਸਕ੍ਰੀਨਸ਼ੌਟ ਨਹੀਂ ਲੈਂਦਾ। ਪਰ ਇਸ ਕੰਮ ਤੋਂ ਬਿਨਾਂ, ਯੂਜ਼ਰ ਚਲੇ ਜਾਂਦੇ ਹਨ। ਸ਼ਾਇਦ ਤੁਹਾਨੂੰ ਕਦੇ ਪਤਾ ਵੀ ਨਾ ਲੱਗੇ ਕਿ ਉਹ ਕਿਉਂ ਗਏ।
ਇਹ ਕੰਮ ਖਾਲੀ ਥਾਵਾਂ (gaps) ਵਿੱਚ ਹੁੰਦਾ ਹੈ। ਇਹ ਸਕ੍ਰੀਨਾਂ ਦੇ ਵਿਚਕਾਰ ਅਤੇ ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਅਤੇ ਇੱਕ ਅਸਲੀ ਇਨਸਾਨ ਦੇ ਵਿਚਕਾਰ ਹੁੰਦਾ ਹੈ।
ਇੱਥੇ ਛੋਟੇ ਸੁਧਾਰਾਂ ਦੇ ਤਿੰਨ ਉਦਾਹਰਣ ਹਨ ਜੋ ਵੱਡੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਰੋਕਦੇ ਹਨ।
- ਲੌਗਇਨ ਗਲਤੀਆਂ ਨੂੰ ਸੁਧਾਰਨਾ
ਸਮੱਸਿਆ: ਫਰੰਟਐਂਡ ਇਹ ਦੇਖਣ ਲਈ ਇੱਕ status field ਦੀ ਜਾਂਚ ਕਰਦਾ ਸੀ ਕਿ ਲੌਗਇਨ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ ਜਾਂ ਨਹੀਂ। ਪਰ ਬੈਕਐਂਡ ਨੇ ਇੱਕ ਵੈਲਿਡ token ਦੇ ਨਾਲ null status ਭੇਜਿਆ। ਯੂਜ਼ਰ ਨੂੰ ਗਲਤੀ ਦਿਖਾਈ ਦਿੱਤੀ ਭਾਵੇਂ ਉਹ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਲੌਗਇਨ ਹੋ ਗਿਆ ਸੀ।
ਸੁਧਾਰ: ਫਰੰਟਐਂਡ ਹੁਣ status string ਦੀ ਬਜਾਏ token ਦੀ ਮੌਜੂਦਗੀ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ।
ਸਬਕ: ਤਕਨੀਕੀ spec ਵਿੱਚ ਇੱਕ ਅਸਪਸ਼ਟ ਫੀਲਡ ਯੂਜ਼ਰ ਲਈ ਇੱਕ ਬੰਦ ਦਰਵਾਜ਼ੇ ਵਾਂਗ ਬਣ ਜਾਂਦੀ ਹੈ।
- ਵੈਰੀਫਿਕੇਸ਼ਨ ਲਿੰਕਾਂ ਨੂੰ ਸੰਭਾਲਣਾ
ਸਮੱਸਿਆ: ਇੱਕ ਯੂਜ਼ਰ ਨਵੇਂ ਟੈਬ ਵਿੱਚ ਵੈਰੀਫਿਕੇਸ਼ਨ ਲਿੰਕ ਖੋਲ੍ਹਦਾ ਹੈ। ਅਸਲੀ ਟੈਬ ਅਟਕਿਆ ਰਹਿੰਦਾ ਹੈ। ਸਰਵਰ ਨੂੰ polling ਕਰਨਾ ਅਸਫਲ ਰਹਿੰਦਾ ਹੈ ਕਿਉਂਕਿ ਪਹਿਲੇ ਟੈਬ ਕੋਲ ਕੋਈ login token ਨਹੀਂ ਹੁੰਦਾ।
ਸੁਧਾਰ: browser storage event ਦੀ ਵਰਤੋਂ ਕਰੋ। ਜਦੋਂ ਇੱਕ ਟੈਬ local storage ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ, ਤਾਂ ਹਰ ਦੂਜਾ ਟੈਬ ਤੁਰੰਤ ਸੁਨੇਹਾ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਇਹ ਟੈਬਾਂ ਨੂੰ sync ਕਰਨ ਦਾ ਇੱਕ ਮੁਫਤ ਅਤੇ ਤੁਰੰਤ ਤਰੀਕਾ ਹੈ।
- Resend ਬਟਨ cooldowns
ਸਮੱਸਿਆ: "Resend email in 30 seconds" ਵਾਲਾ ਟਾਈਮਰ component state ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਗਿਆ ਸੀ। ਜੇਕਰ ਯੂਜ਼ਰ ਪੇਜ ਨੂੰ ਰਿਫ੍ਰੈਸ਼ ਕਰਦਾ ਸੀ, ਤਾਂ ਟਾਈਮਰ ਜ਼ੀਰੋ 'ਤੇ ਰੀਸੈੱਟ ਹੋ ਜਾਂਦਾ ਸੀ। ਯੂਜ਼ਰਾਂ ਨੇ ਬਟਨ ਨੂੰ spam ਕੀਤਾ, ਜਿਸ ਨਾਲ ਤੁਹਾਡੀ ਈਮੇਲ ਲਾਗਤ ਵਧ ਗਈ।
ਸੁਧਾਰ: Countdown ਨੂੰ ਸਟੋਰ ਨਾ ਕਰੋ। Deadline timestamp ਨੂੰ ਸਟੋਰ ਕਰੋ।
ਕੂਲਡਾਊਨ ਖਤਮ ਹੋਣ ਦੇ ਸਹੀ ਸਮੇਂ ਨੂੰ ਸੇਵ ਕਰਕੇ, ਟਾਈਮਰ ਪੇਜ ਰਿਫ੍ਰੈਸ਼ ਹੋਣ ਤੋਂ ਬਾਅਦ ਵੀ ਬਣਿਆ ਰਹਿੰਦਾ ਹੈ। ਰੀਲੋਡ ਕਰਕੇ ਇਸਨੂੰ ਰੀਸੈੱਟ ਕਰਨਾ ਅਸੰਭਵ ਹੈ।
ਸੰਸਥਾਪਕਾਂ (founders) ਨੂੰ ਇਸਦੀ ਚਿੰਤਾ ਕਿਉਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ:
• ਲੌਗਇਨ ਸੁਧਾਰ user activation ਦੀ ਰੱਖਿਆ ਕਰਦਾ ਹੈ। • ਟੈਬ sync ਤੁਹਾਡੇ conversion rate ਦੀ ਰੱਖਿਆ ਕਰਦਾ ਹੈ। • Cooldown ਤੁਹਾਡੇ ਬਜਟ ਨੂੰ ਦੁਰਵਰਤੋਂ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ।
ਵਧੀਆ ਇੰਜੀਨੀਅਰਿੰਗ ਦਾ ਮਤਲਬ ਸਿਰਫ਼ ਸਕ੍ਰੀਨ ਨੂੰ ਸੁੰਦਰ ਬਣਾਉਣਾ ਨਹੀਂ ਹੈ। ਇਹ ਖਾਲੀ ਥਾਵਾਂ (gaps) 'ਤੇ ਧਿਆਨ ਦੇਣਾ ਹੈ। ਇਹ ਸੁਧਾਰ ਪੰਜਾਹ ਲਾਈਨਾਂ ਤੋਂ ਵੀ ਘੱਟ ਕੋਡ ਵਿੱਚ ਹੋ ਗਏ। ਅਸਲੀ ਮੁੱਲ ਸਮੱਸਿਆ ਨੂੰ ਨੋਟ ਕਰਨ ਅਤੇ ਉਸਨੂੰ ਸਹੀ ਜਗ੍ਹਾ 'ਤੇ ਸੁਧਾਰਨ ਤੋਂ ਆਉਂਦਾ ਹੈ।
ਸਰੋਤ: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl