Principii de arhitectură
Coeziune, cuplare, direcția dependențelor, interfață publică, colocation.
Actualizat
Ce este arhitectura unui proiect frontend
Arhitectura = regulile după care organizezi codul: unde stă fiecare fișier, cine poate importa pe cine și cum comunică părțile între ele. Nu e despre framework (React, Next), ci despre structura codului tău deasupra lui.
De ce contează arhitectura
La 10 fișiere orice structură merge. La 500, structura decide dacă găsești codul în 5 secunde sau în 5 minute și dacă o modificare strică 1 loc sau 15.
5 principii care stau la baza oricărei arhitecturi
1. Coeziune mare — ce se schimbă împreună stă împreună. Componenta, hook-ul, tipurile și query-ul pentru „coș” — în același loc.
2. Cuplare mică — modulele știu cât mai puțin unul despre altul. Comunică prin interfețe mici (props, funcții exportate), nu prin detalii interne.
3. Direcția dependențelor — dependențele curg într-o singură direcție: de la cod specific (pagini) spre cod generic (utilitare). Niciodată invers. Așa eviți importurile circulare.
views→features→entities→sharedInvers (shared importă din features) — interzis.
4. Interfață publică clară — fiecare modul decide ce expune. Restul e detaliu intern, care se poate schimba liber.
5. Colocation — ține lucrurile cât mai aproape de unde sunt folosite. Ceva devine „shared” doar când chiar e folosit în 2–3 locuri.
Semne că arhitectura nu merge
- „Unde pun fișierul ăsta?” — întrebare zilnică.
- Folder
utils/saucomponents/cu 80 de fișiere fără legătură. - Schimbi o componentă și se strică o pagină care „n-avea legătură”.
- Importuri de tipul
../../../../shared/x. - Ștergi un feature și rămân bucăți din el prin tot proiectul.
Reguli practice, indiferent de arhitectură
- Nume de fișiere descriptive (
site-header.tsx, nuindex.tsx× 40). - Logica de business nu stă în componente UI — o extragi în funcții pure (testabile).
- Accesul la date (fetch, SQL) într-un singur strat, nu împrăștiat prin componente.
- Lint-ul poate impune regulile de import (ex.
eslint-plugin-boundaries, Steiger pentru FSD).
Pe scurt
- Arhitectură = unde stă codul și cine poate importa pe cine.
- Coeziune mare, cuplare mică, dependențe într-o singură direcție.
- Interfață publică clară, colocation, logică de business separată de UI.