Abbiamo analizzato la centralità del DOM quale strumento con cui rendere interattive le pagine HTML e le problematiche derivanti dal suo impiego diretto nello sviluppo di applicazioni. In questa lezione esaminiamo come il Virtual DOM, introdotto da React, consente di superare questi ostacoli.
Separazione di logica e modello dati
Utilizzando React non è necessario ricorrere alle funzionalità del DOM per modificare gli elementi della pagina: è sufficiente cambiare le informazioni contenute all'interno dell'oggetto che rappresenta il modello dei dati, rappresentato dallo stato (state) in React, per ottenere l'aggiornamento automatico dell'interfaccia utente.
Quasi tutti framework e le librerie JavaScript che gestiscono viste lato client (AngularJS, React, Knockout, Ember, ...) sono in grado di supportare questo paradigma, provvedendo ad aggiornare la pagina con diversi metodi; ad esempio, Knockout offre metodi che consentono di rendere oggetti "osservabili" per aggiornare l'interfaccia a seguito di cambiamenti nel valore degli stessi, mentre AngularJS tiene sott'occhio i valori delle espressioni su cui si basa la visualizzazione provvedendo ad aggiornare quest'ultima quando i valori cambiano e tornano stabili. In breve, questi framework sfruttano appieno il cosiddetto "data binding", ovvero l'associazione degli elementi visuali ai dati da mostrare, delegando al framework il compito di aggiornare i primi a fronte del cambiamento dei secondi.
Come fa invece React a determinare su quali elementi della pagina deve agire e quali sono i cambiamenti da apportare?
Introduzione al Virtual DOM
React utilizza un sistema differente dagli altri per tracciare le modifiche, ricorrendo al cosiddetto Virtual DOM, ossia a una rappresentazione virtuale della struttura della pagina immagazzinata in memoria e del tutto simile al DOM originale, del quale può essere vista come una astrazione.
Nel momento in cui si verifica un evento ed è necessario "reagire" ad esso modificando gli elementi della pagina, React applica prima tali interventi al Virtual DOM.
Attraverso l'analisi delle differenze tra lo stato del Virtual DOM precedente al verificarsi dell'evento e quello nuovo ottenuto dall'applicazione delle modifiche, React determina i cambiamenti effettivi da apportare al DOM vero e proprio.
Il calcolo delle differenze tra i due stati del DOM virtuale è estremamente veloce, e grazie a esso si limitano al minimo indispensabile gli interventi sul DOM reale, tendenzialmente più lento, garantendo quindi ottime performance.
I vantaggi del Virtual DOM
Nell'esempio del "LikeButton" che abbiamo creato nelle precedenti lezioni non abbiamo fatto altro che sfruttare le funzioni che consentono di creare elementi di nostra invenzione all'interno del Virtual DOM: non a caso, l'oggetto che abbiamo utilizzato si chiama ReactDOM.
Nel Virtual DOM trovano posto sia componenti complessi sia oggetti corrispondenti (cioè "renderizzati come") gli elementi classici dello standard HTML, come un semplice <div>.
Una volta definita la logica del componente e la sua collocazione all'interno dell'interfaccia utente, la gestione del Virtual DOM e delle sue trasformazioni è completamente a carico di React: allo sviluppatore questo processo rimane del tutto trasparente e non è richiesto l'utilizzo di API per la sua manipolazione, come avviene nell'uso diretto del DOM reale, che a maggior ragione non va utilizzato.
L'astrazione rappresentata dal Virtual DOM permette inoltre di avvantaggiarsi di un "lingua franca" indipendente dal browser sottostante, nel quale è possibile esprimere caratteristiche del componente legate al suo aspetto e comportamento a prescindere dal browser in cui verrà ospitata l'applicazione, lasciando a React il compito di tradurre le intenzioni dello sviluppatore nelle chiamate alle funzioni JavaScript – sia quelle globali che quelle del DOM – a seconda della loro effettiva disponibilità (feature detection) all'interno del browser in uso dall'utente.
Infine, esistono anche implementazioni lato server del Virtual DOM di React che, utilizzando le stesse funzioni e scrivendo quindi codice del tutto analogo alla versione client, consentono di restituire pagine HTML generate direttamente dal server.
Per concludere, il Virtual DOM riveste quindi una fondamentale importanza nel funzionamento di React e torneremo ad analizzarne nuovi aspetti nelle prossime lezioni che affronteremo.