הפרונטנד הבלתי נראה: החלטות קטנות שמצילות מוצר
העבודה הטובה ביותר בפרונטנד לעולם לא מופיעה בדמו.
העבודה שאני הכי מעריך היא בלתי נראית. אף אחד לא מצלם אותה מסך. אבל בלי העבודה הזו, משתמשים עוזבים. אולי לעולם לא תדעו למה הם עזבו.
העבודה הזו קורה ברווחים. היא קורה בין מסכים ובין ה-backend שלכם לבין בן אדם אמיתי.
הנה שלוש דוגמאות לתיקונים קטנים שמונעים בעיות גדולות.
- תיקון שגיאות התחברות
הבעיה: הפרונטנד בדק שדה סטטוס כדי לראות אם ההתחברות הצליחה. אבל ה-backend שלח טוקן (token) תקין יחד עם סטטוס null. המשתמש ראה שגיאה למרות שהתחבר בצורה תקינה.
הפתרון: הפרונטנד בודק כעת את נוכחות הטוקן במקום מחרוזת סטטוס.
הלקח: שדה מעורפל במפרט טכני הופך לדלת נעולה עבור המשתמש.
- טיפול בקישורי אימות
הבעיה: משתמש פותח קישור אימות בלשונית (tab) חדשה. הלשונית המקורית נשארת תקועה. ה-polling לשרת נכשל כי בלשונית הראשונה אין טוקן התחברות.
הפתרון: שימוש ב-browser storage event. כשלשונית אחת מעדכנת את ה-local storage, כל שאר הלשוניות מקבלות את ההודעה באופן מיידי. זו דרך חינמית ומהירה לסנכרן בין לשוניות.
- תקופת המתנה (cooldown) לכפתור "שלח שוב"
הבעיה: טיימר של "שלח אימייל שוב תוך 30 שניות" נשמר ב-component state. אם משתמש רענן את הדף, הטיימר התאפס לאפס. משתמשים "הציפו" (spammed) את הכפתור, מה שהגדיל את עלויות האימייל שלכם.
הפתרון: אל תשמרו את הספירה לאחור. שמרו את ה-timestamp של המועד האחרון.
על ידי שמירת הזמן המדויק שבו תקופת ההמתנה מסתיימת, הטיימר שורד רענון דף. אי אפשר לאפס אותו על ידי טעינה מחדש.
למה למייסדים (founders) חייבת להיות אכפת:
• תיקון ההתחברות מגן על אקטיבציה (activation) של משתמשים. • סנכרון הלשוניות מגן על שיעור ההמרה (conversion rate) שלכם. • תקופת ההמתנה מגינה על התקציב שלכם מפני שימוש לרעה.
הנדסה טובה היא לא רק לגרום למסך להיראות יפה. היא להתעסק בפרטים הקטנים שברווחים. התיקונים האלו דרשו פחות מחמישים שורות קוד. הערך מגיע מהיכולת להבחין בבעיה ולתקן אותה במקום הנכון.
מקור: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl