Stranica s napola izgrađenim dizajn sistemom bila je veća od čistog HTML-a

Našu marketinšku stranicu imamo u tri implementacije i sve tri su na disku:

Tri verzije istog ekrana rijetko ko ima. Ujedno se samo tako može odgovoriti na pitanje o kojem se stalno raspravlja, a koje se rijetko mjeri: koliko vam dizajn sistem uštedi?

Sve što slijedi izbrojano je iz koda tog istog ekrana.

Broj znakova, ne računajući komentare u kodu:

Verzija u dizajn sistemu ima 44% manje koda od ručno pisane na početnoj stranici i 58% manje na stranici za kontakt.

Nisam očekivao da će B biti najveći od sva tri, veći čak i od golog HTML-a.

Gledano unazad, razlog je očigledan, ali ga je unaprijed lako previdjeti. Prije nego što B dobije ijednu stranicu, treba mu vlastiti kontejner, sekcija, naslov, dugmad, traka s brojkama i kartica: petnaest fajlova koji ponavljaju ono što Box i Text komponenta već rade. Verzija u čistom HTML-u taj trošak nikad ne plaća, jer i ne pokušava biti sistem.

Napola izgrađen sistem zato košta više nego nikakav, bez obzira na to na kojoj je biblioteci napravljen.

Veličina koda je slaba mjera. Više o budućem poslu govori broj dizajn vrijednosti koje su ručno upisane u kod.

C ih ima četrdeset puta manje od golog HTML-a i petnaest puta manje od ručno pisanog sistema.

Ni tih trinaest u C-u nije razbacano. To su tri piksel vrijednosti i deset flex-basis brojeva, sve u jednom fajlu, i za svaku je zapisano pod kojim uslovom nestaje.

Ovaj dio poređenja može pratiti i neko ko nije inženjer.

Za novu boju brenda treba izmijeniti 58 mjesta u verziji s čistim HTML-om i jedan token u dizajn sistemu, a taj token onda važi na sve tri platforme. Po meni je tu ušteda veća nego u broju znakova.

Pogledajte prva dva reda za B.

B je boje tokenizovao kako treba: 48 vlastitih varijabli i 276 upotreba. Po bojama je ravan dizajn sistemu.

Mjere nije tokenizovao, pa ima 196 ručno pisanih piksel vrijednosti.

To je čest obrazac i kladio bih se da ga imate i u svom kodu: timovi tokenizuju ono što boli odmah, a ostave ono što će boljeti tek za godinu dana.

Pogrešna boja brenda vidi se na screenshotu i neko se požali istog dana. Nedosljedan razmak mjesecima prolazi neprimijećeno, a onda se pretvori u redizajn koji niko ne stigne uklopiti u plan. Zato prvo treba tokenizovati ono što još ne boli, recimo razmake.

U dizajn sistemu disciplina ne igra nikakvu ulogu, jer taj izbor ne postoji: padding prop ne prima piksel vrijednost.

B pokazuje i šta se desi kad se sistem usvoji napola.

U vlastitom fajlu teme B pregazi 69 od 212 varijabli dizajn sistema. Ostale 143 varijable nikad nisu pregažene, pa prate sistem, dok tih 69 prati lokalni fajl.

O toj podjeli niko nije odlučio. Tu je posao stao. Sada pola površine prati jedan izvor, a pola drugi, bez ijedne oznake šta je šta.

Napisao sam deset grešaka koje novi developer napravi u prvoj sedmici i propustio ih kroz oba pristupa.

U dizajn sistemu svaka od deset postaje greška kompajliranja na mjestu poziva:

1<Box padding="16px" />           // string is not assignable to a space token2<Box gap={7.5} />                // 7.5 is not a step on the scale3<Box background="teal" />        // not a background token4<Box maxWidth="1200px" />        // not one of the seven widths5<Box marginTop={-3} />           // negative steps are strings: "-3"6<Text variant="huge" />          // not a text variant7<Text tone="brand" />            // not a tone8<Text align="left" />            // it's "start", not "left"9<Box style={{ padding: 16 }} />  // there is no style prop10<Box border="default" />         // border is a boolean here

