Sedam komponenti i četiri izuzetka

Imamo dizajn sistem za više platformi koji pokriva Next.js, Vite SPA i React Native. Ima 82 registrovane komponente, katalog od 81 stranice i sloj provjere koji obara build kad se prekrši konvencija.

Ništa od toga vam ne govori može li ponijeti stranicu.

Biblioteka komponenti testira samu sebe komponentu po komponentu, a to je test dijelova, ne cjeline. Zato smo uzeli postojeću marketinšku stranicu — jedan HTML fajl sa inline stilovima i malom reaktivnom skriptom — i ponovo je izgradili u cijelosti iz sistema.

Cilj nikad nije bila ljepša stranica. Cilj je bio spisak: koje komponente nose pravi ekran, koje četiri stvari nedostaju i koliko svaka od tih nedostajućih zaista košta.

Sedam komponenti je ponijelo stranicu

139 elemenata na gotovoj stranici dolazi iz dizajn sistema:

Box       63
Text      55
Link       9
Divider    7
Icon       2
Badge      2
Surface    1

Sedam komponenti za cijelu marketinšku stranicu. Ne 82 iz registra — sedam.

To je bio prvi koristan nalaz, i on izvrće pretpostavku na kojoj se biblioteka obično gradi. Katalog nije bio preuzak. Širina uopšte nije bila ograničenje.

Četiri izuzetka, svaki sa imenom i uslovom brisanja

Naspram tih 139 elemenata postoje tačno četiri izlaza iz sistema, svi skupljeni u jednom fajlu umjesto razasuti:

• tri <div style> — flex-basis za ćelije mreže, i position: sticky
• jedan styled.a — skip link

Svaki ima zapisan razlog i uslov pod kojim nestaje. To je razlika između izuzetka i curenja: izuzetak se može prebrojati, objasniti i na kraju ukloniti. Curenje se samo širi.

Evidencija — osam stvari koje sistem nije mogao

Ovo je stvarni rezultat vježbe. Ne stranica — spisak.

Dvije od njih su već stajale u našem planu kao budući posao — veličina fonta za heroj i dugme u obliku linka. Izgradnja stranice ih je iz pretpostavke pretvorila u izmjeren nalaz sa cijenom.

To je argument da se ovo uopšte radi. Backlog sastavljen na sastanku je spisak stvari koje je neko zamislio da želi. Backlog sastavljen gradnjom pravog ekrana je spisak stvari koje su vas zaista zaustavile, redom, sa dokazima.

Koliko toga ide na mobilni

Ovdje moramo biti oprezni, jer postoje dvije poštene brojke i jedna nepoštena.

Kroz sve isporučeno — 1.402 linije — 76% bi moglo raditi na React Nativeu. Ta brojka je napuhana i nećemo je koristiti. 521 od tih linija je fajl sa sadržajem: čist tekst na dva jezika, bez importa, bez JSX-a. Naravno da se prenosi. Brojati ga je punjenje.

Pošten presjek je samo UI kod — 881 linija:

„Nakon zamjene“ znači da omotače mreže zamjenjuje običan Box. Na telefonu je raspored ionako jedna kolona, pa je ta zamjena uglavnom brisanje, a ne prepisivanje.

A trećina koja je samo za web zaslužuje drugi pogled. 70 od tih 334 linije blokira jedan jedini <a href> — vanjski linkovi i mail. To je zamjena za platformin poziv za otvaranje linkova, a ne arhitektonska granica.

Zaista nesvodiv kod samo za web je oko 155 linija, otprilike 18%: ljepljiva navigacija, futer, main landmark sa svojim skip linkom i funkcije rutiranja iz frameworka.

Sve je to ljuska. Ništa od toga nije sadržaj.

Po sekcijama, od deset blokova na stranici: dva su prenosiva kakva jesu, četiri nakon zamjene, četiri su samo za web — i sva četiri su navigacija, sekcija o nama, futer i omotač rute.

Dvije stvari ispale su bolje nego original, besplatno

Nijedna nije bila cilj.

Radi u obje teme. Nijedna boja nije zapisana nigdje na stranici; sve se razrješava kroz semantičke tokene. Original tvrdo upisuje svoju pozadinu i akcent, pa postoji samo u tamnoj.

Oba jezika su indeksabilna. Jezik je segment rute, a ne pohranjena postavka, pa se svaki jezik prerenderuje kao statički HTML — oko 152 KB po jeziku. Na originalu je crawler uvijek vidio samo engleski.

Cijela stranica je serverska komponenta. Bez klijentskih ostrva, bez stanja.

Tri tišine

Ovo je dio koji bismo odnijeli bilo kojem timu, bez obzira imaju li dizajn sistem.

Svaki od tri stvarna problema koja smo našli prošao je prevodilac, linter i build.

