Ciao, e benvenuto nella quarta puntata della quarantanovesima stagione. Oggi vediamo un'idea firma di Vue, comodissima all'uso, ma che è anche una vera presa di posizione su come organizzare il codice, contro una vecchia ortodossia. Riguarda dove mettere le tre cose di cui è fatto ogni pezzo di interfaccia. Oggi capiamo il componente in un file: tre cose in un posto solo.
Partiamo dalla vecchia ortodossia, perché è ciò che Vue sfida. Per anni la regola del web è stata: tieni separati i tuoi tre linguaggi. La struttura, l'ossatura della pagina, in un file. Lo stile, l'aspetto, in un altro. Il comportamento, la logica, in un terzo. Si chiamava separazione delle preoccupazioni, ed era considerata buona igiene: ogni linguaggio a casa sua, in un file dedicato, lontano dagli altri. Mescolarli sembrava disordine, sciatteria, un peccato contro il buon ordine del codice.
Voglio darti la mossa di Vue, perché è quietamente eretica. Il componente in un solo file di Vue dice qualcosa di quietamente eretico: metti tutte e tre le cose insieme, in un unico file, per un singolo componente. La sua struttura, il suo comportamento e il suo aspetto, uno accanto all'altro, e circoscritti a quel solo pezzo. A prima vista sembra proprio mescolare ciò che andrebbe tenuto separato, il peccato di cui sopra. Ma sotto c'è un argomento profondo, che ribalta la vecchia regola invece di ignorarla.
Voglio darti l'argomento profondo, perché è il cuore della puntata. L'argomento è questo. La vecchia separazione divideva le cose per linguaggio: tutta la struttura qui, tutto lo stile là. Ma la cosa che in realtà cambia insieme non è il linguaggio: è il componente. Quando modifichi un pulsante, tocchi la sua ossatura, la sua logica e il suo stile tutti in una volta, insieme. E averli in tre file lontani è l'attrito vero: salti da un file all'altro per cambiare una cosa sola. La vera separazione delle preoccupazioni, dice Vue, non è separare i linguaggi: è separare i componenti. Metti insieme ciò che cambia insieme. E, badando bene, non è che questo file diventi un caos: le tre parti restano ben distinte dentro di esso, ognuna nella sua sezione. Vicine, sì, ma non mescolate. È la distanza tra i file a sparire, non l'ordine tra le tre cose.
Voglio darti l'immagine che rende chiara questa idea, perché è concreta. Pensa a come organizzi un laboratorio. Il vecchio modo ordina per tipo di attrezzo: tutti i martelli in una stanza, tutte le viti in un'altra, tutta la colla in una terza. Sembra ordinatissimo. Ma costruire una sola sedia ti costringe a correre tra le tre stanze, avanti e indietro, per prendere un martello, poi le viti, poi la colla. Il componente in un file ordina invece per progetto: tutto ciò che serve per quella sedia in un posto solo, il legno e le viti e la colla di quella sedia, insieme. L'ordine per categoria sembra ordinato; l'ordine per compito è ciò che davvero ti aiuta a lavorare.
Voglio insistere sulla parola preoccupazione, perché è lì il trucco. Tutto ruota attorno a cosa chiami preoccupazione, cosa consideri la cosa da tenere insieme. Se la tua preoccupazione è il linguaggio, separi per linguaggio, e sembri ordinato. Ma se la tua preoccupazione è, più onestamente, la funzionalità, il pezzo di interfaccia su cui lavori davvero, allora separi per quello, e tieni vicino ciò che tocchi insieme. Vue non ha abolito la separazione delle preoccupazioni: ha cambiato idea su cosa sia una preoccupazione. E questo sposta tutto: la stessa parola, letta in un modo diverso, porta a un'organizzazione del codice completamente diversa, e per molti molto più naturale.
Voglio trarre la lezione generale, perché è preziosa ovunque. La lezione è che tieni separate le preoccupazioni è un ottimo consiglio, che dipende però interamente da cosa chiami preoccupazione. Separare lungo l'asse sbagliato, il linguaggio, la categoria, sparpaglia le cose che usi insieme, e ti fa sembrare ordinato mentre ti rallenta. La vera abilità è trovare l'asse lungo cui le cose cambiano davvero insieme, e tenere vicine proprio quelle. Non tutto l'ordine aiuta: l'ordine sbagliato è un disordine ben vestito. Chiedersi cosa cambia insieme, qui, è più utile che chiedersi cosa appartiene alla stessa categoria.
Per oggi ci fermiamo qui. Abbiamo visto il componente in un file solo, e la presa di posizione che nasconde. La vecchia ortodossia teneva separati i tre linguaggi del web, struttura, stile e comportamento, ognuno in un file: separazione delle preoccupazioni. Vue mette tutte e tre le cose insieme, per un singolo componente. Sembra mescolare, ma l'argomento è profondo: ciò che cambia insieme non è il linguaggio, è il componente, e tenerlo sparpagliato in tre file è l'attrito vero. La vera separazione è per componenti, non per linguaggi: metti insieme ciò che cambia insieme. Come un laboratorio ordinato per progetto invece che per tipo di attrezzo. La lezione: tieni separate le preoccupazioni dipende da cosa chiami preoccupazione, e l'ordine sbagliato è disordine ben vestito. Nella prossima puntata vediamo il template, partire dall'HTML e arricchirlo. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.