Istu stranicu smo napisali tri puta. Ručno pisana je bila najveća.

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

Tri verzije jednog ekrana su neobična stvar za imati. Ujedno su i jedini način da se odgovori na pitanje o kojem se stalno raspravlja a koje se rijetko mjeri: šta vam dizajn sistem zapravo uštedi?

Sve ispod je izbrojano iz koda, na istom ekranu.

Rezultat koji nismo očekivali

Znakovi, bez komentara:

44% manje od ručno pisane verzije na početnoj. 58% manje na kontaktu.

Ono s čim smo morali sjesti: B je najveći od tri. Veći od golog HTML-a.

Razlog je, gledano unazad, očigledan, a unaprijed ga je lako promašiti. Prije nego što B može napisati stranicu, mora napisati kontejner, sekciju, naslov, dugmad, traku sa brojkama, karticu — petnaest fajlova koji reprodukuju ono što kutija i tekstualna komponenta već rade. Verzija u čistom HTML-u nikad ne plaća taj trošak, jer se nikad i ne pretvara da ima sistem.

Napola izgrađen sistem je skuplji nego nikakav sistem. To je nalaz, i nema nikakve veze s tim koju je biblioteku ko izabrao.

Brojka koja predviđa kasniju muku

Veličina koda je slaba mjera. Ova nije: koliko je dizajnerskih vrijednosti ručno upisano u kod.

Četrdeset puta manje nego goli HTML. Petnaest puta manje nego ručno pisani sistem.

A tih trinaest nisu razbacane: tri piksel vrijednosti i deset flex-basis brojeva, sve u jednom fajlu, svaka sa zapisanim uslovom pod kojim nestaje.

Šta jedna izmjena zaista dodirne

Ovo je verzija argumenta koju razumije i onaj ko nije inženjer.

Obrazac skriven u toj tabeli

Pogledajte prvi i drugi red zajedno, za B.

B je svoje boje tokenizovao kako treba — 48 vlastitih varijabli, 276 upotreba. Po boji je zaista ravan dizajn sistemu.

B svoje mjere nije tokenizovao. 196 ručno pisanih piksel vrijednosti.

To nije neznanje. To je obrazac, i kladili bismo se u novac da je i u vašem kodu: tokenizujete ono što boli odmah, a ne tokenizujete ono što boli za godinu dana.

Pogrešna boja brenda se vidi na snimku ekrana i neko se požali istog dana. Nedosljedan razmak je nevidljiv mjesecima, a onda postane redizajn koji niko ne može ubaciti u raspored.

Bitna razlika nije u tome da je jedan tim bio disciplinovaniji. Nego u tome što u dizajn sistemu taj izbor nije ni dostupan: padding prop fizički ne prima piksel vrijednost.

Dva izvora istine koji se tiho razilaze

U B-u postoji još jedna stvar koju vrijedi imenovati, jer je to način na koji puca polovično usvajanje sistema.

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

To niko nije odlučio. Tu je posao jednostavno stao. A znači da pola površine prati jedan izvor a pola drugi, bez ijedne oznake koja bi igdje rekla šta je šta.

Šta prevodilac hvata

Napisali smo deset grešaka koje novi developer napravi u prvoj sedmici i propustili ih kroz oba pristupa.

U dizajn sistemu su svih deset greške prevodioca na mjestu poziva:

<Box padding="16px" />           // string se ne može dodijeliti space tokenu
<Box gap={7.5} />                // 7.5 nije korak na skali
<Box background="teal" />        // nije background token
<Box maxWidth="1200px" />        // nije nijedna od sedam širina
<Box marginTop={-3} />           // negativni koraci su stringovi: "-3"
<Text variant="huge" />          // nije varijanta teksta
<Text tone="brand" />            // nije ton
<Text align="left" />            // piše se "start", a ne "left"
<Box style={{ padding: 16 }} />  // style propa nema
<Box border="default" />         // border je ovdje boolean

Deset od deset.

Iste greške, napisane kao styled-components:

