In questo contesto siamo giunti alla scelta di un framework di sviluppo come Laravel utilizzando librerie frontend di tipo React JavaScript.
Illustriamo quindi alcuni aspetti di questa libreria front-end, in quanto la riteniamo estremamente interessante da affrontare.
Creata da Facebook e scelta per l’interfaccia Web di Instagram, React è una libreria JavaScript che permette di costruire interfacce utente dinamiche per l’interazione con l’utente e nella gestione dei dati, mantenendo modulabilità nello sviluppo così da rendere più fluidi i processi, la manutenzione e l’aggiornamento della UI.
La differenza con le altre librerie front-end nel paradigma MVC è che anche se si può considerare React come la view, in realtà qui non esistono i concetti di controller, direttiva, template, listener di eventi globali, ecc., in quanto tende a raggruppare tutto il codice in base all’ambito di utilizzo piuttosto che separare il codice in base alla sua funzione (presentazione, logica, dati, etc) evitando l’uso del two-way data binding – flusso dati bidirezionale – e l’aggiornamento in cascata dell’albero del DOM. Introduce infatti il concetto di “DOM Virtuale” per un notevole miglioramento delle prestazioni dell’applicazione.
Si scrivono così applicazioni in termini di componenti. Se un componente dovesse risultare troppo complesso, sarà separato in componenti più semplici e riutilizzabili.
Il componente corrisponde così ad un elemento custom del DOM, responsabile del rendering e di gestirne gli eventi, definendo il DOM da generare per rappresentarlo nella pagina ed il suo comportamento all’interazione con l’utente od al cambio di stato dell’applicazione.
I componenti sono quindi combinati tra loro.
I principali motivi per cui è conveniente utilizzarla, sono riassumibili nei seguenti punti:
● 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 ed un elevato numero di librerie annoverando 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 per trasformare il markup JSX in oggetti JavaScript standard.
Invece di scrivere JavaScript in HTML, JSX 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, per un risultato versatile ed al tempo stesso SEO friendly.● React Native
Con React Native è possibile realizzare app native per sistemi Android e IOS.
