Ciao, e benvenuto nella prima puntata della settantasettesima stagione. Per diverse stagioni abbiamo studiato il mondo del browser: gli stili, gli standard, il lavoro sul davanti delle pagine. Abbiamo imparato a scrivere per il browser. Questa stagione apriamo il motore che trasforma quello che scriviamo in quello che vediamo. Il titolo di oggi: la descrizione e il quadro.
Partiamo dalla magia, perché è davvero notevole. Tu scrivi una descrizione: un po' di struttura, qualche regola di stile. Non dici niente sui pixel, niente su dove disegnare o come. Dici un titolo, poi un paragrafo, blu, centrato. E appare un quadro: preciso, immediato, e vivo. Ridimensioni la finestra e si ridispone da solo; cambi una parola e tutto si assesta per farle posto; scorri, e tiene il passo. Sembra che il browser, semplicemente, disegni la tua pagina.
Ma non esiste nessun disegnare la pagina. Tra la tua descrizione e i pixel sullo schermo c'è una macchina lunga: una catena di trasformazioni, una catena di montaggio, che prende quello che vuoi e calcola, passo dopo passo, dove va ogni pixel e di che colore è. Il browser non disegna: calcola geometria e colore a partire dalle tue regole, e lo rifà in continuazione, più in fretta che può.
Fermiamoci sul perché è difficile, perché è il cuore di tutto. Una descrizione e un quadro sono mondi lontani. Tu hai detto centrato; i pixel hanno bisogno di una posizione esatta, in orizzontale e in verticale, per ogni singola lettera. Tu hai detto sotto il titolo; il motore deve sapere quanto è venuto alto il titolo, e questo dipende dal carattere, che dipende dalla larghezza, che dipende dalla finestra. Il dichiarativo è un desiderio; i pixel sono un impegno preciso. Tutto il motore esiste per attraversare quella distanza: per trasformare un desiderio in un quadro concreto ed esatto.
Ed ecco la metafora che ci accompagnerà tutta la stagione: il teatro. Pensa al motore come alla squadra che mette in scena uno spettacolo a partire da un copione. La tua struttura e il tuo stile sono il copione e le note del regista: chi sono gli attori, chi sta dentro chi, come ognuno deve apparire, più o meno dove va. Il motore è la squadra che trasforma quel copione in una scena vera. Legge il copione e compila l'elenco degli attori; il regista fissa l'aspetto definitivo di ciascuno; i macchinisti stabiliscono dove sta esattamente ognuno, data la grandezza del palco; i pittori dipingono le scenografie. E poi, la parte che tutti dimenticano: lo spettacolo va in scena dal vivo.
È la parte dal vivo a fare tutta la difficoltà. Un quadro lo dipingi una volta sola. Uno spettacolo lo devi tenere giusto in ogni istante in cui qualcosa cambia, e sul web qualcosa cambia decine di volte al secondo. Ridimensioni la finestra, e il palco si è appena ristretto: rimetti in posizione tutti. Cambi una riga, e la battuta di un attore si allunga: gli altri devono spostarsi? Il motore rimette in scena, all'istante, più e più volte. Non sta producendo un quadro: sta tenendo vivo un quadro contro un flusso continuo di cambiamenti, ognuno dei quali potrebbe propagarsi per tutto il palco.
E qui possiamo dire la tesi della stagione per intero. La magia dice: il browser disegna la tua pagina. La macchina risponde: non c'è nessun disegno, c'è una catena che ricalcola la tua pagina, da una descrizione fino ai pixel, un fotogramma alla volta, e l'unico motivo per cui sembra magia è che è abbastanza veloce da nascondere il ricalcolo. Una pagina non è un disegno: è il risultato di una catena di trasformazioni, da una descrizione a dei pixel.
E c'è il filo che tireremo tutta la stagione. Siccome è una catena, un cambiamento non costa sempre uguale. Certi cambiamenti costringono la squadra a rimettere in posizione tutto il palco; altri chiedono solo una ridipinta; altri ancora fanno solo scorrere un pezzo già pronto sulle sue rotelle. Ogni modifica che fai rientra nella catena a un certo punto, e quanto indietro rimanda la squadra è esattamente quello che costa. Impara dove cadono le tue modifiche nella catena, e hai capito le prestazioni del browser.
Voglio lasciarti con un cambio di sguardo. Smetti di vedere il browser come qualcosa che disegna la tua pagina e comincia a vederlo come una catena che trasforma una descrizione in pixel, più e più volte. Nel momento in cui vedi la catena, i misteri si sciolgono: perché certe modifiche di stile sono fluide e altre scattano, perché un ridimensionamento può arrancare, perché spostare un elemento in due modi che sembrano identici può costare in modo lontanissimo. Non devi costruire un motore di browser: ti basta smettere di farti sorprendere da uno, e sapere, quando cambi qualcosa, quanto indietro nella catena hai appena rimandato la squadra.
Per oggi ci fermiamo qui. Abbiamo visto la magia, scrivi una descrizione e appare un quadro vivo, e la macchina sotto: non un disegno, ma una catena di trasformazioni da una descrizione ai pixel. Abbiamo posato la metafora del teatro, il copione messo in scena e tenuto vivo dal vivo, e il filo della stagione: ogni modifica rientra nella catena a un punto diverso, e quel punto è il suo prezzo. Nella prossima puntata: dal testo all'albero. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.