Ciao, e benvenuto nella seconda puntata della quarantanovesima stagione. Oggi entriamo nel cuore pulsante di Vue, l'idea che più di ogni altra lo definisce, quella per cui è nato ed è amato. Si chiama reattività, ed è la risposta a uno dei dolori più antichi di chi costruisce interfacce. Oggi capiamo la reattività: l'interfaccia che si tiene aggiornata da sola.
Partiamo dal dolore, perché la soluzione si capisce solo conoscendolo. Il dolore più antico nel costruire interfacce è tenere ciò che è sullo schermo in accordo con i dati sotto. Il dato cambia, un numero, un nome, un elenco, e tu devi ricordarti di aggiornare ogni singolo punto dello schermo che mostrava quel dato. Ne dimentichi uno, e lo schermo mente: mostra un numero vecchio accanto a uno nuovo. Tradizionalmente lo facevi a mano: cambio il dato, poi vado a cercare e aggiornare ogni punto. Noioso, e sorgente di bug senza fine.
Voglio darti la mossa di Vue, perché rende tutto automatico. La reattività rende questo automatico. Tu dichiari i tuoi dati, e dichiari una volta come lo schermo dipende da essi, e da quel momento Vue sorveglia. Quando un dato cambia, tutto ciò che dipendeva da quel dato si aggiorna da solo, e solo ciò che ne dipendeva, non il resto. Non dici mai allo schermo di aggiornarsi: cambi il dato, e lo schermo segue. Il framework tiene traccia, in modo invisibile, di chi dipende da cosa, e mantiene vera l'intera ragnatela di dipendenze, momento per momento.
Voglio darti il cambio di mentalità, perché è più profondo di quanto sembri. Il cambio è questo. Prima scrivevi istruzioni del tipo: quando questo cambia, vai ad aggiornare quello. Il come. Descrivevi i passi da fare a ogni cambiamento. Con la reattività scrivi invece: quello riflette sempre questo. Il cosa. Dichiari una relazione, una volta sola, e la reattività la mantiene vera per sempre. Non è più un elenco di azioni da rieseguire ogni volta che il mondo cambia: è la descrizione di un legame che resta vero da solo. Smetti di inseguire, e cominci a dichiarare.
Voglio darti l'immagine che rende chiara questa idea, perché la conosci benissimo. Pensa a un foglio di calcolo. Metti una formula in una cella: questa cella è la somma di quelle. E da quel momento non la ricalcoli mai più a mano. Cambia uno qualsiasi dei valori di partenza, e il totale si aggiorna da solo, all'istante. E si aggiorna anche tutto ciò che a valle dipendeva da quel totale, a cascata, perché il foglio tiene traccia delle dipendenze per te. Tu hai dichiarato la relazione una volta, la formula, e il foglio la mantiene vera per sempre. La reattività porta quella magia del foglio di calcolo all'intera interfaccia: la stessa idea che rende un foglio elettronico così potente, applicata a ogni scritta, ogni elenco, ogni pulsante di una pagina.
Voglio farti vedere l'interfaccia come un foglio di calcolo, perché è esattamente così. È il modo giusto di vederla: il tuo schermo è una ragnatela di celle che si ricalcolano da sole quando i loro ingredienti cambiano. Questa scritta dipende da quel nome? Allora quando il nome cambia, la scritta si riscrive da sola. Questo elenco dipende da quei dati? Quando i dati cambiano, l'elenco si ridisegna. Tu non tocchi mai lo schermo direttamente: descrivi come ogni pezzo dipende dai dati, e la reattività fa scorrere i cambiamenti lungo tutte le dipendenze, tenendo tutto vero.
Voglio trarre la lezione generale, perché va molto oltre Vue. La lezione è che c'è una differenza profonda tra fare una cosa e dichiarare una relazione che resta vera. La prima devi ripeterla ogni volta che il mondo cambia; la seconda la enunci una volta e lasci che la macchina la mantenga. Automatizzare il tienilo in accordo, il tienilo sincronizzato, è uno dei grandi risparmi di fatica che esistano, nelle interfacce e ben oltre. Ovunque tu ti ritrovi ad aggiornare a mano una cosa perché un'altra è cambiata, c'è, nascosta lì, una relazione che potresti dichiarare una volta e dimenticare.
Per oggi ci fermiamo qui. Abbiamo toccato il cuore di Vue: la reattività. Il dolore più antico delle interfacce è tenere lo schermo in accordo coi dati sotto, e a mano è noioso e pieno di bug. Vue lo rende automatico: dichiari i dati e come lo schermo dipende da essi, e da lì tutto ciò che dipende da un dato si aggiorna da solo quando quel dato cambia, e solo quello. Non insegui più lo schermo: cambi il dato, e lo schermo segue. Il cambio di mentalità: da fare i passi a ogni cambiamento, a dichiarare una relazione che resta vera per sempre. Come un foglio di calcolo, dove cambi un valore e i totali si ricalcolano a cascata da soli. La lezione: dichiarare una relazione, invece di ripetere un'azione, è uno dei grandi risparmi di fatica che esistano. Nella prossima puntata vediamo la gradualità: un po' o del tutto. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.