HTML5 API in IE10

Nella scorsa puntata abbiamo esplorato le novità introdotte in Internet Explorer 10 relative al markup di HTML5 ed abbiamo avuto modo di apprezzare la semplicità con cui possono essere realizzate funzionalità che prima richiedevano una significativa quantità di codice.

Continuiamo l'esplorazione delle caratteristiche di HTML5 supportate da IE10 concentrandoci sul DOM e sulle API utilizzabili tramite JavaScript. Le novità introdotte in questo ambito consentono di aggiungere alle nostre applicazioni client sofisticate funzionalità tipiche delle applicazioni desktop.

File API

IE10 implementa le specifiche W3C File API, tuttora in corso di definizione, che consentono la rappresentazione e la manipolazione di file dal browser. Grazie a queste API possiamo accedere ai file tramite JavaScript e, ad esempio, leggerne il contenuto, come mostrato dal seguente codice:

function readFile()
{
	var myFile = document.getElementById("myFile").files[0];
	if (myFile)
	{
		var reader = new FileReader();
		reader.readAsText(myFile, "UTF-8");
		reader.onload = showContent;
		reader.onerror = function() {alert("Non è possibile leggere il file!");};
	}
}
function showContent(e)
{
	var content = e.target.result;
	alert(content);
}

La funzione readFile() accede all'elemento <input> di tipo file e tramite l'oggetto FileReader legge il suo contenuto interpretandolo come testo con codifica UTF-8 e visualizzandolo a video. Tramite FileReader è possibile accedere anche a file binari, denominati BLOB, ma naturalmente in sola lettura.

È invece possibile creare file e salvarli localmente sfruttando l'oggetto BlobBuilder.

function createFile()
{
	var fileBuilder = new window.MSBlobBuilder();
	fileBuilder.append("Esempio di testo");
	window.navigator.msSaveBlob(fileBuilder.getBlob(), "Test.txt");
}

L'effetto di questa funzione è la creazione di un file Test.txt e la richiesta all'utente di salvarlo nella cartella Download. C'è da dire a proposito del BlobBuilder che, non essendo ancora le specifiche stabili, allo stato attuale si hanno implementazioni dipendenti dallo specifico browser. Abbiamo cioè MSBlobBuilder per IE10, MozBlobBuilder per Firefox e WebkitBlobBuilder per Chrome e gli altri derivati di WebKit.

Il consiglio è di utilizzare al momento l'oggetto soltanto per fare qualche esperimento attendendo specifiche ed implementazioni più vicine a quelle definitive.

Web Workers

Una delle grandi novità introdotte da HTML5 è il supporto multithread operato tramite i Web Workers. Questa funzionalità consente di superare la natura single thread di JavaScript e di realizzare applicazioni Web che sfruttano a pieno le capacità di elaborazione dei moderni processori.

Con IE10 possiamo creare un Worker partendo da un file contenente il codice JavaScript da eseguire in parallelo come mostrato nel seguente esempio:

var myWorker = new Worker("task.js");
myWorker.postMessage();

La prima istruzione crea il Worker mentra il metodo postMessage() ne avvia l'esecuzione.

È possibile scambiare messaggi tra un Worker ed il flusso principale dell'applicazione JavaScript utilizzando il metodo postMessage() e intercettando il messaggio con un apposito gestore di eventi:

var myWorker = new Worker("task.js");
myWorker.onmessage = function(e) { alert(e.data);}
myWorker.postMessage("Hi!");

Nel flusso principale creiamo il Worker e lo attiviamo passandogli una stringa. Il Worker riceve il messaggio e risponde a sua volta nel seguente modo:

onmessage = function(e)
{
	postMessage("You sent me: " + e.data)
}

Il risultato finale è la visualizzazione di un alert con la stringa composta dal Worker.
Al di là del semplice esempio qui mostrato, i Web Workers consentono di fornire un'esperienza utente più fluida in presenza di elaborazioni complesse, dal momento che queste possono essere effettuate in background senza incidere sulla responsività della pagina Web.

WebSocket

Altra grande ed attesa novità di HTML5 introdotta in Internet Explorer 10 è il supporto dei WebSocket, un protocollo per la comunicazione bidirezionale tra pagine Web e server.

I WebSocket sono un canale molto più efficente rispetto al protocollo HTTP, dal momento che non sono pensati per lo scambio di documenti ma di testo o dati binari.

Le API per utilizzare i WebSocket in una pagina Web sono abbastanza semplici. Consideriamo il seguente codice:

var socket = new WebSocket("ws://myHost/webSocketData");
socket.open = function(e) {
	document.getElementById("status").innerHTML = "Connessione effettuata!";
}
socket.onerror = function(e) {
	document.getElementById("status").innerHTML = "Errore di comunicazione!";
}
socket.onclose = function(e) {
	document.getElementById("status").innerHTML = "Connessione chiusa!";
}
socket.onmessage = function(e) {
	document.getElementById("message").innerHTML = e.data;
}

Esso crea un WebSocket che si connette all'indirizzo ws://myHost/webSocketData (notare l'URL schema che contraddistingue questo protocollo) ed imposta le funzioni di callback che gestiranno gli eventi di apertura, di errore, di chiusura del WebSocket e di ricezione di un nuovo messaggio.
Per inviare un messaggio al server utilizzeremo in modo abbastanza semplice il metodo send():

socket.send("Messaggio dal client!");

I WebSocket con il loro meccanismo di comunicazione bidirezionale consentono uno scambio di dati in tempo reale tra client e server permettendo di aggiornare dinamicamente i contenuti della pagina Web con un approccio push.

>> Leggi Introduzione ai WebSocket per saperne di più.

Media Query listener

Un'altra interessante novità in Internet Explorer 10 è rappresentata dal supporto dei Media Query listener, cioè la possibilità di valutare a runtime una Media Query. Il vantaggio di questo approccio rispetto ai CSS3 Media Query consiste nella possibilità di utilizzare soltanto le risorse più adatte alla risoluzione video corrente e di reagire dinamicamente a variazioni della risoluzione o dell'orientamento del dispositivo.

Per visualizzare un'immagine utilizzando le CSS3 Media Queries, scarichiamo le differenti versioni della stessa e visualizziamo di volta in volta quella che più si adatta alla risoluzione del dispositivo.

Con i Media Query listener invece possiamo scaricare soltanto la versione corretta per la risoluzione corrente, individuando tramite JavaScript la risoluzione corrente e selezionando dinamicamente la versione più adatta.

Il seguente codice crea un oggetto MediaQueryList relativo ad una specifica Media Query per valutare quale immagine visualizzare:

mql = window.msMatchMedia("(min-width:400px)");
if (mql.matches) {
	showLargeImage();
} else {
	showSmallImage();
}

Per intercettare eventuali variazioni delle Media Query possiamo registrare un listener come mostrato di seguito:

mql.addListener(mediaSizeChange);
function mediaSizeChange(mql)
{
	if (mql.matches)
	{
		showLargeImage();
	} else {
		showSmallImage();
	}
}

Nella prossima puntata vedremo altri miglioramenti apportati a JavaScript ed alla programmazione lato client.