Il problema delle interfacce dinamiche
Nel 2013 le applicazioni web sono sempre più dinamiche: feed che si aggiornano in tempo reale, interfacce che reagiscono a ogni interazione, dati che cambiano continuamente. I framework esistenti — Backbone.js, Ember.js, le prime versioni di AngularJS — gestiscono gli aggiornamenti del DOM attraverso binding bidirezionali o manipolazione manuale. Al crescere della complessità, tracciare quali parti dell’interfaccia devono aggiornarsi quando cambiano i dati diventa una fonte costante di bug e problemi di prestazioni.
Jordan Walke, ingegnere di Facebook, affronta il problema con un approccio radicalmente diverso: anziché aggiornare chirurgicamente il DOM, si ridisegna l’intera interfaccia ad ogni cambio di stato e si lascia alla libreria il compito di calcolare le differenze.
Virtual DOM e rendering dichiarativo
React introduce il concetto di Virtual DOM: una rappresentazione in memoria della struttura dell’interfaccia, leggera e veloce da manipolare. Quando lo stato di un componente cambia, React ricostruisce il Virtual DOM, lo confronta con la versione precedente attraverso un algoritmo di diffing e applica al DOM reale solo le modifiche minime necessarie.
Il rendering diventa dichiarativo: lo sviluppatore descrive come l’interfaccia deve apparire per un dato stato, senza specificare quali operazioni eseguire per passare da uno stato all’altro. React si occupa della transizione. Questo elimina un’intera categoria di bug legati alla sincronizzazione tra dati e interfaccia.
Componenti e flusso unidirezionale
In React ogni parte dell’interfaccia è un componente: un’unità autonoma che riceve dati in ingresso (props) e restituisce la descrizione di ciò che deve essere visualizzato. I componenti si compongono: un componente può contenerne altri, formando un albero gerarchico che rispecchia la struttura dell’interfaccia.
Il flusso dei dati è unidirezionale: i dati scendono dall’alto verso il basso attraverso le props, e gli eventi risalgono verso l’alto attraverso callback. Questo modello rende prevedibile il comportamento dell’applicazione: dato uno stato, l’interfaccia è determinata. Non ci sono cicli di aggiornamento nascosti, non ci sono effetti collaterali impliciti.
JSX è la sintassi che permette di scrivere la struttura dei componenti con una notazione simile all’HTML direttamente nel codice JavaScript. JSX viene trasformato in chiamate a funzioni JavaScript durante la compilazione — non è un template engine, ma un’estensione sintattica.
Una libreria, non un framework
React è deliberatamente limitato alla view layer: non include routing, gestione dello stato globale, chiamate HTTP o altre funzionalità che i framework completi forniscono. Questa scelta progettuale permette di integrare React in applicazioni esistenti in modo incrementale e di scegliere liberamente gli strumenti complementari. Per i team che costruiscono interfacce utente complesse e dinamiche, React offre un modello mentale chiaro e un meccanismo di aggiornamento efficiente.
Link: reactjs.org