Iste greške, napisane kao styled-components:

1const A = styled.div`2  padding: 16px;3  gap: 15px;4  background: teal;5  max-width: 1200px;6  margin-top: -3px;7  font-size: 42px;8  color: #brand;9  text-align: left;10  paddin: 16px;     /* misspelled property */11  colour: red;      /* misspelled property */12`;

Ovdje se ne uhvati nijedna od deset. Sve se kompajlira.

Posljednje dvije, paddin i colour, prođu bez greške i bez upozorenja i ne rade ništa. Element nije ono što je njegov autor mislio da jeste.

Vlastito lint pravilo u našem repou hvata tri od deset, i to samo tamo gdje za vrijednost postoji token. Produkcijski sajt to pravilo nema, pa je tamo broj nula.

Za novog developera razlika je u tome što mu u dizajn sistemu editor ne dopusti grešku, a sa styled-components za grešku sazna tek kad je neko primijeti.

Skupovi dizajn sistema su mali i konačni: devet koraka razmaka, šest radijusa, četrnaest varijanti teksta, jedanaest tonova, dvanaest pozadina, pet sjena i sedam širina. Veličina fonta se uopšte ne može zadati. Birate varijantu teksta umjesto broja.

U B-u te vrijednosti morate pamtiti. U C-u vam ih editor ponudi dok kucate.

Provjera kataloga pokreće se kao dio verifikacije i pada ako komponenta nema unos ili primjer, ili ako su generisani propovi zastarjeli. Dokumentacija ne može zaostati za kodom, jer se build prije toga zaustavi.

Rekao bih da to vrijedi više od uštede u kodu. Komponente bez dokumentacije pišu se iznova umjesto da se ponovo koriste, i tako se dođe do njih dvadeset šest.

Prva stranica na bilo kojem sistemu plaća trošak postavljanja. Zato sam napravio drugu, stranicu za kontakt, da bih vidio koliko sistem vrijedi kad već postoji.

Izrada je trajala četiri minute i četrdeset devet sekundi, od prve linije do zelenog prolaza verifikacije, uključujući vrijeme za ispravku jedne greške.

Tu brojku neću porediti s ljudskim radom. To je vrijeme agenta, a ni polazna tačka nije čista: i produkcijski sajt napravljen je uz pomoć agenta, za dva i po dana i u trideset osam commitova, a Git mjeri kalendarsko vrijeme, što nije isto što i rad.

Mogu reći šta je donijelo tu brzinu:

Novi su bili samo odnos kolona i forma. Sve ostalo je uvezeno.

Okvir stranice izdvojen je u vlastiti fajl tek kad je zatrebao i drugoj stranici. Izdvajanje prije toga bilo bi nagađanje o tome šta će stranice dijeliti.

• Brojka za mobilni u tabeli iznad samo razvrstava kod. Port tada još nije bio urađen. U međuvremenu je urađen i pokrenut na uređaju, a tekst o prenošenju ove stranice na telefon opisuje ga zajedno s brojkom koju je dao.
• Nemam mjerenje vremena izrade koje bi se moglo porediti s ljudskim radom, iz razloga navedenih gore.
• Forma za kontakt nema transport. Ništa se nigdje ne šalje, a to piše i u kodu i na ekranu.
• Tri verzije nisu funkcionalno identične. Original ima padajuće menije i burger meni, a nova verzija ih namjerno nema.
• Uz poređenje stranica za kontakt ide jedna ograda. Forma na produkcijskom sajtu ima captchu i server akciju, a njih u novoj verziji nisam pravio. Čak i kad se od produkcijske verzije velikodušno oduzme šezdeset linija, odnos je 312 naspram 137.