Zepto.js: framework JavaScript per iOs e Android

Un framework js in soli 2kb, con il supporto di tap, double tap e swipe.

Ogni sito ormai dovrebbe avere una versione mobile: qualche tempo fa avevo suggerito MobilePress come soluzione per blog e siti basati su WordPress. Non sempre però un plugin può soddisfare tutte le necessità: in certi casi è necessario realizzare soluzioni su misura, con un modello di interazione differente dal classico punta e clicca. Basti pensare al numero enorme di smartphone touchscreen che sono in circolazione in questo momento: perché non sfruttare le potenzialità che offrono?

È anche per questo motivo che è nato Zepto.js, un framework JavaScript per dispositivi mobili basati su webkit. Integrandolo nella versione mobile (e solo su quella) potrete interagire con tutti i cellulari basati su iOs e Android, praticamente la maggior parte del mercato mobile.

Anche se il progetto è ancora in beta, si fa notare il peso della libreria: solo 2kb (nella versione compressa). Dieci volte meno rispetto a jQuery o Prototype, che devono preoccuparsi di funzionare anche su altri browser come Internet Explorer.  Siete ancora convinti di utilizzare gli altri framework per un sito mobile?

Tra le altre caratteristiche di Zepto.js:

  • linguaggio compatibile con jQuery
  • supporto Ajax
  • riconoscimento di Tap, doppio Tap (pressione sullo schermo con un dito) e Swipe (scorrimento di un dito sullo schermo). Ad esempio:
  • Open Source

Tap e Swipe possono essere usati semplicemente così:

$('selettore').tap(function(){...});
$('selettore').doubleTap(function(){...});
$('selettore').swipe(function(){...});

Potete scaricare zepto.js dal sito ufficiale. Se volete approfondire trovate su SlideShare anche le slide con cui Thomas Fuchs ha presentato la sua creazione.

Il Framework CSS ideale

I Framework CSS sono fogli di stile con regole già pronte, che teoricamente dovrebbero servire per tutte le esigenze. In realtà per me non è così, il mio CSS di base è costruito su misura.

CSS Edit LogoIn questi giorni ho ottimizzato il CSS di base che utilizzo come partenza per tutti i miei lavori. Scartare a priori l’idea di utilizzare un qualsiasi Framework CSS, come Blueprint, è stata la prima cosa che ho fatto.

Per chi non lo sapesse i Framework CSS sono fogli di stile con regole già pronte, che teoricamente dovrebbero servire per tutte le esigenze, ma che almeno nel mio caso complicano solo il lavoro. Spesso proprio questa generalità implica un’inutile mole di codice, che nella maggior parte dei casi non viene utilizzato.

Queste soluzioni non potranno mai essere universali: ognuno è abituato ad utilizzare un metodo diverso, e CSS Reset a parte tutto il resto ha comunque bisogno di essere personalizzato.

E’ appunto solo il CSS Reset di Eric Meyer che uso come punto di partenza, perchè consente di avere una buona coerenza tra i vari browser senza i problemi del reset con il selettore universale “*”.

Nel mio caso ho eliminato i selettori che non utilizzo per alleggerire il codice, ma la base è sempre quella di Eric.

Inoltre una comoda aggiunta per la quale ho rubato l’ispirazione a Piotr, è l’inserimento di una sezione dedicata ai colori utilizzati, all’inizio del CSS. Un comodo riferimento durante lo sviluppo, anche per eseguire al volo dei copia-incolla dei codici esadecimali.

Il risultato finale è un CSS che potete vedere a questo indirizzo, ma che non è pensato per essere adatto a tutti, l’ho realizzato esclusivamente per me.

Il mio consiglio è di ispirarsi alle varie soluzioni che offre la rete, ma costruirsi un CSS di base secondo le proprie esigenze. Solo così potrete ottimizzare i tempi nella scrittura di un foglio di stile.