موقع مبني بمنهج «HTML أولاً» يضاعف المستخدمين في ليلة واحدة

لقيت رواية مطوّر عن إعادة بناء نموذج ويب لخدمة عامة بمنهج «HTML أولاً» صدى واسعاً بين المهندسين: استبدال تطبيق React فاشل ضاعف عدد من يكملون النموذج في يوم الإطلاق.

كان العميل شركة مرافق تعمل كاحتكار منظّم. كان بإمكان العملاء التقدّم بطلب للحصول على خدماتها عبر نموذج ASP قديم أو عبر إجراء يدوي كلّف الشركة أكثر بكثير. وبما أن انخفاض رضا العملاء إلى ما دون 96 في المئة كان يعرّضها لغرامات بالملايين من الجنيهات، فقد كان لهذه العملية وزن استثنائي.

محاولتان فاشلتان وتطبيق React أُوقف خلال ثلاثة أيام

كانت محاولتان سابقتان لحل المشكلة قد فشلتا بتكاليف كبيرة. أما أحدث نسخة، التي بناها متعاقدون من بلد آخر، فقد بقيت متاحة ثلاثة أيام قبل أن توقفها شكاوى العملاء. يصف الكاتب فوضى من مؤشرات التحميل وحالة JavaScript عامة، وواجهة غير متاحة، وخياراً واحداً قاتلاً: كان رفع الصور جزءاً جوهرياً من النموذج، لكن التطبيق خزّن الصور وكل بيانات النموذج في localStorage المحدود بنحو خمسة ميغابايت.

وبدلاً من وراثة ذلك الكود، أعاد المطوّر بناء الخدمة باستخدام Astro وبمنهج «HTML أولاً»، حيث لا يوجد JavaScript إلا في مكوّنات ويب تحسّن تدريجياً موقعاً يعمل بالكامل من دونها. منطقه كان: هذه خدمة عامة، لذا يجب أن تعمل على كل جهاز ممكن، وعبر اتصالات ضعيفة، وألا تفقد البيانات المُدخلة أبداً.

إرسال النموذج وإعادة التوجيه والتحقق في أقل من كيلوبايت

تفرّعت المتطلبات من ذلك: معرّف فريد لكل جلسة نموذج، وحفظ البيانات والملفات المرفوعة على الخادم عند كل خطوة، وإمكانية إكمال النموذج من دون JavaScript وعلى متصفحات قديمة، وتحقيق معيار WCAG AA. أصبحت كل خطوة صفحة مستقلة؛ وإرسال خطوة صحيحة يعيد توجيه المتصفح إلى التالية — النمط الكلاسيكي للإرسال وإعادة التوجيه الذي أعاد Remix إحياءه.

تحوّل التحقق إلى مشروع مستقل. كتب المطوّر مكوّن ويب بـ HTML يلتف حول أي نموذج، ويقرأ سمات التحقق المدمجة فيه، ويعرض الأخطاء في العنصر المشار إليه بـ aria-describedby بدلاً من تلميحات المتصفح المنبثقة. يختفي الخطأ بمجرد أن يصل المستخدم إلى قيمة صحيحة، ويُعاد فحصه عند مغادرة الحقل وعند الإرسال. يزن المكوّن أقل من كيلوبايت، وصدرت نسخته العامة validation-enhancer على npm.

ما حدث بعد الإطلاق

عند الإطلاق تضاعف عدد النماذج المكتملة. ويلاحظ الكاتب أن التحليلات لم تستطع تفسير المستخدمين الجدد، لأن التحليلات القائمة على JavaScript لا ترى أبداً الزوار الذين يغادرون عندما تفشل السكربتات. كما أثبت نموذج الجلسة على الخادم جدواه: أكمل شخص نموذجاً بعد شهر من بدء تعبئته.

تنتهي القصة بنبرة يصفها الكاتب بالحزينة. عند مغادرته المشروع شرح لخليفته أن الموقع كان يعمل دائماً من دون JavaScript، فكان الجواب أن ذلك يعني عملاً أكبر بكثير للفريق. إن استبعاد مستخدمي المتصفحات القديمة أو الاتصالات الضعيفة أو التقنيات المساعدة غير مقبول، كما يؤكد — وبالأخص في خدمة عامة تحتكرها شركة.