AF Next.js Component Architecture

Mitä rakensin

Monorepon komponenttikirjasto, jonka rakensin harjoitellakseni atomista suunnittelua alusta asti. Työtiloja on kaksi: packages/ui, jossa jokainen komponentti asuu, ja apps/playground, Next.js-sovellus, jolla komponentit renderöidään ja testataan. Hierarkia kulkee atomeista molekyyleihin ja organismeihin, ja jokainen kerros kokoaa vain alapuolellaan olevasta kerroksesta. Kaikkien komponenttien propsit on tyypitetty tiukasti TypeScript-rajapinnoilla, eikä implisiittistä any-tyyppiä ole.

Mitä opin

Tärkein oivallus oli, että atominen suunnittelu on yhtä lailla viestinnän väline kuin tekninen malli. Kysymys ”onko tämä atomi vai molekyyli?” pakotti ajattelemaan komponenttien vastuita selkeämmin. pnpm-työtilat opettivat myös, miten jaetut paketit ratkaistaan eri tavalla kuin npm-paketit, ja miksi monorepot vaativat työtilojen väliset riippuvuudet kirjattaviksi eksplisiittisesti sen sijaan, että luotettaisiin nostoon.

Kohokohdat

• Atomisen suunnittelun hierarkia: atomit, molekyylit ja organismit
• Jaettu komponenttikirjasto pnpm-työtilapakettina
• Tiukka TypeScript-tyypitys jokaisen komponentin propseissa
• Playground-sovellus komponenttien eristettyyn testaamiseen

Teknologiat

• Framework: Next.js
• Kieli: TypeScript
• Monorepo: pnpm-työtilat
• Tyylit: Tailwind CSS