jQuery Mobile 1.1.0, le novità

Il 28 febbraio 2011 è stata annunciata la versione RC1 di jQuery 1.1.0. In questo articolo cercheremo di elencare le più importanti tra le modifiche che hanno portato a questa versione. Certamente lo sforzo maggiore è stato quello nella direzione della compatibilità: numerosissimi i commit per tentare di ottenere più velocità, fluidità e versatilità cross-device.

Cogliendo i suggerimenti dell'annuncio ufficiale concentreremo l'attenzione su toolbar, transizioni e una generale ottimizzazione.

Le toolbar fisse

Le toolbar con posizionamento fisso hanno migliorato la loro resa cross-browser, supportando anche le ultime novità in fatto di adesione agli standard.

Ecco i browser che supportano oggi le toolbar fisse:

• iOS5 - iPhone e iPad
• Android 2.2 e 2.3
• I tablet Android 3.x (Honeycomb)
• Android 4.x (ICS)
• Chrome per Android (beta)
• BB Playbook 1-2
• BB7
• Nook Color/Tablet
• Kindle Fire
• Kindle 3

Ci sono anche tutti i moderni browser per PC (IE, Firefox, Safari, Chrome, etc.)

Quando il team ha iniziato al lavorare alla libreria, il supporto CSS per position:fixed nel mobile era praticamente inesistente, quindi la soluzione di toolbar fissa riposizionava dinamicamente le toolbar ogni volta che veniva scrollata la pagina.

Anche se era un palliativo discreto, il modo in cui i browser mobili congelano il DOM durante lo scroll avrebbe comportato un brevissimo scorrimento delle toolbar insieme al documento, che era impossibile risolvere completamente.

Approcci alternativi utilizzano un contro-scrolling impresso con javascript per compensare e ottenere toolbar realmente fisse, ma funzionano solo su un piccolo sottoinsieme di piattaforme, inoltre utilizzano librerie cinematiche non native e introducono potenziali problemi di performance e usabilità sui dispositivi meno potenti. Nessuna di queste era un'opzione accettabile.

Fortunatamente, quando si era vicini al rilascio della 1.0, Brad Frost ha pubblicato i risultati dei suoi test sul supporto di position:fixed sui browser mobile, che nel frattempo sono molto migliorati e permettevano di utilizzare i CSS per le toolbar fisse, pur mantenendo il fallback per i browser meno attuali.

L'effetto più interessante è quello di ottenere un reale scrolling nativo, che funzioni con il touch, accessibile, leggero e compatibile.

Per definire una toolbar fissa basta aggiungere l'attributo data-position="fixed" ad un elemento header o footer:

<div data-role="header" data-position="fixed">
	<h1>...</h1>
</div>

Migliorate le transizioni

Il sistema di navigazione Ajax è un punto di forza di jQuery Mobile: rende la navigazione veloce e consente di effettuare transizioni animate. Se il lavoro è tanto per ottenere transizioni sempre più fluide, non mancano gli ostacoli: la necessità di scrollare la pagina durante le transizioni e le scarse capacità di animazione di Android.

Il primo paletto è dato dal fatto che sia la pagina corrente che la successiva sono sulla stessa viewport, e l'animazione si applicherebbe sulla viewport. Ciò significa che se prima di passare alla pagina successiva si era arrivati in fondo e poi si è cliccato, bisognerà ritornare prima in alto nella pagina e poi effettuare la transizione. Tutto questo lavoro non è molto performante su un dispositivo mobile. Per mascherare questa lentezza è stato introdotto un effetto di fade out che rende tutto più fluido.

Per il supporto piuttosto scarso delle transizioni CSS da parte di Android, è stato fatto uno studio su quelle che avessero un delay più accettabile e su quelle è stato costruito un set minimo di transizioni.

Le cose vanno meglio da Android 3.0 in poi, in cui è convenuto utilizzare le trasformazioni 3D e applicare tutte le transizioni possibili, con un fallback per le versioni più vecchie alle vecchie fade-in/fade-out.

Due nuove transizioni: Turn e Flow

Oltre ad ottimizzare le transizioni della versione 1.0, ne sono state aggiunte altre due:

• turn, che è simile all'effetto che si ha cambiando le pagine sull'interfaccia Metro style di Windows8;
• flow, simile all'effetto di passaggio tra una tab e un'altra su iOS.

Nuovo loader Ajax

Il loader è stato riprogettato per essere più veloce e leggero: un'immagine ridotta al minimo e il testo eliminato di default, anche se può essere aggiunto utilizzando le opzioni globali. Ad esempio ecco come mostrare il loader con tema A e messaggio personalizzato:

$.mobile.showPageLoadingMsg("a", "Sto caricando il tema A...");

Supporto per jQuery 1.7.1

jQuery Mobile 1.1.0 supporta jQuery sia nelle versioni 1.6.4 e 1.7.1. È raccomandato l'uso della 1.7.1 per evere tutti i vantaggi della nuova release.

Data Enhancement

jQuery Mobile 1.0, effettua la scansione di tutto il markup per trovare gli elementi di cui modificare l'aspetto, questo può causare qualche conflitto nel caso utilizzassimo librerie esterne che hanno un loro rendering particolare del markup.

Con la 1.1 possiamo applicare ad un contenitore l'attributo data-enhance=false per evitare che il contenuto (link/form etc) sia modificato. Questa feature deve essere abilitata esplicitamente utilizzando $.mobile.ignoreContentEnabled=true

Zoom

Per evitare il brutto effetto di zoomata che a volte si vede nel cambio di orientamento da verticale a orizzontale, bisognava impedire all'utente lo zoom, disabilitandolo. Con 1.1 lo zoom viene automaticamente disabilitato solo per il tempo della rotazione dello schermo, lasciando all'utente la possibilità di zoomare. Tutto ciò grazie alll'utility zoom.iosorientationfix.js. Esiste anche un'altra utility, zoom.iosfocusfix.js, che blocca lo zoom automaticamente quando il focus va su un elemento di input. Entrambe queste due utility ne sfruttano una più generica: $.mobile.zoom con i metodi enable e disable e lo stato enabled (booleano).

Conclusioni

Ci sono molte altre piccole migliorie al framework, ma ecco le cose da ricordare passando alla nuova versione:

• La transizione di default è cambiata da slide a fade;
• I browser che non supportano le trasformazioni 3D causano un fallback, di default alla transizione fade, ma configurabile;
• È stato deprecato touchOverflow;
• $.mobile.fixedToolbars.setTouchToggleEnabled(false) è stato rimpiazzato dall'opzione tapToggle;
• L'opzione data-fullscreen="true" per le toolbar fisse deve essere aggiunta individualmente a header o footer, invece che in generale sul container della pagina.