Se vogliamo includere jQuery all’interno del nostro sito web abbiamo due strade: o scarichiamo la libreria dal sito ufficiale e lo carichiamo all’interno del nostro spazio web oppure utilizziamo una delle diverse CDN che offrono la possibilità di richiamare jQuery da remoto.
Cos’è una CDN?
Una CDN (acronimo di Content Delivery Network) è una piattaforma di server distribuiti capillarmente sul pianeta, studiata al fine di facilitare l’accesso a contenuti statici: gli utenti che richiamano un dato contenuto, in pratica, potranno accedere alla copia ospitata dal server a loro più vicino, velocizzandone il download.
Quali sono le CDN che ospitano jQuery?
La libreria jQuery (come altre librerie Javascript) può beneficiare dell’ospitalità di diverse reti di distribuzione contenuti, pertanto gli sviluppatori hanno la possibilità di includere il framework semplicemente "linkando" una delle risorse hostate da una delle tante CDN disponibili.
Code.Jquery.com
E’ la CDN ufficiale di jQuery. Offre le ultime release delle versioni 1.x, 2.x e 3.x della liberia ma anche gli altri progetti sviluppati in seno alla community (jQuery Migrate, jQuery UI e jQuery Mobile).
Per maggiori info: https://code.jquery.com
Cdnjs.com
E’ una delle principali CDN per la distribuzione di librerie Javascript. Ospita tutte le versioni di jQuery e sfrutta la tecnologia di Cloudflare per le migliori performances.
Per maggiori info: https://cdnjs.com/libraries/jquery/
Google Hosted Libraries
E’ la CDN ufficiale di Google grazie alla quale gli sviluppatori di tutto il mondo possono usufruire delle più popolari librerie open-source senza doverle scaricare e caricare localmente all’interno dei propri hosting. Tra le tante librerie supportate, ovviamene, non poteva mancare jQuery, disponibile nelle ultime release delle versioni 1.x, 2.x e 3.x.
Per maggiori info: https://developers.google.com/speed/libraries#jquery
JSDelivr
JSDelivr è una CDN aperta a tutti senza vincoli di utilizzo o limiti di banda. Ospita le principali liberie open-source Javascript tra cui, ovviamente, jQuery. E’ possibile personalizzare quali componenti della libreria utilizzare attraverso una semplice interfaccia.
Per maggiori info: https://www.jsdelivr.com/package/npm/jquery
Come includere jQuery mediante una CDN?
Includere jQuery attraverso una CDN, all’interno del nostro progetto web è molto semplice. Basta utilizzare il tag <script> impostando nell’attributo src la URI della libreria ospitata all’interno della CDN prescelta.
Supponendo di aver scelto la CDN di Google e la versione 3.4.1 di jQuery, lo snippet di codice da inserire tra i tag <head> e </head> è il seguente:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Una volta inclusa la libreria, questa potrà essere utilizzata esattamente come se fosse stata caricata localmente. Dopo averla inclusa, quindi, potremo scrivere un codice come questo:
<script>
$(document).ready(function() {
// uso jQuery ...
});
</script>Conviene utilizzare jQuery localmente o mediante CDN?
A mio avviso l’utilizzo di una CDN è preferibile, in quanto si riduce il consumo di banda del nostro sito web e si aumenta il parallelismo, cioè il numero di connessioni simultanee che il browser effettua verso il nostro web-server: in pratica, utilizzando una CDN per jQuery, si libera uno slot di connessione che il browser può utilizzare per scaricare qualcos’altro dal nostro server (un’immagine, uno script, un foglio di stile, ecc.) velocizzando il completamento della pagina.
Utilizzando una CDN popolare (come quella di jQuery o quella di Google, ad esempio) si ha un ulteriore vantaggio: è probabile che gli utenti abbiano già visitato qualche sito che si collegava alla medesima risorsa quindi ci sono delle buone probabilità che l’utente l’abbia già nella cache del proprio browser. In questa circostanza il browser, quindi, effettuerà una chiamata HTTP in meno (la libreria è già memorizzata in cache) a tutto vantaggio della velocità di caricamento: un’altra buona notizia per chi desidera migliorare i tempi di accesso alle proprie pagine web!
Cosa succede se la CDN non è disponibile?
L’eventualità è sicuramente abbastanza remota, ma non impossibile, meglio quindi tutelarsi con un semplice script che preveda il caricamento di una copia "locale" nel caso in cui quella messa a disposizione dalla CDN prescelta non sia disponibile. Vediamo un esempio:
<-- Includo jQuery tramite CDN -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.x/jquery.min.js"></script>
<-- Prevedo un fallback locale -->
<script>
if (!window.jQuery) {
document.write('<scr'+'ipt src="/cartella/jquery.min.js"></scr'+'ipt>');
}
</script>In questo modo, la copia presente nella root del Web server verrà caricata soltanto se quella fornita da Google non sarà disponibile. Non dimenticate di passare allo script il corretto numero di versione del framework.
Non usare query-latest.js
Qualche anno fa il team di sviluppo di jQuery, tramite un’analisi delle statistiche di accesso alla propria rete, scoprì che buona parte delle chiamate dirette verso il loro CDN erano rivolte a carico dei file jquery-latest.js e jquery-latest.min.js.
E’ bene ricordare che questi file vengono forniti per consentire ai coders di operare rapidamente dei test di funzionamento e compatibilità con le ultime versioni rilasciate, non per l’adozione su applicazioni già online. E’ bene precisare che in linea generale l’utilizzo delle release latest non dovrebbe esporre un progetto in produzione a maggiori problematiche di sicurezza rispetto alle versioni che seguono la regolare sequenza di rilascio. Il problema è invece un altro, infatti, i file jquery-latest.js e jquery-latest.min.js subiscono degli aggiornamenti che prevedono la loro disattivazione e riattivazione in corrispondenza di ogni nuovo avvicendamento.
Per il completamento di tale procedura potrebbero essere necessarie anche alcune ore e, durante questo periodo di tempo un sito Internet che impiegasse tali risorse potrebbe dar luogo a malfunzionamenti anche rilevanti se non risultare del tutto inutilizzabile; si consideri inoltre che nel passaggio tra una versione più datata e la successiva potrebbero presentarsi delle incompatibilità in grado di generare i medesimi effetti.
Se quindi le release latest su CDN potranno essere tranquillamente impiegate da remoto in fase di sviluppo, per la fase di produzione si consiglia l’utilizzo di file associati a versioni specifiche; in alternativa jquery-latest.js e jquery-latest.min.js potranno essere scaricati per l’adozione in locale.
