Una Content Delivery Network (in breve CDN), è una rete distribuita per la distribuzione di contenuti al grande pubblico. Vediamo come è perché utilizzare Google come CDN per il caricamento dei più diffusi framework javascript nelle nostre applicazioni web.
Spesso capita di dover utilizzare un framework javascript per aggiungere funzionalità 2.0 al proprio sito, in tale contesto su siti sviluppati ad hoc è prassi comune includere i files javascript contenenti le librerie direttamente nel proprio dominio.
Questa procedura può e dovrebbe essere evitata andando ad utilizzare le versioni di tali librerie messe a disposizione da Google nella propria rete di distribuzione. Utilizzare tale approccio ha innumerevoli vantaggi tra i quali
- La rete di Google è distribuita e replicata attraverso innumerevoli host dislocati in tutto il mondo, nel risolvere l’hostname i dns di Google reindirizzeranno la richiesta al server geograficamente più vicino alla locazione del utente che fa richiesta della risorsa, garantendo tempi di download e di latenza migliori rispetto al vostro webserver.
- Più siti utilizzano questa tecnica (e ci sono già innumerevoli siti e portali che lo fanno, incluse le principali piattaforme di blogging), maggiore è la probabilità che la stessa richiesta che il browser dell’utente effettua sia già stata eseguita in precedenza. Dal momento che Google indica al browser di mantenere i file scaricati in cache per un anno, nella stragrande maggioranza dei casi il download del file richiesto non sarà neppure necessario, trovandosi esso in cache.
- Gli aggiornamenti dei framework sono gestiti da Google che mette a disposizione le ultime release stabili delle librerie disponibili.
- Con alcuni contratti di hosting la banda può essere una risorsa preziosa, in questo modo si svincola il proprio server dal dover inviare i files javascript portando ad un risparmio di banda notevole. Ad esempio, la versione attualmente disponibile di prototype pesa 143KB, mentre la versione compressa di jQuery pesa 56KB. Moltiplicate per il numero di utenti ed la banda impiegata cresce a dismisura.
Come utilizzare Google CDN
Ci sono due modalità d’uso per caricare le librerie dal CDN di google. La prima modalità è quella di utilizzare il loader javascript messo a disposizione da Google nella libreria Google Ajax API. Per usare questa modalità è sufficiente includere un singolo file javascript nel proprio sorgente che carica questa libreria con il seguente tag
<script src="http://www.google.com/jsapi"></script>
Una volta incluso tale file si ha a disposizione il loader di Google richiamabile attraverso il metodo google.load() indicando come primo argomento il nome della libreria da caricare e come secondo argomento la versione richiesta.
Per quanto riguarda il numero di versione è possibile indicare un numero completo di versione (e quindi specificare la release precisa) oppure specificare un numero parziale, in tal caso sarà restituita la sottoversione più recente di tale ramo di sviluppo. Ad esempio se di un’ipotetica libreria fossero disponibili le versioni 1.8.2, 1.8.4 ed 1.9.1, si avrà la seguente corrispondenza tra parametro e versione effettivamente caricata
- 1.8.2 => 1.8.2
- 1.8 => 1.8.4
- 1 => 1.9.1
È disponibile anche un terzo argomento con il quale si possono passare parametri aggiuntivi opzionali, ad esempio se caricare o meno la versione compressa del file javascript. La documentazione completa del metodo load si trova in questa pagina. Un esempio di utilizzo del loader è il seguente, dopo aver incluso il file javascript principale si può inserire nell’head del documento il seguente codice:
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function () {$("#title").effect("pulsate");});
</script>
...
<h1 id="title">Example Title</h1>
Utilizzare il loader ha anche un ulteriore vantaggio, si ha a disposizione un’interfaccia unificata per il callback onload, infatti i vari framework hanno differenti funzioni da utilizzare per eseguire codice al caricamento della pagina, quindi nel caso in cui si dovessero utilizzare più framework in una stessa pagina si eviterebbe di dover scrivere molteplici funzioni onload.
Il secondo metodo consiste nel caricamento diretto dei file javascript a cui siamo interessati usando il tag script. È sufficiente recuperare l’indirizzo del file, disponibile nella pagina apposita e inserire nel tag head il codice che carica il file
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
Librerie attualmente disponibili
La lista delle librerie è in continuo aggiornamento, ed al momento comprende:
- jQuery
- jQueryUI
- Prototype
- script.aculo.us
- MooTools
- Dojo
- SWFObject
- Yahoo User Interface (YUI)
- Ext Core
- Chrome Frame
