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-ის გარეშე ყოველთვის მუშაობდა; პასუხი იყო, რომ ეს გუნდისთვის გაცილებით მეტ სამუშაოს ნიშნავს. ძველ ბრაუზერებზე, სუსტ კავშირზე ან დამხმარე ტექნოლოგიებზე მომხმარებლების გაგდება მიუღებელია, ამბობს ის — მით უმეტეს მონოპოლიური საჯარო სერვისისთვის.