Dev notes 14.03.26 #005

Bieži saku, ka shadcn/ui nav vienkārši kārtējā UI bibliotēka. Patiesībā tā ir pavisam cita domāšanas pieeja tam, kā tiek būvēti moderni SaaS produkti. Kad es pirmo reizi ar to sāku strādāt, man diezgan ātri kļuva skaidrs, ka tas nav tikai dizaina rīks — tas ir arhitektūras lēmums.

Parasti, kad cilvēki izmanto kādu UI bibliotēku, piemēram, Material UI vai Ant Design, viņi instalē pakotni un lielākā daļa komponentu dzīvo `node_modules`. Tas nozīmē, ka tu faktiski izmanto melno kasti. Tu vari konfigurēt dažas lietas, bet pašā pamatā bibliotēka nosaka noteikumus.

Ar shadcn viss notiek citādi.

Kad es pievienoju komponentu, tas netiek ielādēts kā ārēja bibliotēka. Tas tiek ierakstīts tieši projektā kā kods. Rezultātā visi komponenti dzīvo `/components/ui` mapē, un es varu mainīt jebkuru rindiņu. Ja man vajag pogu ar nedaudz citādu uzvedību vai dialogu ar specifisku animāciju, es vienkārši atveru failu un izmainu kodu.

Tas var šķist mazs tehnisks sīkums, bet patiesībā tas pilnībā maina attiecības starp izstrādātāju un UI sistēmu. Tu vairs neesi atkarīgs no bibliotēkas versijām vai API izmaiņām. Projekts pamazām izveido savu dizaina sistēmu, kas kļūst par daļu no produkta infrastruktūras. SaaS produktos tas ir īpaši svarīgi, jo UI sistēmas bieži dzīvo gadiem ilgi.

Vēl viens ļoti svarīgs aspekts ir tas, ka shadcn komponenti balstās uz Radix UI. Radix pieeja ir interesanta ar to, ka tā fokusējas uz tā sauktajiem headless komponentiem. Tas nozīmē, ka viņi atrisina visas sarežģītās lietas — pieejamību, fokusēšanu, klaviatūras navigāciju, ARIA atribūtus, dropdown loģiku un dialogu uzvedību — bet neuzspiež nekādu konkrētu dizainu.

Ja kādreiz esi mēģinājis pats uzrakstīt perfekti pieejamu dialogu vai dropdown izvēlni, tu zini, cik tas patiesībā ir sarežģīti. Ir jādomā par focus trap, escape taustiņu, screen reader uzvedību, scroll bloķēšanu un vēl daudzām citām niansēm. Radix to visu jau ir atrisinājis profesionālā līmenī. shadcn vienkārši uzliek tam virsū minimālistisku dizaina slāni.

Rezultātā interfeiss izskatās ļoti vienkāršs, bet zem virsmas darbojas ļoti stabila UX infrastruktūra.

Trešais svarīgais aspekts ir integrācija ar Tailwind CSS. Tailwind būtībā maina to, kā mēs domājam par CSS. Tradicionāli mēs rakstām HTML un tad atsevišķos CSS failos definējam stilus. Tailwind pieejā dizains tiek veidots tieši komponentā, izmantojot utility klases.

Tas nozīmē, ka dizaina sistēma kļūst par konkrētu tokenu kopu, kas tiek izmantota tieši kodā. Kad komponentā redzi klases kā `bg-zinc-950`, `text-zinc-50` vai `border-zinc-200`, tas nav tikai stils — tā ir faktiski dizaina valoda, kas tiek izpildīta kodā.

Tas arī padara izstrādi daudz ātrāku, jo nav jāpārlec starp CSS failiem un komponentiem. Viss notiek vienā vietā, un dizaina izmaiņas var veikt ļoti ātri.

Man ļoti patīk arī tas, ka shadcn pieeja ir modulāra. Daudzas tradicionālās UI bibliotēkas pievieno projektam diezgan lielu JavaScript apjomu, pat ja tu izmanto tikai dažus komponentus. Ar shadcn tas nenotiek. Tu pievieno tikai tos komponentus, kuri tev patiešām ir vajadzīgi. Ja projektā izmanto tikai pogu, input lauku un dialogu, tad projektā būs tikai šo komponentu kods.

Tas padara aplikāciju daudz vieglāku un ātrāku, īpaši ja projekts ir būvēts ar Next.js.

