ਅਦਿੱਖ ਫਰੰਟਐਂਡ: ਛੋਟੇ ਫੈਸਲੇ ਜੋ ਤੁਹਾਡੇ ਪ੍ਰੋਡਕਟ ਨੂੰ ਬਚਾਉਂਦੇ ਹਨ
ਸਭ ਤੋਂ ਵਧੀਆ ਫਰੰਟਐਂਡ ਕੰਮ ਕਦੇ ਵੀ ਡੈਮੋ ਵਿੱਚ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ।
ਲੋਕ ਇਸਦੇ ਸਕ੍ਰੀਨਸ਼ੌਟ ਨਹੀਂ ਲੈਂਦੇ। ਪਰ ਇਸ ਕੰਮ ਤੋਂ ਬਿਨਾਂ, ਯੂਜ਼ਰ ਤੁਹਾਡੇ ਪ੍ਰੋਡਕਟ ਨੂੰ ਛੱਡ ਦਿੰਦੇ ਹਨ ਅਤੇ ਤੁਹਾਨੂੰ ਕਦੇ ਪਤਾ ਨਹੀਂ ਲੱਗਦਾ ਕਿ ਕਿਉਂ। ਇਹ ਕੰਮ ਸਕ੍ਰੀਨਾਂ, ਟੈਬਾਂ ਅਤੇ ਤੁਹਾਡੇ ਬੈਕਐਂਡ ਦੇ ਵਿਚਕਾਰਲੇ ਖਾਲੀ ਸਥਾਨਾਂ (gaps) ਵਿੱਚ ਹੁੰਦਾ ਹੈ।
ਇੱਥੇ ਛੋਟੇ ਫਿਕਸਾਂ (fixes) ਦੇ ਤਿੰਨ ਉਦਾਹਰਣਾਂ ਹਨ ਜੋ ਵੱਡੇ ਨੁਕਸਾਨਾਂ ਨੂੰ ਰੋਕਦੇ ਹਨ।
- ਲੌਗਇਨ ਐਰਰ (error) ਨੂੰ ਠੀਕ ਕਰਨਾ ਇੱਕ ਵਾਰ ਫਰੰਟਐਂਡ ਇਹ ਦੇਖਣ ਲਈ ਇੱਕ ਸਟੇਟਸ ਫੀਲਡ (status field) ਦੀ ਜਾਂਚ ਕਰਦਾ ਸੀ ਕਿ ਲੌਗਇਨ ਕਾਮਯਾਬ ਹੋਇਆ ਹੈ ਜਾਂ ਨਹੀਂ। ਬੈਕਐਂਡ ਨੇ ਇੱਕ ਵੈਲਿਡ ਟੋਕਨ (valid token) ਭੇਜਿਆ ਸੀ ਪਰ ਨਾਲ ਹੀ ਇੱਕ null ਸਟੇਟਸ ਵੀ ਭੇਜ ਦਿੱਤਾ। ਐਪ ਨੇ ਯੂਜ਼ਰ ਨੂੰ ਰੱਦ ਕਰ ਦਿੱਤਾ ਭਾਵੇਂ ਉਨ੍ਹਾਂ ਕੋਲ ਐਕਸੈਸ ਸੀ।
ਇਸਦਾ ਹੱਲ ਸਧਾਰਨ ਸੀ। ਫਰੰਟਐਂਡ ਹੁਣ ਸਫਲਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਖੁਦ ਟੋਕਨ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ। ਇੱਕ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਅਸਪਸ਼ਟ ਫੀਲਡ ਯੂਜ਼ਰ ਲਈ ਇੱਕ ਬੰਦ ਦਰਵਾਜ਼ੇ ਵਾਂਗ ਬਣ ਜਾਂਦੀ ਹੈ।
- ਵੈਰੀਫਿਕੇਸ਼ਨ ਲਿੰਕ (verification link) ਨੂੰ ਠੀਕ ਕਰਨਾ ਜਦੋਂ ਕੋਈ ਯੂਜ਼ਰ ਨਵੇਂ ਟੈਬ ਵਿੱਚ ਕਿਸੇ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਤਾਂ ਅਸਲ ਟੈਬ ਅਣ-ਪ੍ਰਮਾਣਿਤ (unauthenticated) ਹੀ ਰਹਿੰਦਾ ਹੈ। ਇਹ ਸਰਵਰ ਤੋਂ ਅਪਡੇਟਸ ਨਹੀਂ ਮੰਗ ਸਕਦਾ।
ਮੈਂ browser storage event ਦੀ ਵਰਤੋਂ ਕੀਤੀ। ਜਦੋਂ ਇੱਕ ਟੈਬ localStorage ਵਿੱਚ ਕੁਝ ਲਿਖਦਾ ਹੈ, ਤਾਂ ਹਰ ਦੂਜਾ ਟੈਬ ਤੁਰੰਤ ਜਾਣ ਜਾਂਦਾ ਹੈ। ਇਹ ਟੈਬਾਂ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਮੁਫਤ ਮੈਸੇਜ ਬੱਸ (message bus) ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਆਨਬੋਰਡਿੰਗ (onboarding) ਵਿੱਚ ਆਉਣ ਵਾਲੀ ਰੁਕਾਵਟ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ।
- ਕੂਲਡਾਊਨ ਟਾਈਮਰ (cooldown timer) ਨੂੰ ਠੀਕ ਕਰਨਾ ਐਪ ਸਟੇਟ (app state) ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਗਿਆ "30 ਸਕਿੰਟਾਂ ਵਿੱਚ ਈਮੇਲ ਦੁਬਾਰਾ ਭੇਜੋ" ਵਾਲਾ ਟਾਈਮਰ ਯੂਜ਼ਰ ਦੁਆਰਾ ਪੇਜ ਰਿਫ੍ਰੈਸ਼ ਕਰਨ 'ਤੇ ਰੀਸੈੱਟ ਹੋ ਜਾਂਦਾ ਹੈ। ਫਿਰ ਯੂਜ਼ਰ ਬਟਨ ਨੂੰ ਵਾਰ-ਵਾਰ ਦਬਾਉਂਦੇ ਹਨ (spam), ਜਿਸ ਨਾਲ ਤੁਹਾਡੀ ਈਮੇਲ ਲਾਗਤ ਵਧ ਜਾਂਦੀ ਹੈ।
ਇਸਦਾ ਹੱਲ ਕਾਊਂਟਡਾਊਨ (countdown) ਦੀ ਬਜਾਏ ਡੈੱਡਲਾਈਨ (deadline) ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਸੀ।
- ਕੂਲਡਾਊਨ ਖਤਮ ਹੋਣ ਦਾ ਸਹੀ ਟਾਈਮਸਟੈਂਪ (timestamp) ਸਟੋਰ ਕਰੋ।
- ਹਰ ਰਿਫ੍ਰੈਸ਼ ਤੋਂ ਬਾਅਦ ਬਾਕੀ ਰਹੇ ਸਕਿੰਟਾਂ ਦੀ ਮੁੜ ਗਣਨਾ ਕਰੋ। ਇਹ ਦੁਰਵਰਤੋਂ ਨੂੰ ਰੋਕਦਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ ਬਜਟ ਦੀ ਰੱਖਿਆ ਕਰਦਾ ਹੈ।
ਸੰਸਥਾਪਕਾਂ (founders) ਲਈ ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ:
• ਲੌਗਇਨ ਫਿਕਸ ਯੂਜ਼ਰ ਐਕਟੀਵੇਸ਼ਨ (user activation) ਦੀ ਰੱਖਿਆ ਕਰਦਾ ਹੈ। • ਕਰਾਸ-ਟੈਬ ਸਿਗਨਲ ਕਨਵਰਜ਼ਨ ਰੇਟ (conversion rates) ਦੀ ਰੱਖਿਆ ਕਰਦਾ ਹੈ। • ਕੂਲਡਾਊਨ ਤੁਹਾਡੇ ਮਾਰਜਿਨ ਦੀ ਰੱਖਿਆ ਕਰਦਾ ਹੈ ਅਤੇ ਦੁਰਵਰਤੋਂ ਨੂੰ ਰੋਕਦਾ ਹੈ।
ਵਧੀਆ ਇੰਜੀਨੀਅਰਿੰਗ ਦਾ ਮਤਲਬ ਸਿਰਫ਼ ਇੰਟਰਫੇਸ ਨੂੰ ਸੁੰਦਰ ਬਣਾਉਣਾ ਨਹੀਂ ਹੈ। ਇਹ ਖਾਲੀ ਸਥਾਨਾਂ (gaps) 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਨਾ ਹੈ। ਇਹ ਫਿਕਸਾਂ ਹਰੇਕ ਲਈ ਪੰਜਾਹ ਲਾਈਨਾਂ ਤੋਂ ਵੀ ਘੱਟ ਕੋਡ ਲੈਂਦੇ ਹਨ। ਅਸਲੀ ਮੁੱਲ ਸਮੱਸਿਆ ਨੂੰ ਪਛਾਣਨ ਅਤੇ ਉਸਨੂੰ ਸਹੀ ਜਗ੍ਹਾ 'ਤੇ ਠੀਕ ਕਰਨ ਤੋਂ ਆਉਂਦਾ ਹੈ।
ਸਰੋਤ: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl