Nel campo dello sviluppo web mobile si sottolinea spesso come sia possibile progettare e realizzare applicazioni JavaScript appoggiandosi a funzionalità native del linguaggio, senza appesantire le pagine con librerie e adattatori vari. In prima istanza tutto ciò è legato alla bassissima quota di mercato coperta dai browser poco evoluti, primo fra tutti Internet Explorer. In secondo luogo il mondo degli utenti mobile è più abituato ad un'esperienza progressiva del web (cioè basata sul progressive enhancement), ed è quindi meno scandaloso se su Windows Mobile o Opera Mini il sito non ha lo stesso sfavillio di effetti offerto su iPhone e Android.
Usare JavaScript nativo
In alcuni articoli precedenti sono già state presentate tecniche per sostituire le librerie JavaScript con funzionalità native presenti anche nei browser mobile.
Se il nostro progetto mobile non ha requisiti tali da richiedere framework come jQuery Mobile o Sencha Touch, è possibile attuare piccoli accorgimenti per sfruttare a pieno le potenzialità dei motori di rendering JavaScript degli smartphone e migliorare l'esperienza utente complessiva del sito.
Selezionare gli elementi del DOM
Il primo e più importante vantaggio dello sviluppo JS su mobile è quello di poter selezionare gli elementi DOM anche con i metodi .querySelector() e .querySelectorAll() in sostituzione di selector engine come Sizzle:
//seleziono un singolo elemento
var wrapper = document.querySelector('#wrapper');
//come sopra, ma più performante
var wrapper2 = document.getElementById('wrapper');
//seleziono più elementi con una query CSS
//viene restituita una lista di nodi
var els = document.querySelectorAll('#wrapper li > a');
//oppure
var els = wrapper.querySelectorAll('li > a');Per accorciare la sintassi e risparmiare un po' di byte possiamo realizzare alcuni shortcut di queste funzioni:
function byId (id) {
return document.getElementById(id);
}
function query (selector, context) {
return (context || document).querySelectorAll(selector);
}
//riscrivo il codice precedente
var wrapper = byId('wrapper');
var els = query('li > a', wrapper);Ciclare fra una lista di elementi
Quello che potrebbe mancarci è una funzione per ciclare fra gli elementi che abbiamo selezionato (come .each() in jQuery) e, visto che query() restituisce una lista di nodi e non un array vero e proprio, non possiamo usare il metodo nativo .forEach(); tuttavia possiamo prenderlo in prestito:
function each(elements, fn) {
Array.prototype.forEach.call(elements, fn);
}
each(els, function (el, index) {
//fai qualcosa con l'elemento
});Seguendo lo stesso pattern possiamo prendere in prestito altri metodi dell'oggetto Array.
Gestire gli eventi
Anche gli eventi possono essere gestiti nativamente, compreso il DOM ready (che invece non è presente in IE fino alla versione 9). Ecco tre shortcut:
function addEvent(element, type, fn) {
element.addEventListener(type, fn, false);
}
function removeEvent(element, type, fn) {
element.removeEventListener(type, fn, false);
}
function ready(fn) {
addEvent(document, 'DOMContentLoaded', fn);
}Micro Framework
Sebbene nello sviluppo mobile di JavaScript si possa fare a meno di framework e librerie, queste spesso possono essere utili per velocizzare la scrittura degli script nonché per colmare e correggere differenze di implementazione fra i browser.
Nel settore mobile si sono diffusi alcuni micro framework in grado di rimpiazzare quasi completamente librerie come jQuery pur mantenendo un peso veramente contenuto. Due dei progetti più conosciuti sono Zepto e XUI.
Zepto
Questo progetto, guidato da Thomas Fuchs, autore di script.aculo.us, è orientato allo sviluppo in ambiente WebKit (al momento le piattaforme supportate sono iOS 4+, Android 2.2+ e webOS 1.4.5+) ed ha fra i suoi obiettivi quello di fornire una sintassi aderente a quella di jQuery pur rimanendo intorno ai 5KB di peso.
Sul repository ufficiale è disponibile una documentazione esaustiva dei metodi offerti. Ecco uno script di esempio che simula l'effetto CSS di :active:
$('#lista li')
.bind('touchstart touchend', function (e) {
if (e.type == 'touchstart') {
$(this).css('color', '#f00');
} else {
$(this).css('color', '#000');
}
});Una caratteristica interessante è che il metodo di animazione .anim() sfrutta trasformazioni e transizioni CSS3, contribuendo alle buone prestazioni ed al peso ridotto del framework:
$('#bottone').bind('click', function () {
//anima la larghezza per 1 secondo
$('#box').anim({ 'width' : '200px' }, 1);
});XUI
XUI è una libreria abbastanza affidabile e performante, nata come side project di PhoneGap. Il suo vantaggio principale rispetto a Zepto è che offre un supporto più esteso ai browser mobile, disponendo anche di versioni ottimizzate per BlackBerry e Internet Explorer.
Usato insieme ad uno script server-side per lo sniffing del browser in uso, dà la possibilità di allargare l'esperienza utente di alto livello alla maggior parte delle piattaforme mobile. Il tutto, naturalmente, al prezzo di più KB da scaricare (si va dai 9.4 ai 22KB).
La sintassi è leggermente diversa da jQuery, pur presentando metodi concatenabili:
x$('#lista')
.on('touchstart touchend', function (e) {
if (e.type == 'touchstart') {
x$(this).setStyle('color', '#f00');
} else {
x$(this).setStyle('color', '#000');
}
});Per quanto riguarda le versioni per IE e BlackBerry va notato che il peso maggiore è legato alla presenza di Sizzle (in sostituzione di .querySelectorAll()), mentre per tutte le versioni le animazioni sono realizzate in JavaScript con la libreria émile.
Dato il supporto esteso della libreria, a livello di performance, XUI difficilmente riesce ad eguagliare Zepto, ma rimane comunque una buona scelta quando dobbiamo prevedere un'esperienza utente dinamica anche per piattaforme diverse da WebKit.
JavaScript, mobile ed il futuro
Se la potenza degli smartphone è in continua progressione, peso delle pagine e velocità di connessione (nonché il costo) sono fattori che mettono ancora a rischio la fruibilità del web su mobile. Nonostante possa sembrare comodo e veloce utilizzare jQuery o Mootools per sviluppare in JavaScript, sfruttare al meglio le potenzialità offerte dai browser (o comunque rivolgersi a librerie che lo fanno sotto al cofano) può incidere favorevolmente sulla fruibilità, gli accessi e l'efficacia globale di un sito.
