אתר בגישת HTML תחילה הכפיל את מספר המשתמשים בין לילה

תיאור של מפתחים על בנייה מחדש של טופס אינטרנט לשירות ציבורי בגישה של HTML תחילה עורר הדים בקרב מהנדסים: החלפת אפליקציית React כושלת הכפילה את מספר האנשים שהשלימו את הטופס ביום ההשקה.

הלקוח היה חברת תשתיות הפועלת כמונופול מפוקח. הלקוחות יכלו להגיש בקשה לשירותיה דרך טופס ASP ישן או דרך תהליך ידני שעלה לחברה הרבה יותר. מכיוון שירידה בשביעות רצון הלקוחות מתחת ל-96 אחוזים סיכנה את החברה בקנסות של מיליוני ליש"ט, לתהליך ההגשה היה משקל יוצא דופן.

שני ניסיונות כושלים ואפליקציית React שהוסרה אחרי שלושה ימים

שני ניסיונות קודמים לפתור את הבעיה כבר נכשלו בעלויות ניכרות. האחרון, שנבנה בידי קבלנים מחו"ל, נשאר באוויר שלושה ימים עד שתלונות לקוחות אילצו להוריד אותו. המחבר מתאר בלגן של ספינרים ומצב JavaScript גלובלי, ממשק לא נגיש ובחירה גורלית אחת: העלאת תמונות הייתה חיונית, אך האפליקציה שמרה תמונות וכל שאר נתוני הטופס ב-localStorage, שמוגבל לחמישה מגה-בייט בערך.

במקום לרשת את הקוד הזה, המפתח בנה את השירות מחדש עם Astro ובגישת HTML תחילה, שבה JavaScript קיים רק ברכיבי ווב שמשפרים בהדרגה אתר שעובד היטב בלעדיו. ההיגיון שלו: זה שירות ציבורי, ולכן עליו לעבוד בכל מכשיר אפשרי, גם בחיבור גרוע, ולעולם לא לאבד נתונים שהוזנו.

שליחת טופס, הפניות וולידציה בפחות מקילובייט

מכאן נגזרו הדרישות: מזהה ייחודי לכל סשן טופס, שמירת הנתונים וההעלאות בשרת בכל שלב באשף, טופס שניתן להשלים בלי JavaScript ובדפדפנים מיושנים, ועמידה בתקן WCAG AA. כל שלב הפך לעמוד נפרד; שליחת שלב תקין הפנתה את הדפדפן לשלב הבא — תבנית ה-form-post-and-redirect הקלאסית ש-Remix סייע להחזיר לאופנה.

הוולידציה הפכה לפרויקט נפרד. המפתח כתב רכיב ווב ב-HTML שעוטף כל טופס, קורא את מאפייני הוולידציה המובנים שלו ומציג שגיאות ברכיב שאליו מפנה aria-describedby במקום בבועות הקופצות של הדפדפן. השגיאה נעלמת ברגע שהמשתמש מגיע לערך תקין ונבדקת מחדש ב-blur ובשליחה. הרכיב שוקל פחות מקילובייט; גרסה כללית שלו, validation-enhancer, פורסמה ב-npm.

מה קרה אחרי ההשקה

עם ההשקה הוכפל מספר הטפסים שהושלמו. האנליטיקה לא הצליחה להסביר את המשתמשים החדשים, מציין המחבר, מפני שאנליטיקה מבוססת JavaScript לעולם לא רואה את הגולשים שנוטשים כשסקריפטים נכשלים. גם מודל הסשן בשרת השתלם: אדם אחד שלח טופס מלא חודש אחרי שהתחיל למלא אותו.

הסיפור נגמר בנימה שהמחבר מכנה עצובה. בעזבו את הפרויקט הסביר למחליפו שהאתר תמיד עבד גם בלי JavaScript; התשובה הייתה שזה אומר הרבה יותר עבודה לצוות. לדחות משתמשים בדפדפנים ישנים, בחיבור חלש או בטכנולוגיות מסייעות אינו מקובל, הוא טוען — ובוודאי שלא בשירות ציבורי של מונופול.