E-trgovina / interaktivno
Konfigurator maski za uređaje po meri
Konfigurator bez ijedne zavisnosti koji kupcima omogućava da dizajniraju masku za tačno svoj uređaj i dodaju je u korpu — napravljen u čistom JavaScriptu da bi ostao tečan i na starim telefonima slabih performansi.
Pregled
Kupci su želeli da sami dizajniraju svoju masku — za tačno svoj telefon, tablet ili laptop — sa sopstvenim slikama i rasporedom, i da je onda kupe bez izlaska iz prodavnice u kojoj su već bili. Kvaka je bila u performansama: ovo je moralo tečno da radi na onakvom starijem telefonu slabih performansi kakav mnogi kupci zapravo koriste, a ne samo na programerovom vrhunskom uređaju.
Problem
Interaktivni konfiguratori su obično mesto gde težina fronta ode da umre. Posegneš za teškim frejmvorkom i bogatom canvas bibliotekom i doživljaj je divan na novom uređaju, a projekcija slajdova na onom starom tri godine — što je tačno onaj uređaj koji mnogi kupci drže u ruci. Budžet za performanse nije bio poželjan dodatak; bio je čitav zadatak. I sve je moralo da se uklopi u postojeću prodavnicu i naplatu, a ne da ih zameni.
Rešenje
Konfigurator sam napravio u čistom JavaScriptu — bez opterećenja frejmvorka koje bi usporilo stariji hardver. Kupci biraju tačno svoj model, dizajniraju masku po meri sa sopstvenim slikama i rasporedom, i gotov proizvod dodaju pravo u korpu kroz postojeći sistem e-trgovine. Laravel API ga podupire podacima o uređajima, obradom slika i integracijom porudžbina.
Rezultat je brz konfigurator bez zavisnosti koji ostaje tečan čak i na starijim telefonima i potpuno je integrisan sa prodavnicom i naplatom koje su već bile tu.
Arhitektura
Podela je čista: lagani klijent koji drži svu interaktivnost, i Laravel API koji drži sve ono čemu klijent ne treba da se veruje — katalog uređaja, obradu slika, i pretvaranje dizajna u stvarnu porudžbinu u postojećoj prodavnici.
Na klijentu, izbor čistog JavaScripta bio je promišljena arhitektonska odluka, a ne nostalgija. Direktna kontrola nad DOM-om i renderovanjem značila je direktnu kontrolu nad profilom performansi: bez troška rekoncilijacije koji nisam tražio, bez bundle-a koji mi nije trebao. Obrada slika — postavljanje, pozicioniranje i pregled kupčeve sopstvene grafike na pravom obliku uređaja — bila je deo koji je najviše morao da bude brz i jeftin na klijentu, a preseljen na API tamo gde je bio zahtevan.
Tehnički izazovi
Učiniti da se bogata, slikama zasićena interakcija čini trenutnom na ograničenom hardveru jeste disciplina oduzimanja. Svaka funkcionalnost je morala da opravda svoju cenu u milisekundama i memoriji: kako se slike učitavaju i skaliraju, kako se pregled ažurira dok kupac prevlači, koliko posla se obavlja po frejmu. I sve to je moralo da se dogodi unutar tuđe prodavnice — poštujući postojeće ugovore korpe i naplate umesto da ih zaobilazi, tako da se proizvod po meri ponaša kao bilo koja druga stavka.
Naučene lekcije
Pravi alat je onaj koji odgovara ograničenju, a ovde je ograničenje bilo tuđi stari telefoni. Izbor čistog JavaScripta umesto frejmvorka nije bio izjava o frejmvorcima — bio je najmanja stvar koja je zadovoljila prag performansi i čisto se integrisala. Dobar je podsetnik da „moderan stack” i „pravi stack” nisu sinonimi, i da je najimpresivnije inženjerstvo često ono što ste izabrali da ne uključite.