React.js, perché è stata creata da Facebook?

Tempo di lettura: 4 minuti Skills Updated: librerie javascript Creata in casa Facebook e scelta per l’interfaccia Web di Instagram, React è libreria JavaScript che si presenta come la soluzione ottimale per gli sviluppatori frontend di app web e mobile. Cosa ha in più? Permette di costruire interfacce utente dinamiche, soggette sia all’interazione con l’utente che al cambiamento dei dati nel tempo, mantenendo facilità e modularità lato sviluppo. Insomma, non poco! Di fatto React è stata sviluppata per rendere più fluidi i processi di sviluppo, manutenzione e aggiornamento della UI con lo scopo di supportare i team di sviluppo che lavorano su progetti di media e grande complessità. Principali differenze con altre librerie affini A differenza di molte librerie, React usa un approccio differente dal classico MVC. In questo paradigma si può considerare React come la V(view) dell’MVC anche se, in realtà, in React non esistono i concetti di controller, direttiva, template, listener di eventi globali, etc. Rispetto alla “separazione dei compiti” React opta per una “separazione di interessi”. Ciò significa che React tende a raggruppare tutto il codice in base all’ambito di utilizzo piuttosto che estremizzare il paradigma di separazione del codice in base alla sua funzione (presentazione, logica, dati, etc). L’obiettivo di avere un codice distinto per compito è comunque raggiungibile adottando alcune best practices e pattern di sviluppo. Sempre in controtendenza, React evita l’uso di two-way data binding -flusso dati bidirezionale- e l’aggiornamento in cascata dell’albero del DOM, introducendo il concetto di “DOM Virtuale” che permette di migliorare notevolmente le prestazioni dell’applicativo nel processo di rendering. Architettura basata su componenti In React scriviamo applicazioni in termini di “Componenti”. E se un componente dovesse risultare troppo complesso, niente paura, lo spezziamo in componenti più piccoli, semplici e riutilizzabili! Un componente in React è l’unità fondamentale dell’applicazione e corrisponde ad un elemento custom del DOM. È responsabile di renderizzare il contenuto dell’elemento e di gestire gli eventi in esso presenti. Definisce quindi il DOM da generare per rappresentarlo in pagina (con l’uso opzionale di JSX) e il comportamento, ovvero come reagisce alle interazioni dell’utente o ai cambiamenti di stato dell’applicativo. Un componente può inoltre essere combinato con altri componenti. Può essere innestato all’interno di un altro componente o avere altri componenti figli al suo interno. Perchè usare React Ci sono diverse ragioni che motivano la scelta di React come libreria di sviluppo frontend. ● Facile integrazione Essendo una libreria e non un framework dedicato allo sviluppo di applicazioni web, è possibile integrare React anche su progetti esistenti per lo sviluppo di parti mirate. Il suo utilizzo è inoltre indipendente dallo stack tecnologico del progetto. ● Librerie e Community in crescita Offre moduli integrativi per la gestione del routing, dello stato dell’applicazione, per i test e una miriade di librerie pronte all’uso per far fronte ai problemi e alle esigenze più comuni. React vanta infatti una numerosa e attiva community di sviluppatori e annovera tra le aziende utilizzatrici nomi prestigiosi come AirBnB, Netflix, Paypal, Uber, Reddit, Asana, etc. ● Virtual DOM È un’astrazione in memoria dei componenti della UI. Offre una gestione efficiente dei cambiamenti nel DOM grazie alla renderizzazione selettiva di sottoalberi del DOM ad ogni cambiamento di stato. Per tale scopo utilizza un algoritmo che gli permette di individuare solo le parti che sono soggette a tale cambiamento. ● JSX È un markup opzionale simile all’HTML. Permette la descrizione dichiarativa dell’interfaccia combinando la facilità di scrittura delle viste con la potenza di JavaScript. Tale sintassi è destinata ad essere utilizzata dai transpiler (es. Babel) per trasformare il markup JSX (trovato nei file JavaScript) in oggetti JavaScript standard. A differenza del passato, invece di scrivere JavaScript in HTML, JSX ci permette di inserire HTML in JavaScript! ● Flusso unidirezionale dei dati (one-way data binding) Evita la complessità del two-way data binding definendo un flusso dei dati mono direzionale (padre-figlio) e una precisa gerarchia di comunicazione. ● Condivisione del codice tra client e server A differenza di altre librerie client-side, React è una libreria isomorfica. Tale proprietà permette di effettuare il render delle pagine anche lato server inviando così al browser l’HTML, che rappresenta lo stato iniziale dell’applicazione. Ciò garantisce versatilità ma al tempo stesso che l’applicativo sia SEO friendly. ● React Native Con React Native è possibile realizzare app native per sistemi Android e IOS e app desktop cross platform (con l’ausilio di Electron). Il vantaggio nell’uso di React è reso più evidente quando la complessità dell’applicazione cresce. Imparato una volta, lo si può utilizzare in molte tipologie di progetti, dallo sviluppo di web app a quello mobile e desktop. Infine, se integrato con uno Redux, può gestire uno store dati centralizzato e la scrittura di applicazioni che si comportano in modo coerente e facili da testare. Se ti ha incuriosito, ti aspettiamo ai 2 giorni di Workshop, teoria+pratica per imparare a usare React.