Progettazione atomica: la chimica dell'architettura dell'interfaccia utente

Ai vecchi tempi costruivamo “Pagine”. home.html, about.html, contact.html. Se volevi cambiare il colore del pulsante, dovevi modificare 50 file. Oggi costruiamo Sistemi. Brad Frost ha coniato il termine Atomic Design. Inquadra l’interfaccia utente come una gerarchia biologica. Si allinea perfettamente con l’Architettura basata su componenti (React, Vue, Svelte). Se non lo usi, la tua base di codice sarà probabilmente un pasticcio di stili incoerenti. Stai copiando le classi CSS invece di importare componenti.

Perché Maison Code ne parla

In Maison Code Paris, agiamo come la coscienza architettonica dei nostri clienti. Spesso ereditiamo stack “moderni” costruiti senza una comprensione fondamentale della scala.

Discutiamo di questo argomento perché rappresenta un punto di svolta critico nella maturità ingegneristica. Implementarlo correttamente differenzia un MVP fragile da una piattaforma resiliente di livello aziendale.

Perché il codice Maison impone la progettazione atomica

Non costruiamo “Siti Web”. Costruiamo “Prodotti”. I prodotti durano 5 anni. Senza un Design System il prodotto marcisce. Atomic Design è il vaccino contro “UI Rot”. Costringe gli sviluppatori a pensare in “Modelli”, non in “Pagine”. Ci permette di ampliare la squadra. 10 sviluppatori possono lavorare sulla stessa app senza intralciarsi a vicenda.

1. La Gerarchia

Atomi

I più piccoli elementi costitutivi. Non possono essere ulteriormente scomposte senza cessare di funzionare.

