Articolo originale: https://www.freecodecamp.org/news/import-javascript-and-css-from-a-public-cdn/

Quando scrivi un'applicazione in JavaScript semplice, non devi ospitare tutto il codice che usi sul tuo sito.

Le librerie JavaScript più popolari sono disponibili in una rete pubblica di distribuzione dei contenuti (CDN).

Ciò può semplificare la distribuzione dell'applicazione e mantenere aggiornate le dipendenze. In effetti, se hai seguito un tutorial JavaScript per una libreria, probabilmente hai già utilizzato una CDN pubblica ma senza saperlo.

Cos'è una CDN?

Una CDN è una rete di distribuzione di contenuti. Si tratta di servizi di file hosting per le più comuni librerie, anche per più versioni di esse. Di solito sono altamente performanti e offrono la localizzazione dei file memorizzati nella cache, quindi indipendentemente da dove si trovino, gli utenti ricevono i file da posizioni geografiche vicine a loro. Questo può rendere la tua applicazione più veloce rispetto al mantenere la libreria sul tuo sito.

Le CDN hanno anche il vantaggio che se stai utilizzando librerie comuni a più siti, i tuoi utenti potrebbero già avere il file memorizzato nella cache del loro browser. Questo velocizza il tuo sito perché il browser non ha bisogno di scaricare nuovamente la libreria.

Ad esempio, JQuery ha una CDN JQuery ufficiale. Se la maggior parte delle applicazioni JQuery importa la libreria JQuery da questa CDN, è più probabile che gli utenti abbiano già JQuery nella loro cache.

CDN fornito da npm

Non tutte le librerie hanno la propria CDN. La maggior parte di esse viene distribuita su npmjs.com e tocca al programmatore aggiungerla al proprio progetto tramite npm in fase di costruzione. npm scarica la libreria da una CDN e la aggiunge al progetto in locale.

Non è necessario utilizzare i processi di costruzione di npm e JavaScript per sfruttare l'ecosistema npm. Possiamo usare un 'CDN guidato da npm' come host per le librerie, senza dover usare npm.

Una "CDN basata su npm" è quella che ospita il codice di distribuzione per le librerie rese disponibili in npm.

Ad esempio, AG Grid che ho dimostrato nel mio articolo "Come convertire una tabella HTML statica in un componente Data Grid JavaScript dinamico" viene distribuito tramite npm ma non dispone di una propria CDN. Invece, i programmatori possono aggiungere un riferimento diretto ad AG Grid da una CDN come unpkg.com.

<script src=
"https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.nostyle.js">
</script>

Le CDN fornite da npm monitorano i rilasci distribuiti tramite npm e ospitano i rilasci sul proprio sito.

Nel codice sorgente del mio precedente post su freeCodeCamp, ho usato il CDN da unpkg.com per importare AG Grid nel mio codice usando un elemento script.

Come per tutto il codice che copiamo e incolliamo, vale la pena capire come funziona in modo da poter gestire eventuali problemi.

Quali CDN sono disponibili?

Ho sempre usato solo tre CDN:

Questi sono tutti siti professionali e ben gestiti. E il motivo principale per cui uso una fonte rispetto a un'altra è perché il tutorial che ho seguito per la prima volta per una libreria utilizzava quel particolare CDN nel codice.

Sapere che sono disponibili più CDN è utile perché:

  • una versione particolare di una libreria che desideri utilizzare potrebbe non essere presente su tutte le CDN
  • se una CDN inizia ad avere problemi, puoi modificare il tuo codice per utilizzarne un altra
  • alcune librerie potrebbero essere più popolari su una CDN rispetto a un'altra e potresti voler utilizzare la CDN più popolare per aumentare le possibilità che il codice della libreria JavaScript sia memorizzato nella cache del browser dei tuoi utenti.

Le CDN npm distribuiscono più di JavaScript

Le CDN offrono dell'altro oltre JavaScript. Ad esempio, AG Grid distribuisce file CSS oltre che JavaScript.

Di norma, questi vengono referenziati dalla CDN usando elementi link.

Ad esempio, AG Grid utilizza due fogli di stile.

Il foglio del Structural Style fornisce il CSS che sistemerà i dati come una griglia.

<link 
 rel="stylesheet"
 href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"
>

Il foglio del Theme Style fornisce l'estetica visiva per la griglia.

<link 
 rel="stylesheet" 
 href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"
>

Entrambi questi file CSS sono anche distribuiti su npmjs.com e possono essere inclusi nel nostro progetto tramite una CDN.

Come (e perché) controllare la versione della libreria

Nel mio strumento di modifica delle tabelle open source utilizzo tre librerie: AG Grid, PapaParse e Faker.

Faker ha ultimamente avuto un problema in cui una versione recente distribuita su npm presentava problemi. Quindi, se il mio codice fosse stato settato per impostazione predefinita sull'ultima versione, la mia applicazione si sarebbe bloccata.

