Una volta esaminata la struttura basilare di un componente React, dovrebbero essere chiare le componenti che entrano in gioco quando ne creiamo uno. Fondamentalmente le funzioni principali dell'oggetto che lo implementa, il loro scopo e il ruolo che giocano nel processo che, come risultato finale, genera l'interfaccia utente.
Oltre a ciò, osservato il comportamento degli eventi, sarà altrettanto chiaro come l'interfaccia viene modificata a fronte di azioni eseguite dall'utente. A questo punto esaminiamo in modo più approfondito le dinamiche di questo processo.
Il DOM
Il DOM (Document Object Model) è la struttura dati che si trova nella memoria del browser, esposta tramite l'oggetto window.document, che contiene una gerarchia di oggetti ciascuno dei quali rappresenta un elemento della pagina HTML caricata.
Gli oggetti appartengono a diversi prototipi, ovvero espongono proprietà e metodi differenti in base all'elemento della pagina che rappresentano. All'interno di un generico script (un brano di codice JavaScript), è possibile usare le funzioni del DOM per cercare questi oggetti e ispezionare i valori delle proprietà; modificando tali valori o chiamando specifici metodi, è possibile alterare l'aspetto o il comportamento dell'elemento.
La pagina caricata dal browser sarebbe statica e immutabile se non ci fosse la possibilità di aggiungere degli script e utilizzare i membri dell'oggetto document all'interno del codice per esplorare gli elementi della pagina, modificarne gli attributi, oppure rimuovere o creare nuovi elementi, per dirlo in modo più generico "manipolando" il DOM.
Per un approfondimento del DOM e delle funzionalità che mette a disposizione, suggerisco di leggere la guida di HTML.it.
L'utilizzo diretto ed esclusivo del DOM per modificare dinamicamente la pagina Web potrebbe risultare tedioso quando l'interfaccia utente e la logica che la governa iniziano a diventare corposi. Ecco che ci vengono in aiuto quindi librerie di supporto, come JQuery ad esempio, che abbiamo già comparato a React nelle prime lezioni e che fornisce senz'altro un aiuto apprezzabile nella scrittura di codice che manipola il DOM.
È bene quindi sapere che, qualunque sia il framework JavaScript che utilizzate per il governo della vostra interfaccia utente, esso avrà sempre e comunque a che fare in ultima istanza con il DOM per la manipolazione della pagina.
Gli svantaggi del DOM per le Single Page Application
L'approccio che prevede la creazione vera e propria dell'interfaccia direttamente sul client dell'utente, e specificatamente all'interno del browser, è un pilastro fondamentale delle cosiddette SPA (Single Page Application), generalmente costituite da una pagina HTML unica e statica che funge da "scheletro" e da contenitore nel quale, grazie al DOM, viene generata l'interfaccia utente dell'applicazione, sottraendo al server la responsabilità di dover assemblare queste viste, risparmiando così risorse preziose (CPU e memoria) e aumentando la scalabilità del sistema.
Le SPA sono in costante evoluzione e l'esigenza di sviluppare applicazioni sempre più complesse ha reso imprescindibile l'adozione di framework capaci di astrarre il DOM e ridurre sensibilmente la quantità di codice che dobbiamo scrivere per gestire i cambiamenti della pagina HTML.
Il markup HTML diventa l'espressione di un template che il framework di turno utilizza per determinare l'aspetto finale della pagina interagendo con il DOM e nascondendolo dal controllo diretto dello sviluppatore.
A prima vista si potrebbe pensare che questa sovrastruttura, benché efficace per semplificare lo sviluppo, influisca negativamente sulle prestazioni dell'applicazione, rendendo più lento il rendering dell'interfaccia utente. Ebbene, va detto innanzitutto che i vantaggi derivanti dall'astrazione portata da un framework di alto livello renderebbe trascurabile il suo "overhead"; in secondo luogo, è proprio l'uso delle funzioni del DOM a costituire la parte più lenta del processo, rappresentando un classico "collo di bottiglia".
L'utilizzo diretto del DOM presenta ulteriori problematiche:
- non è possibile modificarne il codice, poiché si tratta di una "scatola chiusa", di una implementazione fornita di serie dal browser nel quale carichiamo la pagina Web;
- non è possibile ottimizzarlo o specializzarlo, proprio perché non ne possediamo il sorgente, quindi le prestazioni che dobbiamo accettare sono quelle imposte dal browser di turno;
- impone uno stile di programmazione "imperativo", basato sulla chiamata dei metodi che gli oggetti del DOM forniscono, e questo conduce spesso alla scrittura di molto codice, più difficile da manutenere rispetto a quello ottenuto con l'uso di “pattern” (ad esempio, MVVM).
React fornisce una soluzione a tutti questi problemi grazie al Virtual DOM, che approfondiremo nella prossima lezione.