Ime ikone koje je bilo pogrešno i nije ništa slomilo

Tražili smo tačku nabrajanja. Ime koje smo upotrijebili ispalo je alias za ikonu liste — tri linije sa tačkama, a ne jedna tačka.

Registar ikona je otvoren po dizajnu, pa su imena tipizirana kao stringovi. To znači: prevodilac ćuti, linter ćuti, build prolazi, a render daje pogrešan glif — ili praznu kutiju tačne veličine.

Uhvaćeno je gledanjem screenshota. Ništa drugo u lancu nije imalo mišljenje.

Popravka je, uzgred, bila da prestanemo koristiti ikonu: badge bez djece jeste tačka od 8px, a bio je i jedini način da se dobije akcentna pozadina pune jačine koju evidencija navodi kao nedostajuću.

Pouka je o razmjeni. Otvoren registar kupuje proširivost i plaća je tihim promašajima. Naš sloj provjere provjerava 63 žive fixture iz kataloga, ne aplikacijski kod — pa ovo nikad nije ni mogao uhvatiti.

Native test koji ostaje zelen za ekran koji se ne može otvoriti

Ovaj je gori.

Renderujte omotače samo za web u native test projektu i test prolazi, ispisujući ovo sasvim mirno:

{"type":"div","props":{"style":{"position":"sticky","top":0,"zIndex":100}}}
{"type":"a","props":{"href":"#x"}}

Test renderer bilježi stablo. Ne pita postoji li host komponenta. Na stvarnom uređaju div pada na traženju view konfiguracije.

Ni import vas ne spašava: native styled-components proxy vraća funkciju za styled.a jednako spremno kao za bilo šta drugo, jer prihvata svaki ključ.

Četiri nivoa tišine: import, prevodilac, linter, test.

Provjera koja radi je mala — nabroj host komponente u renderovanom izlazu i padni ako se pojavi išta osim View ili Text. Tako smo ujedno dokazali da je jedina zaista prenosiva kartica stvarno prenosiva: emituje samo View i Text, i ništa drugo.

Dekorativna tačka unutar pristupačnog imena

Tačka brenda na kraju naslova čitala se kao dio pristupačnog imena, sa razmakom ispred nje: „…systems that can’t stop .“

Sitno. Ali je iste vrste kao druga dva: pristupačno ime koje smo pretpostavili i pristupačno ime koje smo izmjerili bila su dva različita stringa, a samo jedno od njih je bilo stvarno.

Šta bi mobilni port zaista tražio

Ne prepisivanje. Drugu ljusku.

Praktičan potez je izdvojiti svaku sekciju u fajl koji prima samo propove dizajn sistema, i pustiti svaku platformu da donese svoju ljusku. Jedina kartica koja se prenijela bez ijedne izmjene već je tako oblikovana — zato se i prenijela.

Šta nismo izmjerili

Radije ćemo ovo reći nego da neko pretpostavi.

Stranica nije pokrenuta na uređaju ni na simulatoru. Tvrdnja o prenosivosti počiva na tome koje host komponente kod emituje, a ne na pokrenutoj aplikaciji. „Emituje samo React Native host komponente“ je tačno. „Testirana je na telefonu“ nije, i to nećemo napisati.

Bez Lighthouse mjerenja, bez mjerenja klijentskog bundlea. Set provjera prolazi — 674 testa kroz četiri projekta, izlazni kod nula — a u headless browseru nije bilo grešaka u konzoli, nema horizontalnog skrola na 390px, 29 linkova nosi ispravna pristupačna imena, i hijerarhija naslova je čista. To je ono što je provjereno. Performanse nisu.

Mobilni port nije urađen. Procenti opisuju kod kakav jeste i vrstu izmjene koja bi svakom dijelu trebala. Oni nisu izvještaj o portu koji se desio.

Šta bismo rekli drugom timu

Izgradite pravu stranicu svojim sistemom prije nego mu povjerujete. Ne demo, ne izlog svega što sistem ima — nešto što bi neko zaista morao isporučiti. Našoj je trebalo sedam komponenti i proizvela je osam konkretnih rupa, od kojih smo dvije samo nagađali.

Prebrojte svoje izuzetke i svakom dajte uslov brisanja. Četiri izuzetka u jednom fajlu je sistem sa poznatim ivicama. Ista četiri razasuta po stranici je sistem koji je tiho prestao to biti.

I pretpostavite da će skupi propusti biti tihi. Sva tri naša prošla su svaku kapiju koju smo imali. Pogrešna ikona se iscrtala. Nemoguć ekran je testirao zeleno. Pristupačno ime čitalo se drugačije nego što je izgledalo. Nijedan od njih nije bio greška — što je upravo razlog zašto su preživjeli.

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