React: 2. Nascita e caratteristiche

Introduzione

Adesso che abbiamo deciso il nostro MVP e scritto un documento di specifiche tecniche, è il momento di capire quali siano le migliori tecnologie da utilizzare per il nostro progetto.
In questi articoli tratteremo in particolare, dello sviluppo tramite React, quindi, cercheremo di capire se React possa essere utilizzato per il nostro progetto. Pertanto la prima cosa che analizzeremo saranno le caratteristiche base di React per valutarne pro e contro e la sua nascita.

Cosa è React e perché è nato

React è un framewok di Javascript open source per lo sviluppo frontend. Stiamo parlando di una libreria Javascript che facilita lo sviluppo del frontend di una web app, cioè della parte che l’utente vede nel proprio browser.

La prima versione di React è stata rilasciata nel 2013 da Facebook, che ha creato una vera e propria organizzazione intorno a React. L’attuale web app di Facebook, infatti, è stata sviluppata in React.

Lo scopo dello sviluppo di questo nuovo framework era principalmente quello di creare un linguaggio che permettesse in modo “semplice”, di creare web app veloci, scalabili. Altra caratteristica ricercata con React, era la possibilità di sviluppare il frontend, tramite HTML, CSS e Javascript.

Il funzionamento di React

Le web app sviluppate ad esempio tramite PHP, quindi che non usano framework Javascript, funzionano nel seguente modo.
L’utente clicca su un bottone del sito, quel bottone esegue una richiesta al server, cioè al computer che ospita il sito, e il server esegue l’operazione richiesta, se occorre, interrogando il database MySQL.
È chiaro come, pertanto, il peso di calcolo gravi per la maggior parte sul server e sul database, il quale deve risolvere le query che gli vengono inviate dal server.

React invece, come i framework Javascript di seconda generazione in particolare, lavora in modo opposto. Il peso di calcolo è sbilanciato lato client, cioè verso il browser dell’utente. Al server e magari anche al database, è demandato meno lavoro possibile. Questo è oggi possibile perché i browser hanno aumentato la loro capacità di calcolo.

L’effetto più importante di questo cambio di paradigma, è l’aumento della scalabilità della web app. Ciò è possibile perché con React, un server con le stesse capacità di calcolo, può gestire molte più richieste rispetto a web app che non usano framework Javascript di seconda generazione, proprio perché il peso di calcolo viene spostato sul browser dell’utente.

I vantaggi principali di React

Il primo vantaggio è quello che abbiamo visto come sua caratteristica principale, ovvero, l‘aumento della scalabilità del progetto, demandando gran parte del lavoro di calcolo lato client, cioè sul browser dell’utente.

Per evitare che il browser venga troppo appesantito, e per incrementare le performance di velocità della web app, React prevede anche una struttura a “component”.
Gli elementi che vediamo nella pagina a frontend, è in realtà composta da component, cioè da parti di codice che insieme compongono la pagina. Ogni qualvolta vi sia la necessità di aggiornare le informazioni riguardanti un determinato component, la web app ricaricherà solo quel determinato component e non tutta la pagina. Ciò, come è facile prevedere, migliora sensibilmente le prestazioni di velocità della web app nel suo complesso.

Si pensi ad esempio ad una web app che mostra in una determinata pagina, le informazioni riguardati un cliente, come ad esempio l’età e la professione, e anche una lista dei prodotti a lui venduti in passato.
Nel momento in cui aggiorneremo il dato della professione del cliente, verrà renderizzato solo il component che mostra i dati del cliente e non anche la lista dei prodotti.

Gli svantaggi principali di React

Il primo svantaggio è la ripida curva di apprendimento di React soprattutto nella prima fase. React, infatti, ha una gestione delle informazioni che viene fatta tramite il cosiddetto “stato”. Lo “stato” è una metodologia complessa di gestione delle informazioni che vengono passate da un component all’altro.

Altro svantaggio è il costo elevato di sviluppo, ma questo vale un po’ per tutti i framework di sviluppo di web app.
Di base è sempre bene tenere a mente che se si può evitare di sviluppare una web app da zero è sempre meglio. Se cioè possiamo utilizzare per il nostro progetto un CMS come ad esempio WordPress, il costo sarà senz’altro più basso.
Ovviamente con ReacJs possiamo arrivare dove i CMS non arrivano, ma ovviamente il costo di sviluppo sarà più alto. Con React infatti, lo sviluppo è molto più complesso e i tempi di sviluppo si allungano sensibilmente.