Tieši uz Next.js es arī būvēju visu sistēmu. Tas ļauj apvienot server renderēšanu, React komponentus un modernu routing vienā framework. Viena no lietām, kas man ļoti patīk Next.js, ir Incremental Static Regeneration jeb ISR. Ar ISR lapas var tikt ģenerētas statiski, bet vienlaikus tās var arī automātiski atjaunoties fonā. Tas nozīmē, ka lietotājs vienmēr saņem ļoti ātru lapu, bet saturs joprojām var būt dinamisks.

Rezultātā aplikācija ielādējas gandrīz kā statiska vietne, kas rada ļoti labu lietotāja pieredzi.

Autentifikācijai es izmantoju Clerk. Tas ļauj ļoti ātri ieviest lietotāju kontus, login un signup sistēmu, kā arī lietotāju sesiju pārvaldību. Tas noņem milzīgu daudzumu darba, kas citādi būtu jāveic pašam.

Savukārt datu loģiku un backend funkcijas es veidoju ar Convex. Convex ļoti labi strādā kopā ar React, jo tas piedāvā reāllaika datu sinhronizāciju un server funkcijas bez klasiskā REST API slāņa. Tas padara frontend un backend sadarbību daudz vienkāršāku.

Kad runa ir par maksājumiem, ideāls sabiedrotais šādai arhitektūrai ir Stripe. Stripe piedāvā ļoti stabilu un labi dokumentētu maksājumu infrastruktūru, kas ļauj ātri ieviest abonementus, vienreizējos maksājumus un billing sistēmas. SaaS produktos tas ir kritiski svarīgi, un Stripe to atrisina ļoti eleganti.

Interfeisa kustībām un animācijām es izmantoju Framer Motion. Tas ļauj pievienot ļoti glītas un dabiskas animācijas — pogu hover efektus, elementu parādīšanos, mikrointerakcijas. Šīs animācijas nav tikai dekorācija. Tās palīdz lietotājam saprast, kas notiek interfeisā, un padara produktu daudz dzīvāku.

Visa šī infrastruktūra beigās tiek deploy uz Vercel. Vercel ir praktiski ideāla platforma Next.js projektiem. Deploy process ir ļoti vienkāršs, preview vide tiek izveidota katram commit, un produkcija var tikt atjaunināta dažu sekunžu laikā.

Papildus tam šāda arhitektūra ļauj ļoti labi pārvaldīt arī SEO. Next.js server renderēšana un statiskā ģenerēšana nozīmē, ka saturs ir pilnībā saprotams meklētājiem. Ja metadata, struktūra un semantiskais HTML ir pareizi veidots, tas rada ļoti tīru SEO signālu, kas patīk meklētājprogrammām, piemēram, Google.

Rezultātā vietne ir gan ātra, gan tehniski pareizi strukturēta, kas ilgtermiņā palīdz arī organiskajai redzamībai.

Runājot par dizainu, es izvēlējos izmantot Zinc krāsu paleti no Tailwind. Tailwind piedāvā vairākas neitrālās krāsu skalas, bet Zinc man šķiet vispiemērotākā šai estētikai. Tai ir nedaudz industriāls tonis, kas ļoti labi saskan ar minimālistisku SaaS dizainu.

Piemēram, Zinc-950 ir gandrīz melns tonis, kuru es izmantoju virsrakstiem un galvenajām pogām. Tas rada ļoti spēcīgu kontrastu un autoritātes sajūtu. Savukārt Zinc-50 tiek izmantots kā galvenais fons. Tas nav pilnīgi balts — tajā ir ļoti viegla pelēka pieskaņa, kas padara interfeisu mierīgāku un vizuāli dārgāku.

Robežām un struktūrai ļoti labi strādā Zinc-200 un Zinc-300. Šīs krāsas ir pietiekami redzamas, lai turētu interfeisa struktūru, bet pietiekami neitrālas, lai nenovērstu uzmanību no satura. Savukārt Zinc-500 ir ideāls sekundārajam tekstam un aprakstiem, jo tas ir labi lasāms, bet nepārspēj galveno saturu.

Rezultātā viss interfeiss kļūst ļoti mierīgs un strukturēts. Man patīk to saukt par vizuālo intelektuālo klusumu. Interfeiss nepievērš sev uzmanību — tas vienkārši ļauj lietotājam koncentrēties uz produktu.

Un tieši tāpēc man šāda pieeja šķiet tik interesanta. Tā nav tikai tehnoloģiju kaudze vai komponentu kolekcija. Tā ir vesela filozofija par to, kā būvēt modernu produktu, kur arhitektūra, dizains, ātrums, SEO un lietotāja pieredze strādā kopā kā viena sistēma.