In questo articolo ti voglio raccontare come installare dipendenze nel progetto ReactJS che stiamo costruendo.

Se è la prima volta che vedi questa guida potresti voler iniziare da ReactJS: come creare una web app da zero.

Cosa sono le dependencies?

Le dependencies, o dipendenze, di un progetto sviluppato con Node si trovano all’interno del file package.json.

Le dipendenze sono delle librerie che vogliamo utilizzare all’interno del nostro progetto. Queste librerie possono esserci utili perché ben documentate e perché ci permettono di risparmiare molto lavoro essendo già pronte.

Le dipendenze vengono sviluppate da programmatori freelance, dipendenti ed aziende sia di piccole che di grandi dimensioni.

Come installare le dipendenze

Digitando solo npm install vengono installate tutte le dipendenze già presenti nel file package.json.

Per installare invece le dipendenze singolarmente puoi aprire il terminale, andare nella cartella del tuo progetto ed infine scrivere il seguente comando:

npm install <nome_dipendenza>

In questo modo la dipendenza installata verrà inserita nella cartella node_modules, ma non sarà riportata nel file package.json. Ciò vuol dire che chi utilizzerà il progetto che stai creando ed eseguirà il comando npm install non avrà un progetto del tutto funzionante e dovrà cercare quale sia il problema tra gli errori.

Per fare in modo di installare una dipendenza e riportarla automaticamente nel file package.json puoi lanciare il comando:

npm install --save <nome_dipendenza>

Per maggiori informazioni consulta la guida ufficiale: https://docs.npmjs.com/cli/install.

Installazione react-router-dom

Proviamo adesso ad installare la dipendenza per il routing di ReactJS già discusso in questo articolo. Inserisci nel terminale:

npm install --save react-router-dom

Vedrai diverse informazioni comparire nel terminale ed infine entrando nel file package.json troverai:

Dipendenze Node ^ (caret) e ~ (tilde)

Una volta eseguito il comando per installare react-router-dom (lo utilizzeremo nei prossimi articoli per gestire il routing dell’applicazione) osserva il file package.json e guarda le dependencies. Al momento troviamo già delle dipendenze che riguardano ReactJS e che erano automaticamente incluse con create-react-app.

Tra queste react-router-dom è quella appena inserita e come puoi vedere dall’immagine sopra riporta anche un caret ^ e un numero.

Il numero riportato indica la versione ed è diviso in:

1. Major – Per react-router-dom il valore è 4
2. Minor – Il valore è 2
3. Patch – Il valore è 2

L’utilizzo del caret ^ sta ad indicare che siamo disposti ad installare una qualsiasi versione che sia maggiore o uguale a 4.2.2 ma inferiore a 5.0.0. Il presupposto è che le versioni successive saranno solo addizionali ed integrative, ma esenti da errori che compromettano il funzionamento.

Nella realtà dei fatti capita di subire aggiornamenti di dipendenze che includono nuovi bug.

La tilde ~ invece è più specifica, nel caso di react-router-dom alla versione 4.2.2, la tilde (~4.2.2) ci darebbe la possibilità di installare tutte le versioni incluse nella minor della versione. In questo caso quindi da 4.2.2 compreso a 4.3.0 escluso.

Per maggiori informazioni su tutti i possibili simboli ed il funzionamento nel particolare consulta la guida ufficiale: https://docs.npmjs.com/misc/semver.

Elimina simboli dalle dipendenze

Per quanto l’utilizzo di questi simboli sia molto interessante e può rappresentare una grande comodità, il mio consiglio personale è quello di rimuovere questi simboli dalle dipendenze nella maggior parte dei casi e specialmente se non ci sono tests automatici sui componenti della UI.

La ragione che mi ha portato a questa considerazione sta nel fatto che chi installerà le dipendenze scaricandosi il progetto dopo di te potrebbe avere versioni diverse dalle tue ed inoltre chi eseguirà il comando npm update potrebbe anche lui avere dipendenze differenti dalle tue.

Se lavori in un’azienda dove non sei tu ad impostare quale comando deve eseguire il server sul quale fai il rilascio può capitare che venga impostato npm update tra i comandi. Questo potrebbe portare ad avere differenti versioni tra il tuo pc locale, quello del tuo collega e le versioni utilizzate dai server di sviluppo, test e produzione.

Inoltre capita purtroppo che una nuova patch o minor portino cambiamenti “distruttivi”, per quanto sia raro. Se il codice da rilasciare è pronto il giovedì e non ci sono update, nessuno poi vieta durante il rilascio in produzione di avere update il giorno dopo.

Si potrebbe ovviare al problema rilasciando bundle già pronti, ciò non toglie che non si è sicuri di avere tutti, all’interno del team, la stessa identica versione. Solitamente tutti i programmatori addetti ad un progetto dovrebbero lavorare con la stessa versione delle dipendenze così come con lo stesso ambiente sul quale gira il server.

Come aggiorno le dipendenze?

Prima o poi il tempo passa ed è importante avere sempre le dipendenze aggiornate. Una cosa che potresti fare in primis è valutare l’aggiornamento delle dipendenze quando realmente ne hai la necessità.

Potrebbe essere il caso di:

1. “Mi servirebbe che questa tabella si comportasse così, nella documentazione dice che si può fare, ma devo installare la versione nuova..”
2. “Graficamente questa tabella è rimasta indietro, al contrario la nuova versione utilizza le classi Bootstrap in maniera più consapevole..”

In questi casi è doveroso cambiare le dipendenze installando la nuova versione. Il consiglio che ti dò è di provare in locale che la nuova versione non crei problemi.

Se la nuova versione non crea problemi fai commit e push sul branch di sviluppo. La utilizzeranno anche i tuoi colleghi che potranno darti dei feedback. A quel punto la modifica arriverà nell’ambiente di test e dopo questo grande itinerario arriverà in produzione.

La consapevolezza di non avere cambiamenti che rompono l’applicazione può essere raggiunta tramite tanti tests ed integrando le novità con calma. Nella realtà dei fatti però non ci sono molte aziende in Italia che eseguono tests automatizzati sulla UI, quindi il mio consiglio è di valutare con calma l’aggiornamento delle dipendenze. Aggiungerei anche che non è assolutamente scontato il fatto che in vista di un nuovo aggiornamento il team abbia tempo da dedicare nel caso in cui i tests automatici falliscano.

Se vuoi imparare a fare tests sulla UI potrebbe interessarti questo articolo di TopTal.

Conclusioni

Hai imparato ad installare le dipendenze ed il significato del caret e dalla tilde. Ti ho riportato la documentazione necessaria per imparare tutti i possibili simboli e per studiarti il comando npm install.

Ti ho dato un consiglio valido nel caso in cui non stai sfruttando i tests sulla UI. In questo caso è importante stare ancora più attenti alle dipendenze.

Se vuoi continuare a seguire questa guida ti ricordo di non perdere di vista ReactJS: come creare una web app da zero. Inoltre se ti iscrivi alla newsletter non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy ? .

Per dubbi o domande scrivimi nei commenti ? .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Prossimo articolo della guida: ReactJS: creazione della prima pagina web