const A = styled.div`
  padding: 16px;
  gap: 15px;
  background: teal;
  max-width: 1200px;
  margin-top: -3px;
  font-size: 42px;
  color: #brand;
  text-align: left;
  paddin: 16px;     /* pogrešno napisano svojstvo */
  colour: red;      /* pogrešno napisano svojstvo */
`;

Nula od deset. Sve se to prevede.

I pogledajte posljednja dva. paddin i colour se prihvataju i tiho ne rade ništa. Nema greške, nema upozorenja, nema ni traga — samo element koji 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. Na produkcijskom sajtu tog pravila nema, pa je tamo nula.

Za nekoga novog, to je razlika između „editor mi ne da da pogriješim“ i „saznat ćeš kad neko primijeti.“

Šta morate držati u glavi

Skupovi dizajn sistema su mali i konačni: devet koraka razmaka, šest radijusa, četrnaest varijanti teksta, jedanaest tonova, dvanaest pozadina, pet sjena, sedam širina. Veličine fonta nema uopšte — birate varijantu, ne broj.

Razlika nije u tome da je „manje za naučiti“. Razlika je između onoga što pamtite i onoga što vam editor doda u ruke.

Dokumentacija koja ne može zastarjeti

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

To je dio za koji bismo tvrdili da vrijedi više od uštede u kodu. Nedokumentovane komponente se ne koriste ponovo; ponovo se implementiraju. Tako se i dođe do njih dvadeset šest.

Druga stranica

Prva stranica bilo čega plaća postavku. Zato smo napravili drugu — stranicu kontakta — da vidimo koliko sistem vrijedi kad već postoji.

Trajalo je četiri minute i četrdeset devet sekundi, od prve linije do zelenog prolaza verifikacije, uključujući grešku koju smo napravili i ispravili.

Tu brojku nećemo stavljati pored ljudskog rada, i želimo jasno reći zašto. To je vrijeme agenta, a ni polazna tačka nije čista — produkcijski sajt je i sam građen agentom, kroz dva i po dana i trideset osam commita. Git mjeri kalendarsko vrijeme, ne rad.

Ono što se može tvrditi jeste odakle je brzina došla:

Nove su bile samo dvije stvari: odnos kolona i forma. Sve ostalo je bio uvoz.

A okvir stranice je izdvojen u vlastiti fajl tek tada — kad se pojavio drugi potrošač, ne prije. Izdvajanje prije drugog potrošača je nagađanje o tome šta će biti dijeljeno.

Šta ne tvrdimo

• Ništa od ovoga nije pokretano na uređaju ni na simulatoru. Brojka za mobilni počiva na tome koje host komponente kod emituje, ne na pokrenutoj aplikaciji.
• Nema mjerenja vremena gradnje uporedivog s ljudskim radom. Vidi iznad.
• Forma za kontakt nema transport. Ništa se nigdje ne šalje, i to piše i u kodu i na ekranu.
• Tri verzije nisu funkcionalno identične. Original ima padajuće menije i burger; ponovna gradnja ih namjerno nema.
• Poređenje kontakta nosi ogradu. Njihova forma ima captchu i server akciju koje mi nismo gradili. Čak i nakon što se njihovoj strani velikodušno oduzme šezdeset linija, odnos je 312 naspram 137.

Šta bismo iz ovoga uzeli

Pola sistema košta više nego nijedan. Ručno pisana verzija je najveća od tri, a svaka linija tog viška otišla je na ponovnu gradnju primitiva koji su negdje već postojali.

Tokenizujte ono što još ne boli. Boja se tokenizuje svugdje, jer se pogrešna boja vidi danas. Razmak rijetko, jer je pogrešan razmak nevidljiv sve dok ne postane redizajn.

Prava ušteda nisu znakovi, nego ono što jedna izmjena dodirne. Pedeset osam mjesta naspram jednog. Ta brojka je cijeli argument, i ne treba joj grafikon.

Ovo je proizašlo iz gradnje dizajn sistema za više platformi koji pokriva Next.js, React Native i Vite SPA. Pročitajte studiju →