• Esempi: <Pulsante>, <Input>, <Label>, <Icona>, <ColorSwatch>.
• Codice: “tsx const Pulsante = ({ variante, figli }) => { restituisce <button className={btn-€{variant}}>{children }

Gli atomi hanno stili globali ma zero logica applicativa.

Molecole

Gruppi di atomi legati insieme per funzionare come un’unità.

• Esempio: <SearchForm> (Input + Pulsante).
• Esempio: <SchedaProdotto> (Immagine + Titolo + Prezzo + Pulsante).
• Filosofia: fai bene una cosa. Una molecola potrebbe avere uno stato dell’interfaccia utente locale (“isOpen”), ma raramente una logica di business.

Organismi

Gruppi di molecole uniti per formare una sezione distinta di un’interfaccia.

• Esempio: <Header> (Logo + Nav + SearchForm + CartIcon).
• Esempio: <ProductGrid> (Elenco delle schede prodotto).
• Stato: gli organismi spesso controllano lo “Stato locale” o comunicano con l’API. Sono i componenti “intelligenti”.

Modelli

Oggetti a livello di pagina che inseriscono componenti in un layout.

• Esempio: <MainLayout> (Intestazione + Barra laterale + Contenuto + Piè di pagina).
• Contesto: Definiscono la griglia, ma non il contenuto. Gestiscono la reattività.

Pagine

Istanze specifiche di modelli con contenuto reale.

• Esempio: HomePage, ProductDetailPage. Le pagine collegano il Router allo Store (Redux/Zustand) e trasmettono i dati agli Organismi.

2. Perché questo è importante per la qualità del codice

Riutilizzabilità

Se costruisci un buon atomo <Button>, lo utilizzerai 1.000 volte. Se risolvi un bug nel pulsante (ad esempio, aggiungendo uno spinner di caricamento), lo correggi istantaneamente in 1.000 punti. Questa è la Leva finanziaria.

Coerenza

(Vedi Coerenza del marchio). Gli sviluppatori non devono indovinare “Di quale riempimento ha bisogno questo pulsante?”. Importano semplicemente "". Il Design System impone le regole del marchio. Non ci sono “pixel canaglia”.

Logica e vista disaccoppianti

• Atomi/Molecole: Componenti “stupidi”. Prendono oggetti di scena (“titolo”, “immagine”) e rendono l’interfaccia utente. Non sanno nulla della tua API.
• Organismi/Pagine: contenitori “intelligenti”. Recuperano i dati (“useQuery”) e li trasmettono. Ciò semplifica i test. Puoi testare l’interfaccia utente tramite Storybook senza deridere l’API.

3. Implementazione: struttura delle directory

Non scaricare tutto in “/components”. Organizza per logica:

“bash.” origine/ componenti/ ui/ # Atomi (pulsante, input) - La “base” blocchi/# Molecole (SchedaProdotto, Eroe) sezioni/# Organismi (intestazione, piè di pagina) layout/ # Modelli pagine/# Percorsi

Questa struttura dice a un nuovo sviluppatore esattamente dove cercare.

## 4. Gettoni di design: il DNA

Gli atomi hanno bisogno di valori. Colori, spaziatura, tipografia.
Questi sono **Token di design**.
Memorizzarli in un file di configurazione (Tailwind Config o Variabili CSS).
```css
:radice {
  --color-primario: #FF5733;
  --spacing-md: 16px;
}

Ora, il tuo componente React utilizza var(--spacing-md), non 16px. Se vuoi rinominare il sito? Cambia un file. L’intero sito si aggiorna. I token sono il contratto tra Design e Ingegneria.

5. Il flusso di lavoro del libro di fiabe

Non puoi creare Atom all’interno di una Pagina. C’è troppo rumore. Hai bisogno di un “Laboratorio”. Storybook è quel laboratorio. Costruisci il <Button> in modo isolato. Metti alla prova tutti i suoi stati: hover, disabled, loading, error. Assicurati che sia accessibile. Solo quando è perfetto lo inserisci nell’App. Sviluppo guidato: crea prima l’interfaccia utente in Storybook. Collegalo ai dati per secondo.

6. Il modello di governance (Chi possiede gli atomi?)

Chi è autorizzato a modificare il <Pulsante>? Se tutti lo cambiano, si rompe. Il team del sistema di progettazione. Nelle organizzazioni di grandi dimensioni, ingegneri specifici possiedono la “Libreria dell’interfaccia utente”. Gli ingegneri di prodotto consumano la libreria. Se un ingegnere di prodotto ha bisogno di una nuova variante del pulsante, effettua un PR alla Libreria. Viene rivisto per coerenza e accessibilità. Ciò impedisce la “deriva del componente”.

6. Il problema dell’organismo (dove lo metto?)

La parte più difficile dell’Atomic Design è l’area grigia. “È una molecola o un organismo?” Regola del codice della maison:

• Se ha una logica aziendale (chiamate API, connessione redux), è un Organismo.
• Se è puramente presentazionale (oggetti di scena in entrata, interfaccia utente in uscita), è una Molecola.
• Se contiene un Organismo, deve essere un Modello o una Pagina. (Gli organismi non dovrebbero contenere altri organismi per evitare il “Prop Drilling Hell”).

7. Test di regressione visiva (cromatico)

Il design atomico funziona meglio con i test visivi. Dato che hai una libreria di atomi, devi assicurarti che non si rompano. Usiamo Chromatic (di Storybook).

1. CI/CD crea Storybook.
2. Chromatic acquisisce screenshot di ogni componente.
3. Confronta pixel per pixel con il ramo “main”.
4. Se un pixel viene modificato, la creazione fallisce. Questo ti dà la sicurezza di effettuare il refactoring dei CSS. “Ho modificato il riempimento globale. Ho rotto il pulsante Checkout?” Cromatico te lo dirà.

8. Il sito della documentazione (Zeroheight)

Storybook è per gli sviluppatori. I designer hanno bisogno di Zeroheight. Si sincronizza con Figma e Storybook. Visualizza:

1. Il Design (Figma).
2. Il Codice (React).
3. Cosa fare e cosa non fare (linee guida per l’uso). Questa è l’Singola Fonte della Verità. Senza questo, sviluppatori e designer si allontanano.

9. Componenti composti (Advanced React)

Come si costruiscono molecole complesse come un “menu a discesa”? Passare 50 oggetti di scena (isOpen, onClose, item1, item2) è brutto. Utilizza il Modello componente composto. “tsx

Apri Modifica Elimina ``` Il genitore "" contiene lo stato (Contesto). I bambini leggono lo stato. Ciò mantiene i tuoi Atom puliti e componibili.

10. Oggetti di stile e oggetti di tema (progettazione API)

Dovresti consentire style={{ marginTop: 10 }} sui tuoi Atom? No. Se consenti stili arbitrari, gli sviluppatori utilizzeranno valori arbitrari. “Ho bisogno di 13px qui.” Strategia: limita gli oggetti scenici al tema. <Box margin="md" color="primary" /> Ciò costringe gli sviluppatori ad attenersi ai token di progettazione. Rimuove la “Botola di fuga”. I vincoli generano coerenza.

11. Token di progettazione in Tailwind (strategia di configurazione)

Tailwind è Atomic CSS, ma necessita di Atomic Design. Non utilizzare valori arbitrari (w-[123px]). Configura i tuoi token in “tailwind.config.js”.

tema: {
  colori: {
    primaria: "var(--color-primary)", // Mappa sulla variabile CSS
  },
  spaziatura: {
    md: "var(--spacing-md)",
  }
}

Ora gli sviluppatori devono usare bg-primary e p-md. Fisicamente non possono usare colori fuori marca se si attengono alla configurazione. Questa è “ingegneria dei guardrail”.

12. Conclusione

Il Design Atomico non è solo per i Designer. È il modello mentale per la moderna ingegneria frontend. Trasforma il Caos in Ordine. Trasforma le “Pagine” in “sistemi”. Ti consente di spedire più velocemente, con una qualità superiore e meno paura. Inizia a pensare in atomi.

---

Codice spaghetti?

Effettuiamo il refactoring delle basi di codice legacy in architetture atomiche scalabili utilizzando React e Tailwind.

Architetta la mia interfaccia utente. Assumi i nostri architetti.