HTML-առաջնահերթ կայքը մեկ գիշերում կրկնապատկեց օգտատերերի թիվը

Ծրագրավորողի պատմությունը հանրային ծառայության վեբ ձևը HTML-առաջնահերթ մոտեցմամբ վերակառուցելու մասին մեծ արձագանք է ստացել ինժեներների շրջանում. ձախողված React հավելվածի փոխարինումը կրկնապատկել է ձևը լրացնող մարդկանց թիվը մեկնարկի օրը։

Հաճախորդը կարգավորվող մենաշնորհի կարգավիճակ ունեցող կոմունալ ընկերություն էր։ Օգտատերերը կարող էին դիմել ծառայությունների համար հին ASP ձևի միջոցով կամ ձեռքով ընթացակարգով, որն ընկերության համար շատ ավելի թանկ էր։ Քանի որ հաճախորդների բավարարվածության 96 տոկոսից ցածր անկումը սպառնում էր միլիոնավոր ֆունտ տուգանքներով, այս ընթացքն առանձնահատուկ կշիռ ուներ։

Երկու ձախողված փորձ և երեք օրում հանված React հավելված

Խնդիրը լուծելու երկու նախորդ փորձերն արդեն ձախողվել էին զգալի ծախսերով։ Ամենավերջինը, որը կառուցել էին այլ երկրի կապալառուները, աշխատեց երեք օր, ապա հաճախորդների բողոքների պատճառով անջատվեց։ Հեղինակը նկարագրում է բեռնման ցուցիչների ու գլոբալ JavaScript վիճակի քաոս, անհասանելի ինտերֆեյս և մեկ ճակատագրական որոշում. նկարների վերբեռնումը ձևի էական մասն էր, սակայն հավելվածը նկարներն ու մնացած տվյալները պահում էր localStorage-ում, որի սահմանը մոտ հինգ մեգաբայթ է։

Հին կոդը ժառանգելու փոխարեն ծրագրավորողը ծառայությունը վերակառուցեց Astro-ով և HTML-առաջնահերթ մոտեցմամբ. JavaScript-ը մնում է միայն web component-ներում, որոնք աստիճանաբար բարելավում են առանց դրա էլ ամբողջությամբ աշխատող կայքը։ Նրա տրամաբանությունը սա է. սա հանրային ծառայություն է, ուստի պետք է աշխատի բոլոր հնարավոր սարքերում, թույլ կապի դեպքում էլ, և երբեք չկորցնի մուտքագրված տվյալները։

Ձևի ուղարկում, վերահղում և վալիդացիա մեկ կիլոբայթից պակասում

Պահանջները բխեցին դրանից. յուրաքանչյուր սեսիայի համար եզակի նույնացուցիչ, յուրաքանչյուր քայլում տվյալների ու վերբեռնումների պահում սերվերում, ձևը լրացնելու հնարավորություն առանց JavaScript-ի և հին բրաուզերներում, ինչպես նաև WCAG AA համապատասխանություն։ Յուրաքանչյուր քայլ դարձավ առանձին էջ. վավեր քայլի ուղարկումը բրաուզերը տեղափոխում էր հաջորդին՝ դասական form-post-and-redirect օրինաչափությունը, որի վերածնմանը նպաստեց Remix-ը։

Վալիդացիան դարձավ առանձին նախագիծ։ Ծրագրավորողը գրեց HTML web component, որը փաթաթում է ցանկացած ձև, կարդում նրա ներկառուցված վալիդացիայի ատրիբուտները և սխալները ցուցադրում aria-describedby-ում նշված տարրում՝ բրաուզերի թռչող հուշումների փոխարեն։ Սխալը անհետանում է, հենց որ օգտատերը հասնում է վավեր արժեքի, և նորից ստուգվում է blur-ի ու ուղարկման ժամանակ։ Կոմպոնենտը կշռում է մեկ կիլոբայթից պակաս. նրա ընդհանուր տարբերակը՝ validation-enhancer-ը, այժմ npm-ում է։

Ինչ եղավ մեկնարկից հետո

Մեկնարկի պահին ձևի լրացումը կրկնապատկվեց։ Հեղինակի խոսքով՝ վերլուծությունը չկարողացավ բացատրել նոր օգտատերերին, քանի որ JavaScript-ի վրա հիմնված վերլուծությունը երբեք չի տեսնում այն այցելուներին, որոնք հեռանում են սկրիպտների ձախողման դեպքում։ Սերվերային սեսիայի մոդելը նույնպես արդարացրեց իրեն. մի մարդ ձևը ուղարկեց սկսելուց մեկ ամիս անց։

Պատմությունն ավարտվում է մի նոտայով, որը հեղինակը տխուր է անվանում։ Պայմանագրից հեռանալիս նա իր փոխարինողին բացատրեց, որ կայքը միշտ աշխատել է առանց JavaScript-ի. պատասխանը եղավ, որ դա թիմի համար շատ ավելի շատ աշխատանք է նշանակում։ Հին բրաուզերների, թույլ կապի կամ օժանդակ տեխնոլոգիաների օգտատերերին մերժելը անընդունելի է, պնդում է նա՝ առավել ևս մենաշնորհային հանրային ծառայության համար։