Le novità introdotte in Internet Explorer 10 viste finora in questa guida sono conseguenza del supporto di HTML5 e CSS3. Naturalmente oltre a queste nuove funzionalità IE10 ha anche migliorato alcune delle caratteristiche per così dire tradizionali. Esse riguardano principalmente il linguaggio JavaScript e la tecnologia Ajax. In questa puntata scopriremo nel dettaglio di cosa si tratta e come sfruttare queste migliorie.
Javascript
Iniziamo col dire che i miglioramenti al motore JavaScript, noto come Chakra, iniziati con IE9 sono stati affinati con l'attuale versione del browser. Oltre allo sfruttamento di un core dedicato della CPU per la compilazione just-in-time del codice JavaScript, IE10 è in grado di generare una quantità di codice macchina inferiore rispetto alle versioni precedenti ed ha ottimizzato il lavoro del garbage collector. Come effetto di questi miglioramenti interni possiamo godere di una maggiore velocità nel caricamento di pagine con codice JavaScript e nell'esecuzione del codice stesso e un minore impatto sull'occupazione di memoria.
Per quel che riguarda i miglioramenti del linguaggio, Internet Explorer 10 introduce due novità relative alle specifiche ECMAScript 5.
La prima novità è il supporto dello strict mode per migliorare il controllo degli errori nel codice JavaScript. L'obiettivo dello strict mode è di fornire allo sviluppatore un feedback in presenza di determinate situazioni invece di tollerarle o avere comportamenti anomali che possono variare da browser a browser. Un esempio tipico è la dichiarazione di variabili, resa obbligatoria quando JavaScript è eseguito in modalità strict.
È possibile abilitare lo strict mode a livello di intero script o a livello di singola funzione. In entrambi i casi la clausola da indicare è la stessa, come mostrato nel seguente esempio:
"use strict";
var myVariable = "abcd";
...
function strictFunction() {
"use strict";
...
}È possibile far coesistere codice in strict mode e codice non strict, ma è bene tener presente che la sintassi e la semantica JavaScript delle due modalità è differente ed esistono delle sottili e talvolta subdole differenze. Infatti l'abilitazione dello strict mode non coinvolge semplicemente la dichiarazione esplicita delle variabili o l'eliminazione dell'istruzione with, ma introduce altre variazioni come ad esempio una differente valutazione di this in base al contesto e un diverso comportamento di eval() per quel che riguarda l'ambito di validità delle variabili.
È opportuno quindi valutare bene gli effetti dell'attivazione dello strict mode sul codice esistente, ma sarebbe opportuno iniziare ad utilizzarlo sia per via dei vantaggi che offre in termini di semplificazione del debug sia perché le versioni successive del linguaggio si orienteranno sempre più verso questa modalità.
La seconda novità riguarda il supporto dei typed array, cioè di strutture dati che consentono la manipolazione efficiente di dati binari. Le specifiche prevedono due classi: la classe ArrayBuffer e la classe ArrayBufferView.
Un ArrayBuffer è un oggetto che rappresenta un blocco di dati senza alcun formato specifico nè meccanismi per accedere al suo contenuto. Il compito di consentirne l'accesso è affidato all'ArrayBufferView, classe che fornisce un tipo di dati e una struttura per interpretare i dati binari trasformandoli in un effettivo typed array.
La classe ArrayBufferView prevede diverse sottoclassi in base al modo in cui vogliamo interpretare i dati del buffer: abbiamo quindi Int8Array per accedere ai dati come interi a 8 bit, Uint8Array per interpretarli come interi a 8 bit unsigned e così via.
Il seguente esempio mostra come accedere ad un blocco di dati binari ed interpretarli come un array di interi a 32 bit:
var buffer = new ArrayBuffer(256);
var bufferView = new Int32Array(buffer);
buffer = fillBuffer();
for (var i=0; i<bufferView .length; i++) {
console.log("Elemento " + i + ": " + bufferView[i]);
}Nell'esempio facciamo riferimento ad una generica funzione fillBuffer() che si occupa di caricare dati binari nel buffer. Vedremo nel prossimo paragrafo un esempio concreto di caricamento di dati binari.
XMLHttpRequest
Altra importante novità che coinvolge in qualche modo le potenzialità di JavaScript è l'introduzione di nuove funzionalità e di migliorie all'oggetto centrale della tecnologia Ajax: XMLHttpRequest.
IE10 estende questo oggetto secondo le specifiche W3C per il supporto dei file binari. Le specifiche prevedono l'utilizzo della proprietà responseType per indicare il tipo di dato atteso e della proprietà response per accedere al contenuto. Il seguente esempio di codice scarica un'immagine PNG come un typed array a 8 bit unsigned:
var xhr = new XMLHttpRequest();
xhr.open("GET", "/images/image.png", true);
xhr.responseType = "arraybuffer";
xhr.onload = function(e) {
var uInt8Array = new Uint8Array(this.response);
...
};
xhr.send();Come possiamo vedere dal codice, abbiamo impostato la proprietà responseType in modo da ottenere la risposta inviata dal server come un buffer di dati binari e lo abbiamo gestito di conseguenza tramite un typed array.
Oltre ad arraybuffer i valori previsti per responseType sono text, il valore predefinito, blob e document. IE10 prevede anche il valore ms-stream che consente la gestione di dati in streaming.
All'oggetto XMLHttpRequest è stato anche aggiunto il supporto di diversi eventi, come loadstart, progress, abort, timeout ed altri, che consentono una gestione più puntuale del processo di comunicazione tra client e server.
È stato inoltre implementato il supporto per CORS (Cross-Origin Resource Sharing), una tecnica per consentire chiamate Ajax tra applicazioni che stanno su domini diversi basata sugli header HTTP. In sintesi, un server che intende consentire ad un client JavaScript in esecuzione all'interno di un dominio http://dominio.com di accedere alle proprie risorse, può farlo autorizzandolo traimite un header HTTP come il seguente:
Access-Control-Allow-Origin: http://dominio.comQuesto header consente di effettuare quindi chiamate a risorse pubblicate da altri domini come se fossero nel dominio dell'applicazione, il tutto in maniera trasparente al codice JavaScript.
Normalmente l'interazione tra client e server tramite CORS non include l'invio da parte del client di cookie o altre informazioni di autenticazione. Questo può in certi casi impedire un corretto scambio di dati in base alla logica delle applicazioni. Per consentire l'invio da parte del client di queste informazioni aggiuntive occorre impostare esplicitamente la proprietà withCredentials dell'oggetto XMLHttpRequest, come nel seguente esempio:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://altrodominio.com/risorsa", true);
xhr.withCredentials = true;
xhr.onload = function(e) {
...
};
xhr.send();Occorre tener presente tuttavia che, anche con l'abilitazione dell'invio dei cookie tramite withCredentials, vale sempre la same-origin policy. In altre parole, il nostro codice JavaScript continua a non avere accesso ai cookie inviati dal server che non appartiene al nostro dominio.
Nella prossima puntata continuiamo l'esplorazione delle funzionalità di Internet Explorer 10 scoprendo come realizzare applicazioni che lavorano offline e gestiscono database locali.
Link Utili