Fortunatamente avevo importato una versione specifica di faker da unpkg. Come puoi vedere dall'URL in src di qui sotto, ho incluso la versione 5.5.3:

<script src=
    "https://unpkg.com/faker@5.5.3/dist/faker.min.js">
</script>

Ci sono numerosi vantaggi nel controllare la versione:

  • avrai testato la tua applicazione su una versione specifica. Se esegui la sua distribuzione in produzione e consenti alla versione di cambiare con ogni nuovo rilascio della libreria, l'applicazione potrebbe  nel tempo presentare gradualmente bug o incompatibilità perché non hai testato l'applicazione con la nuova versione della libreria.
  • quando si utilizzano più versioni di librerie, le versioni future potrebbero entrare in conflitto tra loro, causando nuovamente un errore dell'applicazione messa in produzione e senza che tu probabilmente te ne accorga.

Importo nelle versioni specifiche, le tre librerie che utilizzo :

<script src="https://unpkg.com/ag-grid-community@26.2.1/dist/ag-grid-community.min.js"></script>
<script src="https://unpkg.com/papaparse@5.3.0/papaparse.min.js"></script>
<script src="https://unpkg.com/faker@5.5.3/dist/faker.min.js"></script>

Questo mi dà il controllo del test e sono più sicuro che eventuali bug nell'applicazione saranno il risultato della mia codifica, piuttosto che un aggiornamento di una libreria utilizzata nel progetto.

Le varie CDN possono avere una sintassi diversa per il controllo dei numeri di versione. Ma potrai vedere il formato da utilizzare cercando la libreria sulla CDN e seguendo la documentazione fornita da ciascuna CDN.

Ecco gli elenchi di AG Grid su ciascuno dei siti CDN:

Se segui i link per i pacchetti AG Grid, vedrai che ogni sito ha un'interfaccia leggermente diversa. Ma tutti consentono di selezionare una versione specifica di AG Grid e ti consentono di copiare e incollare l'URL da aggiungere al tuo file HTML.

CDN in pratica

Di seguito è riportato un semplice file HTML che visualizzerà una griglia di dati sullo schermo.

Devo solo distribuire il file HTML, perché la libreria AG Grid viene caricata nel browser dalla CDN.

Nell'esempio seguente sto caricando la versione 26.2.1 di AG Grid e dei file CSS dal CDN unpkg.com .

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Esempio di AG GRID aggiunto CDN</title>
    <script src="https://unpkg.com/ag-grid-community@26.2.1/dist/ag-grid-community.min.nostyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@26.2.1/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community@26.2.1/dist/styles/ag-theme-alpine.css">
</head>
<body>

    <div id="myGrid" style="height: 200px; width:500px;" class="ag-theme-alpine"></div>

<script>
document.addEventListener('DOMContentLoaded', () => {

    const columnDefs = [
        { field: "cdn" },
        { field: "url" },
    ];

    const rowData = [
        { cdn: "jsDelivr", url: "https://www.jsdelivr.com"},
        { cdn: "Unpkg", url: "https://Unpkg.com" },
        { cdn: "cdnJS", url: "https://cdnjs.com" }
    ];


    const gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
        /* consentire il copia e incolla manuale */
        enableCellTextSelection:true,
        ensureDomOrder:true
    };


    const gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});
</script>
</body>
</html>

Le importazioni Unpkg sono dimostrate in questa pagina HTML distribuita.

cdns e i loro URL

Potrei facilmente usare altri CDN modificando gli elementi script e link nella sezione head del mio file html.

Con JSDelivr utilizzando la versione 26.2.1

Le importazioni di JSDelivr sono dimostrate in questa pagina HTML distribuita.

Con CdnJS utilizzando la versione 26.2.1. CdnJS adotta un approccio leggermente diverso circa la denominazione delle versioni, quindi vale la pena controllare il menu a tendina della versione nell'elenco della cdnJS AG Grid

Le importazioni CdnJS sono dimostrate in questa pagina HTML distribuita.

Non sempre dobbiamo contenere le librerie JavaScript nel nostro sito insieme ai nostri file HTML. Invece, possiamo includerli in modo tale che vengano scaricati da una rete di distribuzione di contenuti.

Molti tutorial che seguiamo mostreranno esempi di questa operazione.

Se importiamo elementi JavaScript o CSS da una CDN, dovremmo aggiungere il numero di versione della libreria che stiamo utilizzando per proteggere il nostro codice da problemi futuri se la libreria viene aggiornata.

Una buona abitudine da prendere è annotare la versione ogni volta che seguiamo un tutorial. Se notiamo che i file inclusi nella CDN non hanno una versione, vale la pena visitare la CDN per scoprire qual è la versione corrente della libreria. Quindi puoi aggiungere quel numero di versione al tuo file.

Sono piccoli accorgimenti come questo che renderanno un po' più professionali tutti i progetti del tuo portfolio che crei su Github.