HTML öncelikli site kullanıcı sayısını bir gecede ikiye katladı

Bir geliştiricinin bir kamu hizmeti web formunu HTML öncelikli bir yaklaşımla yeniden inşa etme deneyimi mühendisler arasında yankı buldu: başarısız bir React uygulamasının yerine konulan yeni sürüm, formu dolduran kişi sayısını açılış gününde ikiye katladı.

Müşteri, düzenlenmiş bir tekel olarak faaliyet gösteren bir altyapı şirketiydi. Müşteriler hizmetlere ya eski bir ASP formuyla ya da şirkete çok daha pahalıya gelen manuel bir süreçle başvurabiliyordu. Müşteri memnuniyetinin yüzde 96'nın altına düşmesi milyonlarca sterlinlik ceza riski taşıdığı için bu sürecin ağırlığı olağanüstüydü.

İki başarısız deneme ve üç günde kaldırılan bir React uygulaması

Sorunu çözmeye yönelik iki önceki girişim ciddi maliyetlerle başarısız olmuştu. Yurt dışındaki yüklenicilerin geliştirdiği en son sürüm, üç gün yayında kaldı ve müşteri şikayetleri üzerine kapatıldı. Yazar; yükleme animasyonları, global JavaScript durumu, erişilemez bir arayüz ve tek bir ölümcül tercihten söz ediyor: görsel yükleme formun olmazsa olmazıydı, ancak uygulama görselleri ve diğer tüm form verilerini yaklaşık beş megabaytla sınırlı localStorage'da saklıyordu.

Geliştirici bu kodu devralmak yerine hizmeti Astro ile ve HTML öncelikli bir yaklaşımla yeniden kurdu: JavaScript yalnızca, onsuz da sorunsuz çalışan bir siteyi kademeli olarak iyileştiren web bileşenlerinde yaşıyor. Gerekçesi şuydu: bu bir kamu hizmeti, dolayısıyla mümkün olan her cihazda, zayıf bağlantılarda çalışmalı ve girilen verileri asla kaybetmemeli.

Form gönderimi, yönlendirme ve bir kilobaytın altında doğrulama

Gereksinimler buradan çıktı: her form oturumu için benzersiz bir kimlik, her sihirbaz adımında gönderilen verilerin ve yüklemelerin sunucuda saklanması, formun JavaScript olmadan ve eski tarayıcılarda doldurulabilmesi ve WCAG AA erişilebilirliği. Her adım kendi sayfası oldu; geçerli bir adımın gönderilmesi tarayıcıyı bir sonrakine yönlendirdi — Remix'in yeniden canlandırdığı klasik form gönder ve yönlendir deseni.

Doğrulama ayrı bir projeye dönüştü. Geliştirici, herhangi bir formu saran, yerleşik doğrulama niteliklerini okuyan ve hataları tarayıcının açılır ipuçları yerine aria-describedby ile işaret edilen öğede gösteren bir HTML web bileşeni yazdı. Hata, kullanıcı geçerli bir değere ulaştığı anda siliniyor; blur ve gönderim sırasında yeniden kontrol ediliyor. Bileşen bir kilobaytın altında; genel amaçlı sürümü validation-enhancer artık npm'de yayınlanıyor.

Açılıştan sonra ne oldu

Açılışta tamamlanan form sayısı ikiye katlandı. Yazarın aktardığına göre analitik, yeni kullanıcıların kaynağını açıklayamadı, çünkü JavaScript tabanlı analitik scriptler çöktüğünde siteyi terk eden ziyaretçileri hiç görmez. Sunucu tarafındaki oturum modeli de karşılığını verdi: bir kişi formu doldurmaya başladıktan bir ay sonra tamamlayıp gönderdi.

Hikaye yazarın hüzünlü dediği bir noktayla bitiyor. Sözleşmeden ayrılırken yerine gelen geliştiriciye sitenin JavaScript olmadan da her zaman çalıştığını anlattı; aldığı yanıt bunun ekip için çok daha fazla iş anlamına geldiğiydi. Eski tarayıcılardaki, zayıf bağlantıdaki ya da yardımcı teknoloji kullanan kullanıcıları dışlamak kabul edilemez, diyor — hele tekel bir kamu hizmetinde.