Dopo la presentazione da parte di big G di Google DocType, sono andato a curiosare per vedere di cosa si tratta:
Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility. fonte Google.
Navigando tra vari Howto, ne ho trovato uno interessante: HOWTO detect when the user resizes the browser window (goog.dom.ViewportSizeMonitor). Questa funzionalità ci permette di monitorare le dimensioni del browser, tramite la gestione di determinati eventi custom, che vengono sollevati ogni volta che l'utente ridimensiona la finestra del browser.
Bene mi interessa, decido di includere questa funzionalità all'interno della mia applicazione ASP.NET (non entro in questo post nel merito della licenza). Dopo aver creato la mia banalissima soluzione con la Default.aspx in VS 2008 creo in essa la directory *js* che a sua volta include la directory *CommonTools* è mia intenzione infatti "storare" i vari javascriot presi da big G in questa directory. Fatto questo riporto i vari passi che ho compiuto:
- Il punto di partenza è recuperare i vari *.js da includere nella directory CommonTools, accedo per cui al codice sorgente (google ci dice che possimao vedere il sorgente dal web oppure scaricarlo nella nostra macchina) di doctype.
- Aggiungo in primis i file base.js e deps.js presi dalla root goog gli linko all'interno della pagina default.aspx.
- Aggiungo il file goog.dom.ViewportSizeMonitor.js (ViewportSizeMinitor).
- Il file goog.dom.ViewportSizeMonitor.js si porta dietro delle dipendenze: goog.dom, goog.events, goog.events.EventTarget ... Le dipendenze non sono altro che file js, dobbiamo per cui includerli all'interno della nostra soluzione (è semplice capire quali file includere basta vedere il codice sorgente dei file importati e verificare le righe di codice che richiamano la funzione *goog.require* definita in base.js). Le dipendenze devono essere risolte in maniera ricorsiva, se x.js necessita di y.js che a sua volta necessita di z.js devo importare tutti tre i file (non potrebbe essere altrimenti ;)).
Finito, ho importato rurri i file necessari in maniera ricorsiva ecco cosa mi ritrovo all'interno della directory CommonUtils:
Per fare in modo che vengano caricati correttamente senza generare errori javascript a runtime li ho linkati all'interno della Default.aspx (nella sezione head) come segue (il file deps.js viene caricato da base.js non è necessario linkarlo):
<!--JAVASCRIPT -->
<script src="js/CommUtils/base.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.disposable.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.array.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.string.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.event.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.math.size.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.math.coordinate.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.object.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.events.Listener.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.userAgent.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.structs.SimplePool.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.events.BrowserEvent.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.dom.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.events.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.events.EventTarget.js" type="text/javascript"></script>
<script src="js/CommUtils/goog.dom.ViewportSizeMonitor.js" type="text/javascript"></script>
Poi per poter usufruire della funzionalità sempre nella sezione head di Default.aspx ho incluso il seguente script:
<script id="ResizeEventHandler" type="text/javascript">
var vsm = new goog.dom.ViewportSizeMonitor();
goog.events.listen(vsm, goog.events.EventType.RESIZE, function(e) {printViewportSize(vsm.getSize());});
function printViewportSize(param)
{
document.getElementById('ViewPortSize').innerText = param;
}
</script>
Bene ecco fatto ora la label ViewPortSize mantiene il valore delle dimensioni della finestra del browser:
Considerazioni:
Non entro nel merito delle ottimizzazioni che si possono apportare all'applicazione, avrei potuto trattare i vari javascript come embedded resources oppure avrei potuto applicargli un'algoritmo di compressione ... Comunque l'inclusione di ben 17 file .js mi sembra eccessiva (anche se i vari "bechmark" firebug :) che ho eseguito non dimostrano un overload pazzesco per il recupero) comunque, se si ha bisogno solo di questa funzionalità è possibile sicuramente trovare altre vie meno onerose. Certo è che Doctype mette a disposizione degli sviluppatori un gran numero di funziuonalità, ma al costo di adottare in blocco tutta la loro filosofia (non si agisce sull'esistente ma si ricreare tutto da zero ex: il dom ed i tipi di dato come string), poi non ho verificato che tipo di implicazioni ci sono sulla licenza del prodotto sviluppato.
Tags: ASP.NET Doctype Google