Perché ReactJS è rivoluzionario e perché dovresti usarlo anche tu!

Web Development 1141 Leggi in circa 3 minuti

Se sei un avvezzo di Twitter e del Web Development, avrai sentito sicuramente parlare di ReactJS, uno dei progetti resi open source recentemente dal team di Facebook.

ReactJS è una libreria per la gestione delle view per JavaScript sviluppata in JavaScript, che introduce alcuni approcci innovativi al concetto di view.

Ma perchè abbandonare i metodi e le librerie che hai sempre usato sino ad ora per usare ReactJS? Eccone alcuni:

Virtual DOM

Una delle problematiche che spesso affligge gli sviluppatori web sono le performance.

A causa della natura dei browser, che eseguono le logiche JavaScript nello stesso thread dove eseguono il rendering della pagina, le performance della tua applicazione web possono ridursi drasticamente sui dispositivi che hanno a disposizione poca capacità di calcolo o poca memoria.

Il problema non è dovuto alla lentezza di JavaScript, ma solitamente alla lentezza delle chiamate alla manipolazione degli elementi del DOM della pagina, i quali sono lenti e risultano bloccanti nell'esecuzione del codice.

Tali performance dovute al DOM possono essere ottimizzate! ReactJS mantiene in memoria una copia virtuale del DOM, chiamata appunto Virtual DOM, e ogni qualvolta viene applicata una modifica alla pagina, invece di applicare direttamente le modifiche al DOM, ReactJS modifica il DOM virtuale e calcola il set minimo di modifiche da applicare sul DOM reale, riducendo quindi l'impatto sulle performance.

Declarative

L'approccio classico allo sviluppo web è solitamente legato al concetto di evento e relativo callback. Tale logica risulta semplice per applicazioni di piccolo genere, ma man mano che la tua applicazione cresce organicamente, il codice diventa sempre più incomprensibile e difficile da leggere anche a causa della dispersione delle sue logiche di funzionamento.

L'approccio di ReactJS è totalmente diverso; quando sviluppi una view in ReactJS definisci come questa si comporterà in ogni momento della sua vita in base al suo stato, e questo risulta molto più comprensibile sul lungo termine.

Componenti riutilizzabili e componibili

Hai mai pensato di utilizzare le tue views come se fossero dei mattoncini lego? Beh, dovresti farci un pensiero.

Invece di pensare alle tue views come a blocchi monolitici pieni di copia e incolla o di inclusione di file, ReactJS permette di suddividere le tue views in componenti, destinando a loro la minima unità funzionale. Tali componenti accettano delle proprietà in parametro, quindi è facile immaginarsi dei piccoli componenti che mostrano il box dei dettagli dell'utente, che mostrano un commento o un form per inserirne uno nuovo.

E che ci faccio con questi piccoli e stupidi componenti? Li componi per crearne altri! Ed ecco che un insieme di commenti diventa un box di commenti, un box di commenti con un form diventa un modulo dei commenti, e un modulo dei commenti con un box utente e del testo diventa un box completo di una news!

Inutile evidenziare che le composizioni diventano pressocchè infinite, ma soprattutto dopo aver definito un set di base di componenti si arriva al punto in cui lo sviluppo dell'app si riduce al riutilizzo di componenti già definiti, configurati con set di parametri differenti.

Non solo per il browser, il DOM è un dettaglio d'implementazione!

Questa logica a componenti finisce per rendere il DOM del browser un mero dettaglio di implementazione. Il progetto React-Native, rilasciato in OpenSource su Github da Facebook stesso, è un esatto esempio di come ReactJS si propone per lo sviluppo per dispositivi mobile.

Grazie a React-Native puoi scrivere componenti che hanno la medesima logica di quelli che utilizzi nel browser, ma che vengano renderizzati in elementi nativi dell'OS del dispositivo mobile invece degli elementi HTML del DOM.

In questo modo l'approccio diventa multipiattaforma e learn once, deploy everywhere! permettendoti quindi di estendere la tua web app a nuovi orizzonti su nuove piattaforme!

E quindi che aspetti? Prova l'introduzione di ReactJS e cambia il tuo modo di programmare!