Сайт за HTML-first підходом подвоїв кількість користувачів за одну ніч

Розповідь розробника про те, як він перебудував вебформу публічної служби за HTML-first підходом, викликала жвавий відгук в інженерів: заміна невдалого React-застосунку подвоїла кількість людей, які заповнювали форму, у день запуску.

Клієнтом була комунальна компанія зі статусом регульованої монополії. Подати заявку на її послуги можна було або через стару ASP-форму, або через ручну процедуру, яка коштувала компанії значно дорожче. Оскільки падіння задоволеності клієнтів нижче 96 відсотків загрожувало штрафами на мільйони фунтів, цей процес мав особливу вагу.

Дві невдалі спроби та React-застосунок, знятий за три дні

Дві попередні спроби вирішити проблему вже провалилися з чималими витратами. Остання, яку збудували підрядники з іншої країни, пропрацювала три дні, після чого її вимкнули через скарги клієнтів. Автор описує безлад зі спінерами завантаження й глобальним станом JavaScript, недоступний інтерфейс і одне фатальне рішення: завантаження зображень було критичним, а застосунок зберігав їх та всі інші дані форми в localStorage, ліміт якого — близько п'яти мегабайтів.

Замість успадкування того коду розробник перебудував сервіс на Astro за HTML-first підходом: JavaScript існує лише у web-компонентах, які поступово покращують сайт, що й без них працює повністю. Його логіка така: це публічна послуга, тож вона має працювати на будь-якому пристрої, за слабкого зв'язку, і ніколи не втрачати введені дані.

Надсилання форми, редіректи та валідація до одного кілобайта

Звідси випливали вимоги: унікальний ідентифікатор для кожної сесії, збереження даних та завантажень на сервері на кожному кроці майстра, можливість заповнити форму без JavaScript і в застарілих браузерах, а також відповідність WCAG AA. Кожен крок став окремою сторінкою; надсилання валідного кроку переадресовувало браузер на наступний — класичний шаблон form-post-and-redirect, який допоміг відродити Remix.

Валідація перетворилася на окремий проєкт. Розробник написав HTML web-компонент, який обгортає будь-яку форму, читає її вбудовані атрибути валідації та показує помилки в елементі, вказаному в aria-describedby, замість спливаючих підказок браузера. Помилка зникає, щойно користувач досягає валідного значення, і перевіряється знову на blur та під час надсилання. Компонент важить менше кілобайта; його загальна версія, validation-enhancer, уже опублікована в npm.

Що сталося після запуску

Після запуску кількість заповнених форм подвоїлася. Аналітика не могла пояснити нових користувачів, зазначає автор, адже аналітика на JavaScript не бачить відвідувачів, які йдуть, коли скрипти не спрацьовують. Модель із серверною сесією теж виправдала себе: одна людина надіслала заповнену форму через місяць після початку.

Історія завершується на сумній, за словами автора, ноті. Ідучи з контракту, він пояснив своєму наступнику, що сайт завжди працював і без JavaScript; у відповідь почув, що це означає набагато більше роботи для команди. Відкидати користувачів старих браузерів, слабких мереж чи допоміжних технологій неприпустимо, наполягає він — тим паче для монопольної публічної послуги.