Ogni anno vengono effettuati miliardi di download di applicazioni mobile da milioni di utenti sparsi per il mondo, ad un punto tale che molti paragonano il creare un app e pubblicarla nei vari stores ad una vera propria miniera d’oro. Ed il numero sta crescendo a dismisura.

La stima dei numero di download di applicazioni mobile nei prossimi anni

Tuttavia, se in alcuni casi gli app stores hanno rappresentato (e rappresentano ancora) una grandissima fonte di ricchezza (come Ruzzle o FlappyBird, tanto per citare le prime app che mi vengono in mente), per ogni app di successo ce ne sono migliaia che non riescono a decollare.

Il fatto è che quando si parla di creare un app, puntualmente ci vengono presentati solamente quei progetti che hanno raggiunto la vetta. E tutte quelle applicazioni che al contrario hanno fallito?

La dura verità: le app che non hanno successo

In particolare, di tutti i milioni di applicazioni scaricate, solo un piccolissima parte (circa il 5/10%) viene effettivamente utilizzata dopo la prima volta.

Quante volte ti sarà capitato di scaricare un’app nel tuo smartphone o tablet, dargli un’occhiata veloce, per poi non aprirla mai più, o addirittura cancellarla?

A seconda dell’utente, la maggior parte delle applicazioni vengono completamente ignorate o cancellate dopo il primo utilizzo.

Il mio iPhone è continuamente colmo di applicazioni di vario tipo, ed ogni giorno mi presenta minimo 50 notifiche di aggiornamenti da effettuare per applicazioni che non ricordo nemmeno di avere.

Così, periodicamente, appena riesco a ritagliarmi un attimo di tempo, mi metto a cancellare tutte quelle app che non mi piacciono o che non utilizzo.

Ma dopo qualche giro di esplorazione su App Store, sono di nuovo al punto di partenza.

E credo che questo sia lo stesso scenario della maggior parte degli utenti che possiedono un dispositivo mobile.

Da cosa dipende?

Semplice: dall’utilità dell’applicazione.

Prima di perdere tempo con la creazione di un’applicazione, cerca di capire se è effettivamente utile

Verifica l’utilità della tua applicazione

Molti vengono a chiederemi delle consulenze per progetti riguardanti applicazioni mobile che risultano veramente inutili, come se si dimenticassero che qualsiasi smartpthone o tablet possiede un browser.

Ora ti chiederai: “cosa c’entra il browser con l’app?”

C’entra eccome.

Uno dei miei clienti (per il quale ho realizzato un e-commerce con WordPress) sapendo che oltre a siti ed applicazioni web mi occupo anche della realizzazione di mobile app,  qualche tempo fa si era fissato con l’idea di voler creare a tutti i costi un’applicazione mobile che offrisse all’utente tutte le funzionalità dell’e-commerce che gli avevo già sviluppato.

Che senso avrebbe avuto realizzare l’applicazione di un’e-commerce già ottimizzato per dispositivi mobile, e quindi già facilmente fruibile da un normale mobile browser?

Provai a spiegargli l’inutilità della cosa, ma non mollò la presa, nemmeno dopo avergli mostrato il mio preventivo.

Morale: il cliente finì per spendere alcune migliaia di euro per un’ottima e funzionale applicazione, ma che non venne mai utilizzata da nessuno (dei circa 900 utenti che avevano effettuato il download nell’arco di un anno, non registrammo nemmeno un acquisto da dispositivi mobili).

Completo fallimento.

Pensaci bene: prima di metterti a testa bassa e impegnarti nella realizzazione di un’applicazione mobile, cerca di capire quali funzionalità e contenuti deve avere.

Se si tratta di elementi disponibili anche su un normale web browser, allora la verità è che non hai bisogno di un’applicazione mobile, o almeno di un’applicazione da distribuire sui vari stores.

Molte delle funzionalità come la geolocalizzazione o il salvataggio dei dati (leggi questo articolo oppure questo per saperne di più) possono essere implementate anche in normali siti web.

Una buona soluzione che personalmente adotto molto spesso è quella di creare una versione mobile del sito web, utilizzando delle tecniche per realizzare HTML Mobile app fluide ed altamente performanti.

In questo modo è possibile creare un’applicazione mobile a tutti gli effetti, ma che sia accessibile anche da un normale browser mobile, e che allo stesso tempo possa essere facilmente trasformata in un’applicazione ibrida, grazie adei tools come Phonegap o Titanium.

È la stessa cosa che ha fatto per esempio Financial Times con la sua applicazione mobile.

Conclusioni: in base a quali fattori puoi capire se tu o il tuo cliente avete veramente bisogno di un app?

Per capire se hai veramente bisogno di creare un’applicazione da poter scaricare nei vari stores, i metri di giudizio ai quali dovresti affidarti e su cui focalizzarti sono:

1. posso fornire all’utente le stesse funzionalità con un normale sito web responsive?
2. quanto tempo, risorse e denaro dovrei impiegare per creare un app e quali per creare un sito web che offra le stesse funzionalità?
3. qual è lo scopo finale (effettivo) del tuo progetto/lavoro?
4. quali sono le reali esigenze dell’utente?

Più semplicemente, se hai bisogno di offrire un prodotto che deve essere accessibile da diversi tipi di dispositivi (sia da quelli desktop che da quelli quelli mobili) allora la miglior cosa è sicuramente optare per una versione responsive del sito web.

Nei vari app stores possiamo trovare un numero sempre più grande di applicazioni che integrano il login di Facebook al proprio interno per dare la possibilità all’utente di effettuare l’accesso molto più comodamente e velocemente, evitando di costringerlo ad iscriversi ad un nuovo servizio, con tutti i rischi che tale operazione comporta (come per esempio perdere una grande fetta di utenti).

Per aggiungere questa funzionalità nei miei progetti da pubblicare come applicazioni ibride (mobile app in HTML5 “inglobate” all’interno di app native), ho sempre utilizzato il plugin Phonegap “Phonegap Facebook Plugin“, che utilizza una combinazione dei “moduli” nativo e javascript messi a disposizione dall’SDK di Facebook.

Grazie al Facebook Plugin di Phonegap è quindi possibile “manovrare” il login nativo mediante delle semplici API javascript.

 

In fondo è proprio questo lo scopo dei plugin per Phonegap, ed anche un dei vantaggi di sviluppare mobile app in HTML5: quello di riuscire ad accedere alle funzionalità native del dispositivo direttamente da codice Javascript.

Tuttavia questa strada porta alcuni svantaggi, come quello di dover comunque dipendere da un plugin di terze parti, oppure quello di non poter essere utilizzato nel caso in cui non volessimo distribuire la nostra applicazione HTML5-CSS3-Javascript sotto forma di app ibrida (compilandola quindi con strumenti come Xcode o Eclipse), ma volessimo renderla accessibile in remoto, collegandosi semplicemente ad una pagina web (come per esempio hanno fatto Financial Times e Forecast.io con le loro HTML5 mobile app, vedi immagine seguente).

 

Le applicazioni HTML5 ottimizzate per mobile di Financial Times e Forecast.io

---

#facebook #mobileapp login – Come implementarlo in #HTML5
Click To Tweet

---

Facebook mobile login: una strada alternativa

In questo articolo ti voglio mostrare una risorsa molto interessante, che ho trovato utilissima  per poter implementare un Facebook mobile login su di un’HTML5 mobile app senza necessariamente utilizzare dei tools nativi, come il plugin per Phonegap sopra citato.

Si tratta di una micro-libreria Javascript realizzata da Christophe Coenraets, brillante sviluppatore professionista che lavora per Salesforce.com (ti consiglio vivamente di seguirlo, se sei interessato a come creare un app in HTML5, CSS3 e Javascript), il cui lavoro è principalmente focalizzato sullo sviluppo di applicazioni mobile web-based ( quindi single-page-application).

La libreria si chiama OpenFB e risulta molto utile per poter implementare il Facebook mobile login sulla propria applicazione, senza affidarsi necessariamente a dei componenti nativi.

Coenraets, che avendo la necessità di implementare questa funzionalità in uno dei suoi lavori ha pensato di adattarla in una soluzione standard in modo tale che tutti potessero usufruirne, ha dato la possibilità a chiunque di inserire facilmente il login di Facebook nel proprio progetto.

---

#facebook #mobileapp login – Come implementarlo in #HTML5
Click To Tweet

---

Facebook mobile login: come si usa la libreria OpenFB

Utilizzare la libreria si presenta piuttosto semplice, vediamo come funziona:

Semplice Login:

openFB.login(scope, successHandler, errorHandler);

Riprendere la lista degli amici dell’utente:

openFB.api({path: '/me/friends', success: successHandler, error: errorHandler});

Pubblicare un post nella bacheca dell’utente:

openFB.api(
{
     method: 'POST',
     path: '/me/feed',
     params: {
          message: 'Messaggio di prova per le API di Facebook'
     },
     success: successHandler,
     error: errorHandler
});

Facebook mobile login: primi passi

Per integrare la risorsa nei tuoi progetti hai solamente bisogno di:

1. Creare un’applicazione Facebook da associare al tuo progetto recandoti a questo link
2. Copiare l’ID dell’applicazione Facebook appena creata ed usarlo come primo parametro della funzione di inizializzazione della libreria OpenFB posta nella pagina principale della tua Single Page Application (index.html): openFB.init().
3. Eseguire la pagina index.html da un indirizzo che corrisponda a quello inserito al momento della creazione dell’applicazione Facebook, in corrispondenza del parametro “Valid OAuth redirect URIs” situato nella scheda “Settings”.

---

#facebook #mobileapp login – Come implementarlo in #HTML5
Click To Tweet

---

Facebook mobile login: conclusioni

Come vedi il funzionamento è piuttosto semplice, e chiunque può facilmente integrarlo nella propria applicazione, app che non deve essere necessariamente distribuita sotto forma di app ibrida/nativa ma che può essere benissimo pubblicata online.

Infatti l’autore della libreria mette a disposizione anche la demo di un’applicazione-base che puoi consultare per capire meglio come integrare OpenFB nella tua Single Mobile Application; la demo che funziona anche se visualizzata con un normale browser, sia mobile che desktop.

In particolare, la libreria è stata pensata per fare in modo che il Facebook mobile login funzioni sia nel caso in cui il progetto preveda l’utilizzo di Phonegap (quindi nel caso di un’applicazione ibrida), sia nel caso di applicazioni “browser-based“: se eseguita con Cordova essa sfrutta una web view nativa, mentre se eseguita su browser, il login sarà mostrato attraverso una finestra di popup.

Io l’ho già implementata in una mia applicazione, e la trovo molto utile.

Ma mi piacerebbe sapere il tuo parere: cosa ne pensi?

Fammelo sapere nei commenti!

PS. Quasi dimenticavo: ecco il link all’ottimo ed utilissimo articolo originale di Coenraets, ai sorgenti e alla demo:

Uno dei dilemmi più frequenti su cui si imbatte chiunque decida di affacciarsi sul mondo dello sviluppo mobile è sicuramente quello su come creare un app: “quale sistema di sviluppo dovrei adottare? E’ meglio cominciare con il codice nativo oppure affidarsi all’HTML?“.

In effetti è una domanda che i miei lettori mi pongono molto frequentemente.

Come avrai notato personalmente prediligo la via dell’HTML5, CSS3 e Javascript per realizzare i miei progetti destinati a dispositivi mobile. Ma quella che per me è la strada principale, non è detto che lo debba essere per gli altri sviluppatori.

Ognuno, durante il proprio percorso formativo/professionale, capita davanti a situazioni ed ostacoli differenti, una miriade di combinazioni che lo portano a prendere determinate decisioni invece che altre.

E’ così anche per quanto riguarda la decisione sul linguaggio da utilizzare per realizzare una mobileapp.

La risposta non è delle più semplici, ma dipende da numerosi fattori. In questo articolo vedremo quali secondo me dovresti considerare per prendere la tua decisione.

---

Come creare un #mobileapp – #HTML5 o linguaggio nativo?
Click To Tweet

---

Il settore di provenienza

La cosa incide maggiormente sulla decisione da prendere per quanto riguarda la metodologia di sviluppo di una mobile app è dal mio punto di vista il settore professionale al quale apparteniamo.

Se non sei un ragazzo che è appena uscito da scuola o dall’università e vuole iniziare a crearsi una carriera nel mondo delle mobile app, allora dovresti decidere sulla base della tua principale professione attuale e le tue esperienze lavorative.

Chi come me opera nel campo del web design e delle web application, ed ha cominciato le sue esperienze professionali in questo settore, allora sarà molto più facile che scelga la strada dell‘HTML5, il CSS3 ed il Javascript, linguaggi con cui ha già molta familiarità e tra cui sa muoversi molto bene.

Come ti ho mostrato in altri articoli, nello sviluppo di HTML Mobile App bisogna fare attenzione ad elementi come performance e fluidità, per non rischiare di rilasciare un prodotto di scarso valore e con una user-experience che non si avvicina nemmeno minimamente a quella delle applicazioni native.

Tuttavia è molto più facile affidarsi a linguaggi che già conosciamo piuttosto che studiarne di nuovi.

Per approfondire il discorso delle perfomance e fluidità, ti consiglio di leggere questi articoli:

• Web e Mobile App fluide con layer e hardware acceleration
• Le 6 migliori tecniche per aumentare le performance di un’ HTML Mobile App

Mentre per una serie di tutorial pratici su come creare un app in HTML5, puoi consultare la sezione tutorials di questo blog.

Per un individuo che invece “parte da zero”, e vuole specializzarsi specificatamente nello sviluppo di mobile app, allora quella del linguaggio nativo potrebbe essere la strada che fa più al caso suo.

E’ molto difficile pensare infatti che gli possa arrivare a padroneggiare molto bene sia linguaggi web che linguaggi nativi (i quali possono essere più di uno, se si decide di sviluppare per più di una piattaforma: Objective-C, Java ecc.) in modo parallelo.

Non sto dicendo che è impossibile, ma sicuramente è molto meno probabile.

Il target dell’applicazione

La scelta del linguaggio è molte volte determinata anche dal target dei dispositivi per i quali decidiamo di rendere disponibile la nuova applicazione.

Se hai bisogno di pubblicare una determinata applicazione solamente per iOS o per Android, per esempio, allora potresti decidere si svilupparla interamente con linguaggio nativo.

Ovviamente ciò va considerato anche in base al futuro: c’è la possibilità che questa app possa più avanti essere resa disponibile anche per altri tipi di sistemi operativi?

Nel caso in cui abbiamo tale necessità o vogliamo che fin dall’inizio l’applicazione sia fruibile da più di un sistema operativo, allora la decisione più opportuna sarebbe quella di optare per l’HTML5.

La tipologia dell’applicazione

Un altro fattore influenzante da sottolineare è quello delle funzionalità e del tipo di interfaccia che l’applicazione deve avere.

Se hai la necessità di creare un videogioco molto complesso o un’interfaccia con una dinamica particolare, allora dovresti usare il linguaggio nativo, che ti consentirà di produrre un prodotto più leggero e molto meno dispendioso in termini di processore, oltre che più performante.

Se invece la tua necessità è quella di realizzare un’interfaccia “standard” con delle normali liste, delle schermate ad entrata che non prevedono effetti troppo complessi (con i CSS3 è possibile realizzare degli effetti “elaborati” che risultano comunque molto performanti, come pop, slide, flip, skew ecc.), headers, tab-bar ecc., allora potremmo portare avanti il progetto tramite linguaggi web-based.

Se vuoi sapere come realizzare gli effetti delle interfacce native con HTML5 e CSS3 allora resta aggiornato sul mio e-book “HTML Mobile Accelerato“, in cui ti mostrerò come realizzare un sistema di animazioni performante che non ha nulla da invidiare ad un’applicazione nativa:

 

 

---

Come creare un #mobileapp – #HTML5 o linguaggio nativo?
Click To Tweet

---

Come creare un app: I benefici dell’HTML5

Vediamo i principali benefici dei linguaggi nella realizzazione di mobile app con linguaggi web-based.

• Centralizzare il processo di sviluppo. Se nel caso dei linguaggi nativi siamo costretti a sviluppare la stessa applicazione da zero per ogni sistema operativo per il quale decidiamo di renderla disponibile, nel caso di mobile app in HTML5, CSS3  e Javascript possiamo utilizzare lo stesso progetto per tutte le piattaforme (apportando qualche piccolo aggiustamento, se vengono utilizzati dei plugin personalizzati per l’accesso a funzionalità del dispositivo, come vibrazione, bussola ecc.)
• Velocità e facilità di sviluppo. Come accennato in precedenza, per chi padroneggia molto bene il linguaggi web, è più facile e veloce realizzare l’interfaccia di una mobile app. In rete si possono inoltre trovare sempre più framework che adottano la filosofia del “mobile first“, e velocizzano ulteriormente le varie fasi di sviluppo
• La libertà negli aggiornamenti. Quando decidiamo di pubblicare un’applicazione su App Store, PlayStore e gli store delle altre piattaforme, siamo costretti ad attendere lunghi tempi di approvazione (2 settimane nel caso di App Store) prima che essa venga approvata. Lo stesso vale per ogni aggiornamento che invieremo. Con le HTML5 Mobile app, è possibile bypassare questo processo impostando un sistema che all’avvio dell’applicazione controlla il server per verificare la disponibilità di nuovi aggiornamenti, ed eventualmente effettuarne il download.

Come creare un app: i benefici del codice nativo

Vediamo quali sono invece i benefici dello sviluppo con codice nativo:

• Maggior facilità di accesso alle funzionalità native. Se da un lato nel caso di mobile app web-based abbiamo dei tools (come Phonegap o Appcelerator) che ci offrono la possibilità di accedere e controllare alcune funzionalità native del dispositivo grazie a degli appositi plugin, è anche vero che il loro utilizzo è molte volte limitato, senza contare il fatto che per alcune delle funzionalità non esistono plugin. Con il linguaggio nativo, abbiamo piena libertà e maggior facilità di accesso a tutte le funzionalità del dispositivo.
• Possibilità di realizzare interfacce più complesse. Come già accennato in precedenza, sviluppando con linguaggio nativo è più facile creare una user-experience molto più avanzata ed interattiva, grazie anche alla possibilità di utilizzare i controlli e gli effetti messi a disposizione dello sviluppatore.
• La qualità dei controlli. Abbiamo detto che nel caso di HTML5 mobile app possiamo sfruttare molti framework CSS mobile-first. In alternativa possiamo anche scrivere personalmente le istruzioni CSS per ricreare gli stessi tipi di controlli nativi (come pulsanti, header, tab-bar, icone ecc.). Tuttavia la qualità di tali controlli non è ancora allo stesso livello dei UI-Kit da cui possiamo attingere con grazie ai linguaggi nativi.

---

Come creare un #mobileapp – #HTML5 o linguaggio nativo?
Click To Tweet

---

Conclusioni

Il linguaggio da adottare per creare un app dipende da numerosi fattori, ma credo che il principale sia la predisposizione e la familiarità che ogni sviluppatore ha con i vari tipi di linguaggi.

Personalmente sono molto più orientato verso i linguaggi web e l’HTML5, anche perchè mi sono specializzato fin dal principio nella realizzazione di siti web e soprattutto, di applicazioni web.

E tu? Di quale settore fai parte ? Anche tu sei un web designer e sei più predisposto ai linguaggi web, oppure sei più indirizzato verso linguaggi nativi?

O ancora, sei un web designer a cui piace spaziare a 360° e conosci sia i linguaggi nativi che quelli web?

Fammelo sapere nei commenti o inviami una mail, sono curioso di sapere quale metodologia stai adottando o ti piacerebbe adottare, e magari quali sono i tuoi obiettivi in merito.

 

Nella  prima parte di questa mini-guida ho introdotto i database lato-client come soluzione per il salvataggio di quel tipo di dati che non necessitano di essere salvati su qualche sistema di storage remoto, utile sia per tipi di progetto come normali siti web, ma soprattutto per lo sviluppo di mobile app in HTML5, CSS3 e Javascript.

Molti sviluppatori (troppi) non sono a conoscenza del fatto che è possibile salvare dei dati in maniera relazionale sul browser dell’utente (o del visitatore), utilizzando uno dei linguaggi maggiormente conosciuti nel mondo del web design: l’SQL.

Da qui nasce l’idea di questa mini-guida.

Nello scorso articolo ti ho mostrato quali sono i database lato-client disponibili, ed in particolare ho anticipato i tre metodi fondamentali per poter sfruttare tutte le potenzialità del database Web SQL:

• openDatabase
• transaction
• executeSql

Vediamo come utilizzarli più nel dettaglio.

---

Come creare una #mobileapp: i metodi del #database #SQL lato-client
Click To Tweet

---

Come creare un app: Creare ed aprire un database

Per salvare i nostri dati abbiamo bisogno come prima cosa di cerare un database. Se si tenta di aprire un Database che non esiste l’API del Web SQL lo creerà automaticamente per noi.

Per creare ed aprire un database, proseguiamo come segue:

var db = openDatabase(“nomeDatabase”, “1.0”, “IL mio primo database!”, 3 * 1024 * 1024 , function(database){
      alert(“Database creato e aperto correttamente”);
});

Nell’esempio abbiamo creato e aperto un nuovo Database associando la sua istanza ad una variabile “db”, il tutto passando 5 parametri al metodo openDatabase:

1. Il nome del Database
2. Il numero della versione da utilizzare
3. Una descrizione di testo
4. Dimensioni stimate del Database
5. Callback di creazione

Se usiamo come primo parametro il nome di un database che è già stato creato in precedenza, non viene creato un nuovo database, ma viene aperto quello già presente.

---

Come creare una #mobileapp: creare e aprire un #database #SQL lato-client
Click To Tweet

---

Come creare un app: le transaction di Web SQL

Una volta aperto il Database, possiamo istanziare l’oggetto transaction, che ci servirà per eseguire le query di cui abbiamo bisogno.

Ma perché servirsi di un oggetto aggiuntivo come la transaction invece di scrivere semplicemente le nostre righe di SQL?

Le transaction ci permettono di usufruire di una funzionalità di rollback: ciò significa che, se una transaction contenente una o più query SQL per qualche ragione fallisce, gli aggiornamenti al database non vengono effettuati, come se la transazione non fosse mai avvenuta.

E’ una logica di funzionamento molto simile a quella delle transazioni dei database MSSql, e rappresenta un grande vantaggio, soprattutto quando abbiamo la necessità di eseguire più operazioni di modifica in coda.

Il metodo transaction dà  allo sviluppatore anche la possibilità di gestire eventuali errori nella transazione con delle apposite callback di errore e di successo.

Ma vediamo più nel dettaglio come si utilizza.

La transaction non è altro che una semplice funzione con una callback di ritorno:

var db = openDatabase(“nomeDatabase”, “1.0”, “IL mio primo database!”, 3 * 1024 * 1024);
db.transaction(function(tx){
     /* Effettuare le proprie query qui */
}, function(){
     //callback di successo
     alert(“Istruzioni SQL eseguite correttamente”);
});

L’oggetto “tx” restituito nella prima funzione di callback, rappresenta l’oggetto della transaction, che useremo per eseguire le query di cui abbiamo bisogno.

Oltre al metodo transaction, è possibile usare anche il metodo readTransaction, che funziona in modo del tutto analogo al primo, ma che non può essere impiegato per eseguire delle istruzioni SQL di modifica del database (come per es. la creazione o l’eliminazione di tabelle, oppure istruzioni come INSERT ed EDIT), in quanto è stato creato appositamente per velocizzare le query di lettura.

Tuttavia con i metodo transaction possiamo effettuare sia query di lettura che di modifica.

Una volta ottenuto il nostro oggetto transaction, procediamo con l’esecuzione delle query.

Come creare un app in HTML: il metodo executeSQL

Eccoci finalmente al punto in cui possiamo divertirci con le istruzioni SQL.

executeSQL può essere utilizzato sia per query di lettura che per query di modifica del database, include un controllo implicito per l’SQL Injection, e fornisce una callback di ritorno per poter processare i risultati delle query effettuate.

Come creare una tabella

Il metodo executeSql è un metodo dell’oggetto transaction (ovvero dell’oggetto fornito con il parametro di ritorno “tx”) e viene utilizzato in questa maniera:

var db = openDatabase(“nomeDatabase”, “1.0”, “IL mio primo database!”, 3 * 1024 * 1024);

db.transaction(function(tx){
	/* Effettuare le proprie query qui */
}, function(){
	//callback di successo
	tx.executeSql("CREATE TABLE Employees (id unique, name)", [] , 			
		function(sqlTransaction, sqlResultSet){
				alert("La tabella è stata creata.");
		}, 
		function(sqlTransaction, sqlError){			
			/* Gestione degli errori */
		}
	);
});

L’esempio che ti ho appena mostrato crea una tabella dal nome “Employees” all’interno del nostro Database “nomeDatabase”.

Ovviamente, se la tabella già esiste sarà restituito un errore, che possiamo gestire all’interno della funzione passata come terzo parametro, oppure possiamo evitare l’errore a priori con una query del tipo:

var db = openDatabase(“nomeDatabase”, “1.0”, “IL mio primo database!”, 3 * 1024 * 1024);
db.transaction(function(tx){
	/* Effettuare le proprie query qui */
}, function(){
	//callback di successo
	tx.executeSql("CREATE TABLE IF NOT EXISTS Employees (id unique, name)");
	tx.executeSql("INSERT INTO Employees (id, name) VALUES (1, ‘Giacomo')");
});

Ora la tabella “Employees” ha un record al suo interno.

---

Come creare una #mobileapp: effettuare query in un #database #SQL lato-client
Click To Tweet

---

Come inserire un nuovo record in una tabella

Ma se volessimo inserire una riga mediante dei valori dinamici?

Ciò è possibile utilizzando il secondo argomento da passare al metodo executeSQL:

tx.executeSql(“INSERT INTO Employees (id, name) VALUES (?, ?) ”, [variabile_id, variabile_name] );

In questo modo le variabili “variabile_id” e “variabile_name” saranno sostituite ai caratteri “?” all’interno della query in modo sequenziale.

Come leggere i record di una tabella e processarli con il javascript

Infine, per eseguire query di lettura nella nostra tabella, basterà utilizzare la callback di ritorno processando i risultati ottenuti:

tx.executeSql('SELECT id, name FROM Employees', [  ], function (tx, resultsData) {
	//i record restituiti sono all’interno della proprietà “rows” dell’oggetto resultsData
	//loop per scorrere tutti i risultati ottenuti
	for (var i = 0; resultsData.rows.length < len; i++) {
		var employee = resultsData.rows.item(i);
		console.log(employee .name);
	}
});

La callback riceve due parametri di ritorno:

• l’oggetto della transazione (lo stesso che abbiamo usato per effettuare la query)
• l’oggetto javascript dei risultati contenente un attributo “rows” strutturato come un array, anche se non lo si può definire un’array a tutti gli effetti: per accedere ai dati di un singolo record dobbiamo utilizzare la sintassi “rows.item(i)“, dove “i” rappresenta l’indice del record  all’interno della lista dei risultati, mentre in un normale array sarebbe bastato scrivere “rows[i]”).

Dall’istruzione “var employee = resultsData.rows.item(i);” otteniamo quindi l’oggetto di un singolo record, che avrà le stesse proprietà dei campi richiesti nella query (nel nostro caso avrà quindi due proprietà: “id” e “name” );

Come creare un app: conclusioni sui metodi del Web SQL

Queste sono a grandi linee tutte le nozioni di cui abbiamo bisogno per sfruttare la maggior parte delle funzionalità del Web SQL.

Come ho spiegato nella prima parte di questa mini-guida, il Web SQL è un metodo molto utile per salvare dati in forma relazionale all’interno di qualsiasi single page application, sia quelle destinate ad essere compilate con strumenti come Phonegap e distribuite su dispositivi mobile, sia quelle che saranno disponibili come web app ed accessibili direttamente da un indirizzo remoto.

Personalmente trovo questo metodo di salvataggio molto utile per salvare le impostazioni personali dell’utente, come nel caso di Tint (la mia app per il meteo), o per salvare i dati sul dispositivo per quelle applicazioni che non devono essere sincronizzate in cloud, come ho fatto per Dieta SI o NO?.

Tuttavia va ricordato il fatto che le specifications del W3C hanno abbandonato il supporto al Web SQL a favore del database non-relazionale IndexedDB e, in un futuro molto prossimo, il Web SQL non sarà più supportato dai browser, inclusi quelli mobile.

---

Come creare una #mobileapp: i metodi del #database #SQL lato-client
Click To Tweet

---

Ed Ora?

Se hai mai utilizzato sistemi di memorizzazione come i database lato-client mi piacerebbe avere un tuo riscontro per quanto riguarda le tue reali esperienze, i tuoi progetti e/o reali case-study.

Sentiti libero/a inoltre di esporre tutti i tuoi dubbi o perplessità al riguardo, sia inviandomi una mail all’indirizzo info@upcreative.net, o meglio ancora, commentando questo articolo.

Molti sviluppatori javascript forse non ne sono a conoscenza, ma esiste un metodo per poter salvare i dati in un Database lato-client. Ciò significa che è possibile utilizzare database situati nel dispositivo dell’utente.

Esso costituisce un grande vantaggio nella realizzazione di HTML Mobile App e single page application in generale, anche se i database SQL lato-client possono essere utilizzati per qualunque sito web, in quanto si tratta di una funzionalità HTML5.

In un articolo che ho scritto per YourInspirationWeb.com, avevo riportato le varie modalità con cui è possibile salvare i dati per una HTML Mobile App sviluppata in CSS3 e Javascript: HTML Mobile App: Tecniche per il salvataggio dei dati.

In questo post prenderemo in considerazione il terzo metodo per il salvataggio dati esposto nell’articolo di YourInspirationWeb.com: il Database HTML5.

La maggior parte degli sviluppatori web è abituata a salvare i propri dati tramite metodi relazionali, utilizzando perlopiù database come mySql o MsSql, e chi si occupa dello sviluppo di Mobile App in HTML5, CSS3 e Javascript solitamente è prima di tutto un web designer impegnato nella realizzazione di siti web (tramite appunto questo tipo di database, come nel caso di sviluppatori WordPress).

Pertanto molti saranno contenti del fatto che per la creare mobile app è disponibile un metodo di salvataggio che sfrutta database lato-client.

Se infatti lato-server è possibile usare qualsiasi sorta di database, anche l’HTML mette a disposizione un tipo di database lato-client, che lo sviluppatore può sfruttare per poter inserire, modificare, cancellare e leggere i dati del proprio progetto sul dispositivo, secondo una metodologia relazionale, tramite vere e proprie query SQL.

Ma cosa intendo per “database lato-client“?

Per database lato-client intendo un tipo di database che risiede nel browser utilizzato dall’utente, grazie al quale possiamo evitare di dover comunicare con il server, come per esempio per mezzo di chiamate ajax.

---

Come creare una #mobileapp: salvataggio dati con #database #SQL lato-client
Click To Tweet

---

Come creare un app: due tipi di database lato-client

Lo sviluppatore ha a disposizione due tipi diversi di database lato client in HTML5:

• Web Sql (di tipo relazionale): mette a disposizione un modello di API che permettono di eseguire delle query tramite una variante di linguaggio SQL.
• IndexedDB (di tipo coppia chiave-valore): definisce un modello API con le quali è possibile lavorare in un database di record con valori semplici ed oggetti gerarchici.

Come per il localStorage, anche nel caso dei Database Web Sql ed IndexedDB  generalmente abbiamo a disposizione una capacità di memoria predefinita di 5MB, che può variare a seconda della versione del browser del dispositivo e delle impostazioni scelte dall’utente.

Come creare un app: la compatibilità dei database lato-client

Purtroppo nel momento in cui scrivo ci troviamo ancora in una terra al quanto instabile, per quanto riguarda i database lato-client: 

se da un lato il WebSql non sarà più mantenuto in modo attivo dalle specifications dello staff W3C (ecco il link alla pagina ufficiale w3c), il che significa che in un futuro molto prossimo sarà abbandonato, dall’altro l’IndexedDB non è ancora supportato da Mobile Safari per iOS, che invece supporta ancora il Web SQL (per la tabella delle compatibilità di IndexedDB visita questo link). Puoi consultare la pagina ufficiale w3c dell’IndexedDB collegati a questo indirizzo.

Siccome stiamo parlando di Mobile App, e siccome il numero di dispositivi Apple rappresenta una grandissima fetta dell’utenza mondiale (quindi una grandissima portata al livello di audience e possibilità di mercato), è opportuno secondo me lavorare ancora con il database WebSql, per dirigersi poi verso l’IndexedDB mano a mano che esso sarà supportato da tutti i dispositivi.

Tra l’altro, anche le versioni desktop di Chrome, Safari ed Opera supportano il WebSql, il che ci dà la possibilità di testare eventualmente il salvataggio dati anche su browser desktop, evitando di effettuare ogni volta il deploy nel dispositivo mobile.

L’indexedDB inoltre non è un modello di database relazionale.

Per ora prenderemo quindi in considerazione solamente il database WebSql.

---

Come creare una #mobileapp: salvataggio dati con #database #SQL lato-client
Click To Tweet

---

Come creare un app: Il database Web SQL

Abbiamo detto che il Database Web SQL permette di utilizzare l’SQL lato-client.

Quindi, se hai un background da programmatore back-end (come la maggior parte dei web designers) oppure sei un programmatore front-end con nozioni di back-end, non avrai problemi con l’SQL, altrimenti apprendere l’SQL sarà uno stimolo per poter imparare una nuova competenza.

La sintassi del Web Sql è basata sull’SQLite, ma è molto similare anche ad altri database relazionali com MySql, MSSql e via dicendo.

Come si usa

Vediamo le nozioni principali del Web SQL (ovviamente se vuoi approfondire l’argomento, dal nostro caro “amico Google” potrai trovare tutte le informazioni che ti interessano).

Per sfruttare le funzionalità del Web SQL e poter salvare i dati della nostra applicazione in un database lato-client, sono 3 i metodi da prendere principalmente in considerazione:

• openDatabase
• transaction
• executeSql

Come creare un app: il database SQL lato client parte 1 – conclusioni

Nella seconda parte di questa guida analizzeremo come poter utilizzare le funzionalità principali del Web SQL tramite i 3 metodi appena elencati, che ci forniscono tutto ciò di cui abbiamo bisogno per poter creare nuovi database e stabilire una connessione con quelli già esistenti, oppure effettuare altre operazioni fondamentali come la creazione di tabelle, l’inserimento, la modifica o la cancellazione di records.

E tu? Hai mai utilizzato i database lato-client per i tuoi progetti?

Magari l’hai utilizzata per salvare qualche tipo di dato, oppure pensi che potrebbe essere una possibile soluzione per il tuo prossimo progetto. Scrivi pure tutte le tue considerazioni e/o perplessità al riguardo nei commenti, e sarò lieto di aiutarti a capire se il Web SQL potrebbe essere implementato nei tuoi lavori.

Per creare una Mobile App in HTML o una qualsiasi web app javascript è fondamentale organizzare il progetto secondo una struttura ben adeguata, evitando di produrre codice secondo la “non-logica” Spaghetti Code (leggi questo articolo per saperne di più).

Come già affrontato in altri numerosi post, adottare una logica di sviluppo basata sull’MVC può aiutare notevolmente lo sviluppatore a raggiungere tale obiettivo.

Un altro metodo molto utile per mantenere il codice scalabile e mantenibile, oltre che aumentare le performance dell’applicazione, consiste nell’utilizzo di sistemi di Javascript templating in stretta relazione con le view, che si occupano della rappresentazione visiva dei vari componenti dell’interfaccia.

I sistemi di templating Javascript consentono infatti di generare il markup dinamico di una determinata view (leggi questo articolo che ho scritto per YourInspirationWeb  per sapere come utilizzare una view con backbone.js) in base ai dati che gli vengono passati al momento della compilazione.

Prima di entrare più nel dettaglio, vediamo quali sono solitamente le alternative adottate per la generazione di markup in una Mobile App sviluppata in HTML5, CSS3 e Javascript.

---

Come creare #MobileApp in #HTML5: il sistema di #javascript templating
Click To Tweet

---

Creare Mobile App in HTML: come viene generato solitamente il markup

Siccome in una HTML5 Mobile App tutta la generazione del markup e degli elementi DOM dell’interfaccia avviene tramite linguaggio lato-client, e quindi tramite javascript, generalmente si tende a seguire 3 strade principali per inserire il codice HTML di ogni schermata (o view) all’interno del progetto:

1 – Effettuare chiamate ajax che restituiscono dati HTML da un server remoto.

Rappresenta secondo me il tipo di approccio più sbagliato.

Stiamo parlando di applicazioni mobile e ciò comporterebbe il trasferimento di una grande quantità di dati e tempi di attesa più lunghi, soprattutto se l’utente sta usando l’applicazione in una zona fisica in cui il traffico è limitato o quasi assente.

Senza contare il fatto che il codice restituito (stringa formata dall’HTML generato dal server) risulta difficile da interpretare per l’applicazione JavaScript, e solitamente necessita di un’adeguata formattazione prima dell’immissione all’interno del documento.

La comunicazione in remoto dovrebbe essere pertanto utilizzata solo al fine di reperire o inviare dati “puri” (come per esempio un oggetto JSON).

2 – Inserire l’HTML di tutte le schermate nel documento

Per creare una Mobile App in HTML si utilizza un file principale index.html. 

Secondo questo metodo all’interno di quel file viene inserito tutto il markup necessario per far funzionare l’applicazione, relativo a alle varie view che la compongono.

Può andar bene per progetti formati al massimo da 4/5 schermate, dopo di ché diventa facile smarrirsi nei meandri del codice HTML come un bambino di 3 anni in un bosco.

Se poi consideriamo il fatto che in quelle view possiamo avere la necessità di inserire dati dinamici, per aggiungerli al DOM dovremmo comunque servirci di codice Javascript, utilizzando così non uno, ma due tipi di approcci diversi per lo stesso scopo (1 – html statico, 2 – generazione di markup via javascript).

Inoltre, inserire tutti i nodi DOM all’interno del documento riduce notevolmente le prestazioni di rendering, a causa del numero di elementi HTML per i quali la CPU è costretta a ricalcolare gli stili nel momento in cui si verifica qualsiasi modifica CSS, oppure ogni volta che un elemento si sposta nello schermo (quando ciò questo accade vengono coinvolti nello spostamento anche altri nodi del documento).

3. Generare codice tramite javascript con una concatenazione di stringhe

E’ provato che creare grandi blocchi di codice HTML tramite una concatenazione di stringhe riduce drasticamente la velocità per le prestazioni di esecuzione, in quanto la variabile in-memory utilizzata per svolgere tale operazione va ad occupare parte della CPU.

Coloro che adottano questa tecnica inoltre, si perdono spesso in cicli nidificati in cui non si capisce quale tag chiude l’altro, e dove non si riesce a distinguere dati puri dall’HTML.

Ecco un possibile esempio di questa tecnica:

var markup = "<div class=\"main-wrapper\">"+
				"<header class=\"page-header\" role=\"header\"><h1 class=\"\"></h1></header>"+
				"<section class=\"page-section\"></section>"+
				"<ul class=\"contacts-list\">";

			for(var i=0;i<contacts.length;i++){
				markup+="<li class=\"contact-list-item\">"+contacts[i].name+" "+contacts[i].surname+"</li>";
			}

			markup+="</ul></div>";

$(".content").append(markup);

 

E’ preferibile invece lasciare libera la memoria del dispositivo per le operazioni di rendering, che influiscono sulla user-experience del prodotto finale, così come è preferibile lasciare separati codice HTML da codice Javascript, in modo da aumentare la mantenibilità e la scalabilità del progetto e poter facilmente riutilizzare uno stesso template in diverse parti.

Creare Mobile App in HTML: il funzionamento dei sistemi di templating

Gli sviluppatori javascript hanno a disposizione diversi framework di templating per generare via client il markup HTML delle view che compongono le loro applicazioni (come per esempio Handlebars.js, Mustache, o il sistema interno al framework underscore.js).

Per conoscere anche altri sistemi di javascript templating, ti consiglio di leggere questo mio precedente articolo:

• I sistemi di javascript templating e le migliori librerie

I template possono essere savat in variabili in-memory, in file HTML indipendenti o all’interno del documento, solitamente racchiusi in tag <script> con un attributo “type” personalizzato (per esempio “text/template”:  “<script type=“text/template”> <!– markup del template —> </script>”).

---

[Tweet “Come creare #MobileApp in #HTML5: il sistema di #javascript templating
Click To Tweet

---

“]

Ogni template ha accesso a delle variabili, a seconda dei dati che gli vengono passati.

Utilizzare le variabili è molto semplice e generalmente è possibile farlo all’interno di appositi delimitatori, il cui funzionamento non è molto diverso da quello della generazione del markup HTML dinamico tramite i più diffusi linguaggi lato-server (ASP, PHP, C# ecc.).

Il lavoro è reso ancora più facile per il fatto che la maggior parte di questi sistemi accetta dati in formato JSON (formato in cui può essere convertito facilmente qualsiasi tipo di dati).

I delimitatori delle variabili possono differire a seconda del framework utilizzato, ma il funzionamento logico rimane pressoché sempre lo stesso.

Due sono le categorie principali in cui si suddividono i vari tipi di sistemi di templating:

• embedded javascript, comprende i frameworks che permettono l’utilizzo di codice javascript all’interno dei propri template
• logic less, comprende quelli che non permettono l’utilizzo di javascript al loro interno, ma limitano l’uso di logiche come cicli e condizioni a sintassi personalizzate

Vediamo il funzionamento del sistema di templating di underscore.js, che appartiene alla prima categoria, e che può essere utilizzato per creare mobile app in html con il framework MVC Backbone.js.

Più concretamente, vediamo l’esempio di un ciclo che genera in maniera dinamica l’HTML necessario per mostrare una lista di individui.

Consideriamo di dover generare il markup della lista servendoci dei seguenti dati in formato JSON:

{
	'employees': [
		{‘name': ‘Giacomo Freddi’, occupation: ‘Web Designer / Front-End Developer’},
		{‘name': ‘Mario Rossi’, occupation: ‘CEO’},
		{‘name': ‘Franco Mancini’, occupation: ‘Web Marketer’},
		...
	]
}

Ecco come potrebbe presentarsi il template secondo il sistema di templating di underscore.js

<ul>
   <%for(var i=0;i<employees.length;i++){%>
   <li><%=employees[i].name%> - <%=employees[i].occupation%></li> 
   <%}%>
</ul>

In tal caso il risultato del markup generato sarebbe:

<ul>
   <li>Giacomo Freddi - Web Designer / Front-End Developer</li>
   <li>Mario Rossi - CEO</li>
   <li>Franco Mancini - Web Marketer</li>
   …
</ul>

Con i javascript templating lo sviluppatore ha sicuramente una cosa in meno a cui pensare, in quanto la maggior parte del lavoro di generazione del markup viene svolto dal sistema stesso.

Creare mobile app in HTML: i benefici del sistema di templating

Ciò porta ad un gran numero di benefici nel creare mobile app in HTML o qulasiasi single page application, in particolare se si decide di salvare i template di ogni view all’esterno del documento principale dell’applicazione (index.html), inserendo ognuno di essi in un apposito file (es.: nome-della-view.html).

Il contenuto del file viene poi caricato dinamicamente, solamente se e quando abbiamo bisogno di effettuare il render di quella view all’interno dell’interfaccia.

Quello appena esposto è il metodo che preferisco, in quanto permette di separare completamente all’interno del progetto il concetto di templating da tutto il resto (sinonimo di mantenibilità e scalabilità) e, nel senso più “fisico” del termine, ogni view dall’altra.

Così facendo è possibile mantenere la struttura dei file dell’applicazione ancora più organizzata.

Bisogna comunque  fare attenzione al fatto che i template non rappresentano di per sé delle view, bensì lo strumento grazie al quale esse possono effettuare il render del markup HTML che le rappresenterà all’interno del documento. Molti sviluppatori spesso confondono il concetto di view con quello di template, ma non sono assolutamente la stessa cosa.

Una view è un oggetto che che osserva un modello dati (in MVC i cosiddetti model) e mantiene la propria rappresentazione visiva aggiornata in base ad esso. Una view è definita da codice Javascript.

Il template potrebbe essere lo strumento di cui si serve la view per generare parte del proprio markup necessario alla visualizzazione, o di tutto il markup necessario.

---

Come creare #mobileapp in #HTML5 – i benefici del #javascript #templating
Click To Tweet

---

Conclusioni

Oltre che per creare mobile app in HTML o qualsiasi altro tipo di web app sviluppata in HTML, CSS3 e Javascript, i sistemi di templating sono molto utilizzati anche per la realizzazione di siti web che forniscono una user-experience di qualità molto elevata.

Solitamente gli sviluppatori front-end più affermati si servono di sistemi di javascript templating per generare markup da template salvati in file .html esterni, o dichiarati all’interno della pagina in appositi script personalizzati.

E tu hai mai utilizzato i sistemi di javascript templating? Ne hai privato qualcuno da suggerire? Scrivilo nei commenti e sarò felice di risponderti!

Più volte ho discusso l’importanza di usare i pattern di sviluppo MVC nella realizzazione di applicazioni web ed HTML5 Mobile App realizzate in Javascript e CSS3: scrivere codice come capita e senza alcuna logica può andar bene per progetti di piccolissime dimensioni o singole pagine web, ma se stiamo parlando di una single page application, quindi un’applicazione in cui il codice lato-client gestisce, oltre ai dati, anche la generazione di markup, il discorso cambia.

 

Spaghetti code

E’ ciò che dobbiamo evitare in quei casi. In altre parole dobbiamo evitare di sviluppare single page application e web app senza un’architettura logica che ci consenta di scrivere codice ben organizzato, facilmente leggibile, mantenibile e riusabile.

Questo è lo scopo principale dei metodi di sviluppo MVC.

Abbiamo visto quanto possono essere importanti le view nel web in generale e perché considerare di usare un framework javascript MVC per la realizzazione di HTML5 Mobile App.

In un post che ho scritto per YourInspirationWeb, metto in evidenza l’importanza dell’impiego delle view in ambito web ed il perchè esse sono così importanti:

• HTML5 Mobile App: il web ha bisogno delle view

---

#HTML5 #MobileApp definire la struttura dati con #backbonejs
Click To Tweet

---

HTML5 Mobile App: MVC per rendere il javascript mantenibile e riusabile

Per molti anni il pattern di sviluppo MVC è stato usato in moltissimi linguaggi di sviluppo. Al giorno d’oggi, tutti i web designer e front-end developer hanno già cominciato da qualche tempo ad applicare la logica MVC al linguaggio che per noi risulta più rilevante: il Javascript.

Con il Javascript abbiamo a disposizione diversi tipi di frameworks che offrono supporto per l’MVC nelle sue numerose variazioni ( la famiglia di pattern MV*), permettendoci di estendere la struttura delle nostre applicazioni senza troppe difficoltà.

Alcuni dei frameworks più famosi possono essere per esempio Backbone o AngularJS. Il loro ruolo è fondamentale, in quanto consentono allo sviluppatore di evitare la scrittura del codice in modalità Spaghetti code. Pertanto è importantissimo capire di cosa possiamo beneficiare con un adeguato pattern di programmazione.

In un precedente articolo avevo spiegato come realizzare una semplice HTML5 Mobile App con Backbone.js:

• Semplice HTML5 Mobile App con Bootstrap Ratchet e Backbone.js

In questo capitolo ti voglio mostrare più nel dettaglio una delle parti che compongono l’acronimo MVC: il model (o modello).

Lo farò in relazione ad uno dei sopra citati framework MVC, ovvero Backbone.js, che è proprio quello che approfondiremo per la realizzazione di HTML5 Mobile App.

Gestire i dati con il model per una HTML5 Mobile App

I modelli costituiscono i dati dell’applicazione.

Un modello può rappresentare per esempio un individuo, una nota, un articolo, un libro, o qualunque altra entità che possa avere 1 o più caratteristiche (nome, cognome, sesso, codice ISBN, matricola, colore, ecc..).

I modelli possono essere visti in modo completamente separato dagli elementi che compongono l’interfaccia-utente, anche se quando un modello subisce delle modifiche, esso normalmente avvisa gli “osservatori” (altre parti della struttura come per esempio le view – viste ) che si è verificato un cambiamento, permettendogli di agire di conseguenza.

Facciamo un esempio concreto al fine di comprendere meglio i modelli. Più nello specifico, prendiamo come punto di riferimento Tint, la mia applicazione per il meteo.

In una normale applicazione meteo, il concetto di località ha bisogno di un suo modello che la rappresenti come un tipo di dato unico, con delle specifiche caratteristiche, che possono essere il nome (città o luogo), la latitudine, la longitudine, il paese di appartenenza ed altri possibili dati aggiuntivi.

Una specifica località potrebbe essere salvata nell’istanza di un model, che sarebbe accessibile e riusabile in più parti dell’applicazione.

Vediamo la definizione di un semplice modello che rappresenta il tipo di dati “località” con Backbone.js:

var LocationModel = Backbone.Model.extend({

	initialize:function () {
	//ci assicuriamo che ogni modello appena creato abbia un ordine numerico
	if( isNaN ( this.get(“order”) ) )
		this.set( {“order”, 0 } );
	},

	//dati predefiniti per la località

	defaults:{
		defaultLocation: false,
		userLocation: false,
		viewed: false
	}

});

---

#HTML5 #Mobileapp come definire un model con #Backbonejs
Click To Tweet

---

La funzionalità integrate dei modelli variano a seconda del framework utilizzato, ma generalmente tutti i framework danno la possibilità di definire gli attributi, ovvero le proprietà di ogni modello, (come per esempio la cilindrata, il colore, la gamma o la marca per un ipotetico modello “macchina da strada”).

Backbone, come molti altri MVC frameworks, offre anche la possibilità di salvare i dati secondo varie modalità, come per esempio il localStorage o la sincronizzazione con un database.

Per avere maggiori informazioni sul metodo di salvataggio dei dati, ti consiglio di leggere  questo articolo che ho scritto per YourInspirationWeb.com:

• HTML5 Mobile App: tecniche per il salvataggio dei dati

Gli osservatori dei modelli

Un modello può avere anche diverse view (parti visuali dell’interfaccia) che lo stanno “osservando”, pronte a reagire ad eventuali cambiamenti.

Ritornando all’esempio di Tint, ogni località presenta la lista dei giorni e relativo meteo, oltre che una lista di orari, anch’essi ciascuno con la relativa condizione meteo.

L’applicazione usa 3 diverse view per ognuna delle località:

• la view per mostrare i dati principali e il meteo attuale del luogo
• la view per mostrare il meteo nelle prossime ore della giornata
• la view per mostrare il meteo nei prossimi giorni della settimana

Tutte le view sopra elencate risultano “associate” allo stesso modello, e osservano eventuali cambiamenti che lo stesso può avere.

Backbone.js e HTML5 Mobile App: le collection

Nella maggior parte dei framework MV*, i modelli possono essere organizzati in gruppi: con Backbone.js tali gruppi vengono chiamati “Collection” (o collezioni).

Gestire i modelli in collezioni aiuta a sviluppare applicazioni secondo una logica che permetta non osservare ciascun modello individualmente, ma reagire di conseguenza a qualunque modello che subisce delle modifiche in maniera “centralizzata”.

Per comprendere meglio questo concetto, prendiamo di nuovo l’esempio su Tint: consideriamo 2 view in particolare, tra quelle che compongono l’interfaccia:

• la view ManageLocations: quella che consente di aggiungere, eliminare o modificare l’ordine delle località
• la view Locations: che viene mostrata subito dopo l’avvio dell’applicazione ed offre all’utente la possibilità di scorrere orizzontalmente le varie località secondo l’ordine con cui esse sono state organizzate nella prima view menzionata. Questa view si preoccupa di creare per il modello di ogni località presente nella collection la relativa “sotto-view” inserendola al suo interno.

L’applicazione è impostata in modo tale che la view “Locations” osservi i cambiamenti della collezione “LocationCollection”, la quale contiene tutti i modelli di ciascuna località aggiunta dall’utente, oltre a quella relativa alla sua posizione.

Così, non appena un‘utente aggiunge, elimina o modifica l’ordine di una località usando la view delle impostazioni (ManageLocations), la view Locations aggiunge la view associata al nuovo modello, rimuove quella del modello eliminato, o, qualora si trattasse di un riordinamento, reinizializza lo slider orizzontale.

 

Di seguito ti mostro l’esempio della definizione di una Collection di località tramite Backbone.js, che ho usato per Tint:

var LocationCollection = Backbone.Collection.extend({

	//definisce a quale modello di riferisce la collezione
	model: LocationModel,

	//definisco che il metodo di salvataggio per collection debba essere il localStorage (voglio salvare tutte le località aggiunte dall’utente nel dispositivo,
	//in modo da potergliele ripresentare al prossimo avvio)
	localStorage: new Backbone.LocalStorage("Parallax_Weather-locations"),

	//funzione che ho usato per generare in modo sequenziale l’ordine di ogni nuovo model,
	//per far sì che possa essere aggiunto all’ultimo posto

	nextLocation: function(newModel) {
		if (!this.length) return 1;
		return this.last().get('order') + 1;
	},

	//definisco la modalità di ordinamento dei modelli, in questo caso in base all’attributo ‘order'
	comparator: function(location) {
		return location.get("order");
	}

});

---

#HTML5 #MobileApp definire un #collection con #Backbonejs
Click To Tweet

---

Conclusioni

L’astrazione dei dati è un fattore fondamentale nella realizzazione di qualsiasi progetto web, e lo diventa ancora di più nel caso di HTML5 Mobile App sviluppate in CSS3 e Javascript.

Grazie ai numerosi framework MVC (e tutte le varianti dell’MVC, solitamente indicate con MV*) è possibile organizzare i dati di un progetto secondo una struttura logica che consenta di modificarli facilmente, oltre che separare totalmente la loro gestione da quella dell’interfaccia e della user-experience, di cui solitamente si occupano altri componenti come view e controllers.

E tu? Cosa pensi dei javascript framework MVC? Fammelo Sapere nei commenti!

Nonostante non sia d’accordo con l’idea di utilizzare un framework esterno “per intero” nello sviluppo di HTML Mobile App, sono comunque convinto che attingere CSS e stili da alcuni di essi possa notevolmente incrementare la qualità del prodotto finale e velocizzare il flusso di lavoro, evitando di reinventare ogni volta la ruota.

In un precedente articolo avevo parlato di 8 mobile framework per la realizzazione di applicazioni mobile in HTML5, CSS3 e Javascript, in cui ho inserito anche Ratchet, che offre stili CSS3 molto puliti ed un markup in linea con le moderne specifiche HTML5.

Dopo che lo scorso mese nel blog di Twitter Bootstrap è stato annunciato che Ratchet 2.0  farà parte d’ora in poi dell’organizzazione Bootstrap, ho deciso di rilasciare l’esempio di una semplice HTML5 Mobile App sviluppata con Backbone.js usando gli stili (e solo gli stili) di questa nuova versione di Ratchet, la quale quale offre 3 ottimi skin di partenza: quello di base, quello stile iOS, e quello stile Android.

Cosa desideriamo di meglio?

L’intento è quello di realizzare una view iniziale con un header, un sub-header contenente un input di ricerca, ed il contenitore per mostrare una lista di articoli; grazie all’input di ricerca l’utente può filtrare i contenuti della lista.

L’applicazione è quindi composta da 3 backbone view:

• la prima rappresenta la schermata principale contenente header e sub-header
• la seconda rappresenta la view della lista
• la terza rappresenta ogni articolo che dovrà essere inserito nella lista

Come nello scorso esperimento, lavoreremo sempre con model e collection per definire rispettivamente il modello di articolo e la collezione per la lista degli articoli.

Ecco lo schema del funzionamento dei vari componenti che formano la nostra HTML5 Mobile App:

---

Semplice #HTML5 #MobileApp con #Bootstrap #Ratchet e #Backbonejs
Click To Tweet

---

Trovi le DEMO dei 3 diversi stili ed il DOWNLOAD alla fine di questo articolo!

HTML5 mobile app: impostazione del documento

Come prima cosa andiamo a scaricare lo zip di Ratchet dal sito ed includiamo nel nostro documento solo gli stili CSS ed il font per le icone. Per usare lo stile base dovremo includere solo il file ‘ratchet.css‘ o ‘ratchet.min.css‘, mentre per gli stili iOS o android dovremo aggiungere anche i rispettivi file ‘ratchet-theme-ios.css‘ o ‘ratchet-theme-android.css‘.

Ecco l’esempio per l’utilizzo del tema iOS:

<!-- includiamo gli stili di base di  Ratchet.css  -->
<link href="css/ratchet/css/ratchet.css" rel="stylesheet">

<!-- includiamo gli stili iOS di  Ratchet.css  -->
<link href="css/ratchet/css/ratchet-theme-ios.css" rel="stylesheet">

Poi inseriamo nel documento le varie librerie javascript, prima della chiusura del tag </body> in modo da velocizzare il caricamento della pagina:

<!-- Includo gli scripts in fondo alla pagina per velocizzarne il caricamento -->
<script src="js/jquery-1.10.2.min.js"></script>
<!-- Includiamo anche underscore.js libreria a cui si appoggia backbone.js -->
<script src="js/underscore.js"></script> 
<script src="js/backbone.js"></script>    
<!-- il file javascript del nostro esperimento-->
<script src="js/demo.js"></script>

Definizione di model e collection

Vediamo come definire il model e la collection deli articoli:

//definiamo il modello di un articolo
var ArticleModel = Backbone.Model.extend({

    // all'inizializzazione di ogni modello creiamo la relativa anteprima
    initialize: function(){
        var article = this.get("article");
        this.set("preview", article.substr(0, 70)+"...");
    },

    // Attributi predefiniti per il modello, che vengono usati 
    //se non passati al momento dell'inizializzazione    
    defaults: {
        id: new Date().getUTCMilliseconds(), //impostiamo un id univoco in base alla data 
        title: "Nessun titolo",
        article: "",
        image: false,
        createdat: new Date()
    } 
});

//definiamo la collection per la lista degli articoli
var ArticleList = Backbone.Collection.extend({ 
    //Impostiamo la referenza al model per questa collection.
    model: ArticleModel,

    //funzione che restituisce il numero seriale per l'id di ogni nuovo articolo
    nextId: function() {
        if (!this.length) return 1;
        return this.first().get('test') + 1; 
    },

    //la funzione per la ricerca, che restituisce solo i models degli articoli
    //che contengono il termine ricercato nel titolo (la usaeremo per la ricerca)
    search : function(term){
        if(term == "") return this;

        var pattern = new RegExp(term,"gi");
        return _(this.filter(function(data) {
            return pattern.test(data.get("title"));
        }));
    }
});

Le view

Ecco come si presenta la view principale:

//definiamo la view principale della nostra app
var StartView = Backbone.View.extend({

    // comunichiamo a backbone che deve inserire il markup del template di questa view all'interno di un oggetto dal tag 'section'
    tagName:  "section",

    //settiamo la classe che deve avere il tag 'section'
    className: "page-wrapper",

    //impostaiamo l'id del template da cui generare il markup di questa view
    template: "#startview-template",

    initialize: function() {

        //compiliamo il template in una variabile
        this.template = _.template($(this.template).html());

        //inizializziamo la view della lista degli articoli
        this.resultsView = new ListView({collection: this.collection});
    },

    //funzione che genera il markup di questa view
    render: function () {
        this.$el.html(this.template()); //genero l'html di questa view 
        //inserisco l'html della view dei risultati ti ricerca nella div con classe '.content' presente in questa view
        this.$('.content').append(this.resultsView.render().el); 
        return this;
    },

    // Deleghiamo gli eventi per la ricerca sull'input di testo 
    events: {
        //evento //selettore    //funzione da eseguire
        "keyup .search-term":    "search",
        "keypress .search-term": "onkeypress"
    },

    //funzione che richiama il methodo 'renderList' della view della lista ad ogni keyup sull'input di ricerca
    search: function (e) {
        var term = $(e.currentTarget).val();
        //se il termine non è vuoto allora richiamo il 'renderList' passando i dati filtrati,
        //altrimenti richiamo il render per mostrare la lista intera
        if(term!="") 
            this.resultsView.renderList(this.collection.search(term));
        else
            this.resultsView.render();
    },

    onkeypress: function (e) {
        if (e.keyCode === 13) { // preveniamo il normale evento di invio con il pulsante 'Enter'
            e.preventDefault();
        }
    }
});

Avremmo potuto anche “unificare” entrambe le view (quella principale e quella del contenitore della lista) in un unica view, ma lasciandole separate riusciamo ad ottenere un progetto più scalabile e dinamico: potremmo per esempio inserire nell’elemento ‘.content‘ della view principale qualsiasi altra view, oltre a quella della lista. Ciò ci permetterebbe di usare la view principale per più di uno scopo.

Ora vediamo la view del contenitore della lista, che sarà applicata appunto all’interno dell’elemento DOM con classe ‘.content‘ della view principale:

//view per la lista degli articoli (viene inizializzata all'interno della view 'StartView')
var ListView = Backbone.View.extend({

    // comunichiamo a backbone che deve inserire il markup del template di questa view all'interno di un 'ul'
    tagName:'ul',

    //questa view non ha bisogno di template, perchè viene popolata con le varie view 'ListItemView'
    //relative ad ogni model presente nella collection

    //impostiamo la classe che deve avere il contenitore di questa view
    className:'table-view',

    initialize:function () {

    },

    //funzione per mostrare la lista completa all'avvio dell'ìapplicazione
    render : function(articles){
        var _this = this;   
        this.$el.empty(); 

        //per ogni elemento della collection creiamo una nuova view
        this.collection.each(function(task){
            var view = new ListItemView({ model: task });
            _this.$el.append(view.render().el);
        });
        return this;
    },

    //funzione che viene richiamata al momento della ricerca, alla quale vengono passati i model che 
    //soddisfano la ricerca
    renderList : function(articles){
        var _this = this;        
        this.$el.empty(); 

        //anche qui per ogni model creo la relativa view
        articles.each(function(task){
            var view = new ListItemView({ model: task });
            _this.$el.append(view.render().el);
        });
        return this;
    }

});

Questa view si preoccupa di mostrare inizialmente tutti i model (quindi gli articoli) presenti all’interno della collection, mentre tramite il metodo ‘renderList‘ mostra solamente la lista di articoli che viene passata come parametro. Tale metodo viene richiamato dalla view principale al momento in cui si verifica l’evento ‘keyup‘ sull’input di ricerca.

Per mostrare i risultati al suo interno, la view della lista provvede alla creazione di una nuova view ‘ListItemView‘ per ogni model degli articoli, sia all’interno del metodo ‘render‘ che del metodo ‘renderList‘:

//view per ogni elemento da inserire nella lista dei risultati degli articoli (viene inizializzata all'interno della view 'ListView')
var ListItemView = Backbone.View.extend({

    //il tag da usare per il contenitore del markup
    tagName:"li",

    //la classe da associare al contenitore del markup
    className: "table-view-cell",

    //impostaiamo l'id del template da cui generare il markup di questa view
    template: "#listitemview-template",

    initialize:function () {

        //compiliamo il template in una variabile
        this.template = _.template($(this.template).html());

        //se il model associato subisce delle modifiche allora richiamiamo il render per aggiornare il markup 
        //(non usato in questa demo)
        this.model.on("change", this.render, this);
        //se il model associato viene eliminato, allora richiamiamo la funzione 'close' che ne rimuove il 
        //relativo DOM dal documento (non usato in questa demo)
        this.model.on("destroy", this.close, this);
    },

    //genriamo il markup passando al template compilato i dai del model dell'articolo in formato JSON
    render:function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    close: function(){
        //elimina il DOM di questa view dal documento ed annulla gli eventi applicati nella funzione 'initialize'
        this.remove();
    }

});

I template e la generazione del markup

Come al solito utilizziamo il sistema di templating di underscore.js per la generazione del markup di ogni view, considerando che la view della lista non ha bisogno di un template, perché come abbiamo visto il markup da inserire al suo interno è costituito dalle varie view degli articoli.

Per avere maggiori informazioni sui sistemi di Javascript templating, ottimi per progetti di tipo “Single-Page-Application“, ti consiglio di leggere questo mio precedente articolo:

• I sistemi di Javascript templating e le migliori librerie

Vediamo quindi i due template da inserire all’interno del documento:

<!-- template per la view di ogni elemento all'interno della lista dei risultati di ricerca (ListItemView su demo.js) -->
<script type="text/template" id="listitemview-template">

	<a href="#" data-id="<%= id %>" class="push-right">
	    <span class="badge">
	    	<%=createdat.getDate()%> / <%=createdat.getMonth()+1%>
	    </span>
	    <%if(image){%>
		<img class="media-object pull-left" src="images/<%=image%>" />
		<%}%>
	    <div class="media-body">
	        <%= title %>
	        <p><%= preview %></p>
	    </div>
	</a>

</script>

<!-- template per la view del contenuto iniziale  (StartView su demo.js) -->
<script type="text/template" id="startview-template">

	<header class="bar bar-nav">
		<button class="btn btn-link btn-nav pull-left" onclick="window.location.href='http://www.upcreative.net/iscriviti-alla-newsletter/'">
		    Altre guide
		</button>
	    <h1 class="title">Ultimi Articoli</h1>
	    <button class="btn btn-link btn-nav pull-right" onclick="window.location.href='http://www.upCreative.net'">
		    upCreative.net
		</button>
	</header>
	<div class="bar bar-standard bar-header-secondary">
	    <input class="search-term" placeholder="Cerca articoli" type="text"/>
	</div>
	<div class="content"></div>

</script>

Avviamo l’applicazione

Una volta impostati tutti i componenti necessari, passiamo all’avvio dell’applicazione, inizializzando una nuova collection per gli articoli con dei dati iniziali:

$(function(){

	//creiamo una nuova istanza per la collection degli articoli con 4 models iniziali
    var articles = new ArticleList([
        {
            title: "App su upCreative.net",
            image: "1.jpg",
            article: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
            title: "Secondo articolo su upCreative.net",
            image: "2.jpg",
            article: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur"
        },
        {
            title: "Articolo senza immagine 3",
            image: "3.jpg",
            article: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Quarto articolo sulla  lista",
            image: "4.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Quinto articolo sulla  lista",
            image: "5.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Sesto articolo sulla  lista",
            image: "1.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Settimo articolo sulla  lista",
            image: "2.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        }
    ]);
    //creiamo una nuova istanza per la view iniziale 
    //associandogli la collection appena creata e popolata
    var startView = new StartView({
        collection : articles
    });
    $("body").append(startView.render().el);

});

Backbone.js e Ratchet HTML5 mobile app: il risultato

Vediamo il risultato live nei 3 skin differenti offerti da Ratchet:

Stile di base

Stile di iOS

Stile di Android

Aiutami a condividere la risorsa per ottenere il download:

Nella realizzazione di applicazioni mobile in HTML5, CSS3 e Javascript o qualunque tipo di web app, il modo in cui viene organizzata la struttura del progetto gioca un ruolo fondamentale dal punto di vista del risultato finale. Fattori come fluidità, prestazioni e qualità della user-experience, ma anche la velocità di sviluppo, sono incredibilmente influenzati dal mondo in cui suddividiamo i vari componenti dell’interfaccia.

Vale la pena pertanto dedicare un’attenzione particolare a questo aspetto.

Quando parliamo di “struttura” di un’applicazione ci riferiamo generalmente al modo in cui vengono organizzati gli elementi che la compongono per poter interagire in modo logico tra di loro. Uno dei pattern (o logiche di organizzazione) più comuni per gestire questi tipi di elementi è il pattern MVC, che basa la sua logica su elementi come viste (view), modelli (model) e collezioni di modelli (collection).

Per approfondire il discorso del pattern MVC e dei framework di cui ci possiamo servire per implementarli al meglio nei nostri progetti, ti consiglio di leggere questo mio articolo :

• Creare applicazioni web: il pattern MVC ed i principali framework Javascript

Ho realizzato oltre 10 applicazioni mobile per i miei clienti, tra cui due progetti personali (Tint Weather App e Dieta SI o NO?) e gran parte di essi sono stati sviluppati con il pattern MVC grazie al Framework Backbone.js abbinato al sistema di templating di Underscore.js, che rendono molto più semplice lavorare con la logica MVC.

Il sistema di templating è una libreria utile per la generazione di markup HTML via client (quindi tramite javascript) combinando dei dati (generalmente in formato JSON) con un template precedentemente compilato. Per avere maggiori informazioni sui sistemi di templating ti consiglio di leggere questo articolo:

• Web Application: i sistemi di templating e le migliori librerie

In questo articolo ti voglio mostrare come poter realizzare una semplicissima HTML5 Mobile App di base, con Bakcbone.js e delle animazioni CSS3 fluide e performanti, che sfruttano la tecnica dell’accelerazione hardware.

---

Come creare una #HTML5 #MobileApp con #Backbonejs ed il pattern #MVC
Click To Tweet

---

HTML5 Mobile App: l’obiettivo finale

L’obiettivo di questo esperimento è quello di capire il meccanismo di views, models e collection realizzando una semplicissima mobile app che mostra una serie di articoli (o news) su una lista, permetta di aggiungere nuovi articoli programmaticamente, e visualizzare il dettaglio di quelli cliccati nella lista attraverso una view che a comparsa che “entra in scena” grazie ad animazioni CSS3 performanti.

Se se un web designer e vorresti creare la tua applicazione in HTML5, CSS3 e Javascript, forse ti potrebbe interessare il mio e-book: HTML Mobile Accelerato

Trovi DEMO e DOWNLOAD in fondo all’articolo.

Impostazione del documento

Come prima cosa includiamo nel documento le librerie di cui abbiamo bisogno; in particolare all’interno del tag <body> inseriamo il link alla libreria Modernizr, che ci servirà per gestire l’evento di fine animazione (‘endanimation‘) di entrata per la view che mostra i dettagli dell’articolo (per approfondire il discorso di come controllare le animazioni con Modernizr, di consiglio di leggere questo articolo).

<head>
 <script src="js/modernizr.custom.js"></script>
</head>

Proseguiamo includendo prima della chiusura del body (</body>) le altre librerie:

<!-- Includo gli scripts in fondo alla pagina per velocizzarne il caricamento -->
 <script src="js/jquery-1.10.2.min.js"></script>
 <!-- Includiamo anche underscore.js libreria a cui si appoggia backbone.js -->
 <script src="js/underscore.js"></script> 
 <script src="js/backbone.js"></script>    
 <!-- il file javascript del nostro esperimento-->
 <script src="js/demo.js"></script>

Il markup HTML

Vediamo ora come impostare il markup HTML all’interno del documento:

<!-- header della schermata -->
<nav class="header">
	<a class="left" href="http://www.upcreative.net/iscriviti-alla-newsletter/"><i class="fa fa-globe"></i> Ulteriori guide</a>			
	<button href="#" class="right" data-js="new"><i class="fa fa-plus"></i> Nuovo articolo</button>
	<h1 class="title">HTML5 Mobile App</h1>
</nav>

<!-- wrapper il contenuto della lista -->
<section class="content">
	<h1>Articoli</h1>		
	<ul class="list-group" data-js="list">

	</ul>
</section>

<!-- 
	template che useremo per la view del dettaglio della news: il browser ingnora questa parte di codice, poichè all'interno
	del tag 'script', ma possiamo invece risalire a questo template da javacript, tramite l'id
--> 
<script type="text/template" id="article-template">

	<!-- header della schermata -->
	<nav class="header">
		<button class="right" data-js="close"><i class="fa fa-times-circle"></i></button>
		<h1 class="title">Dettalgi articolo</h1>
	</nav>

	<!-- wrapper per le tab della schermata -->
	<section class="content">		

		<h1><%=title%></h1>
		<p>Data: <%=createdat.getDate()%> / <%=createdat.getMonth()+1%> / <%=createdat.getFullYear()%></p>
		<article>

			<!-- 
			il sistema di templating permette di usare i normali controlli Javascript, 
			in modo da poter controllare se è presente o meno l'immagine per l'articolo 
			--> 

			<%if(image){%>
			<img src="images/<%=image%>" />
			<%}%>

			<%=article%>

		</article>

	</section>

</script>

Il codice che si trova all’interno del tag <script type=”text/template” id=”article-template”></script> rappresenta il markup che verrà utilizzato dalla view Backbone.js per la visualizzazione del dettaglio dell’articolo.

Il file Javascript

All’interno del nostro file Javascript (demo.js) come prima cosa salviamo in una variabile il nome dell’evento di fine animazione tramite Modernizr, che verrà utilizzato nella view del dettaglio dell’articolo:

/* Grazie a modernizr riprendo il nome dell'evento di fine animazione, che cambia a seconda del browser */

var animEndEventNames = {
	'WebkitAnimation' : 'webkitAnimationEnd',
	'OAnimation' : 'oAnimationEnd',
	'msAnimation' : 'MSAnimationEnd',
	'animation' : 'animationend'
};
var animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];

Il passo successivo è subito quello di definire il modello (model) Backbone per rappresentare ogni articolo, e la relativa collezione (collection):

//definiamo il modello di un articolo
var ArticleModel = Backbone.Model.extend({

    // Attributi predefiniti per il modello, che vengono usati 
    //se non passati al momento dell'inizializzazione    
    defaults: {
        title: "Nessun titolo",
        article: "",
        image: false,
        createdat: new Date()
    }, 
    //elimina l'istanza del model
    clear: function() {
        this.destroy();
    }

});

//definiamo la collection per la lista degli articoli
var ArticleList = Backbone.Collection.extend({ 
    //Impostiamo la referenza al model per questa collection.
    model: ArticleModel
});

Fatto ciò passiamo alla definizione delle views che controllano parte dell’interfaccia della nostra HTML5 Mobile App.

In particolare useremo due views:

• la prima, ovvero quella che rappresenta l’app principale, è applicata al body e quindi non deve preoccuparsi di generare nuovo markup HTML, ma di usare quello che abbiamo già inserito nel documento
• la seconda, ovvero quella che rappresenta il pannello che mostra i dettagli dell’articolo, si servirà della parte di markup che abbiamo precedentemente inglobato nel tag <script> con id ‘article-template‘.

View generale

//definiamo la view dell'app intera
var AppView = Backbone.View.extend({

    //a differenza della view di dettaglio dell'articolo, dove impostavamo 
    //quale elemento generare al'inizializzazione, qui comunichiamo 
    //quale oggetto già aesistente utilizzare come markup
    el: "body",

    // Deleghiamo gli eventi per la creazione di un nuovo 
    //articolo (il funzionamento ed i selettori sono come quelli di jQuery).
    events: {
    	//evento //selettore 	 //funzione da eseguire
        "click [data-js=list] a":  "showArticle",
        "click [data-js=new]":  "newArticle"
    },

    // Nella funzione di inizializzazione osserviamo l'evento add 
    //della collection legata a questa view, per richiamare la funzione che 
    // inserisce un nuovo elemento nella lista DOM
    initialize: function() {

        //deleghiamo gli eventi della collection alle relative funzioni 

        //evento che si verifica quando un nuovo model viene aggiunto alla collection
        // l'ultimo parametro è una funzione alla quale viene passata l'istanza del model appena aggiunto
        // alla collection
        this.listenTo(this.collection, 'add', this.addArticle);

        //richiamiamo la funzione che aggiunge gli elementi all alla lista
        this.addElements();
    },

    // funzione che crea una nuova view ed aggiunge 
    // l'elemento generato dal render alla lista, in base al modello passato ('articleModel')
    addArticle: function(articleModel) {           
        //qui, per mostrare una soluzione diversa, generiamo del markup senza ricorrere ad una view a se stante
        var compiledTemplate = _.template('<a href="#" class="list-group-item"><%=title %> - <span class="text-muted"><%=createdat.getDate()%> / <%=createdat.getMonth()+1%> / <%=createdat.getFullYear()%></span></a></li>');
        //aggiungiamo alla lista il markup generato dal sistema di templating, passando i dati in formato Json del model
        this.$("[data-js=list]").append( compiledTemplate(articleModel.toJSON()) );
    },

    showArticle: function(e) {  
    	e.preventDefault();
    	var item = $(e.currentTarget), 					//riprendiamo l'oggetto jQuery del link appena cliccato
    		index = item.index(),	   					//riprendiamo l'indice sulla lista dell'oggetto appena cliccato
    		articleModel = this.collection.at(index);   //riprendiamo il model dalla collection degli articoli in base all'indice

        //creaiamo una nuova istanza della view dell'articolo passando come model quello dell'articolo cliccato
        var view = new ArticleView({model: articleModel});
        //aggiungiamo all'elemento di questa view (quindi il body della pagina) l'oggetto DOM generato dalla funzione di render della view appena istanziata
        this.$el.append(view.render().el);
        //richiamiamo il metodo "show()" interno della view appena creata per avviare l'animazione di entrata
        view.show();    
    },

    // Aggiunge nella lista tutti gli elementi della collection di individui.
    addElements: function() {
        this.collection.each(this.addArticle);
    },

    newArticlesCoounter: 0,
    newArticle: function(){
    	this.newArticlesCoounter++;

    	//creo un nuovo model per l'articolo
    	var newModel = new ArticleModel({
    		title: "Nuovo articolo "+this.newArticlesCoounter,
    		article: "BOOM! Corpo nuovo articolo.."
    	});
    	//aggiungo il model alla collection, in modo da innescare la funzione 'addArticle', 
    	//come stabilito all'interno della funzione 'initialize' di questa view
    	this.collection.add(newModel);

    }
});

 View di dettaglio

//view per il dettaglio dell'articolo
var ArticleView = Backbone.View.extend({

    // diciamo a backbone che deve inserire il markup del template di questa view all'interno di un oggetto dal tag 'section'
    tagName:  "section",

    //settiamo la classe che deve avere il tag 'section'
    className: "article-wrapper",

 	//impostaiamo l'id del template da cui generare il merkup di questa view
    template: "#article-template",

    //impostazione degli eventi per l'interazione dell'utente (il funzionamento ed i selettori sono come quelli di jQuery).
    events:{
    	//evento //selettore 	 //funzione da eseguire
    	"click [data-js=close]": "hide"
    },

 	//la funzione che viene eseguita al momento dell'inizializzazione di questa view
    initialize: function() {
        //compiliamo il template in una variabile
        this.template = _.template($(this.template).html());

        //rimuoviamo il modal dal DOM quando esso viene nascosto
        this.$el.on("hidden.bs.modal", function(){
            this.remove();
        });
    },

    // Effettua il render del markup della view per il dettaglio dell'articolo, in base al modello con cui questa view è stata inizializzata.
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));        
        return this;
    },

 	//funzione che mostra l'elemento DOM nell'interfaccia
    show: function(){
    	//aggiungendo la classe 'show-article' al contenitore di questa view 
    	//(elemento 'section.article-wrapper') inneschiamo l'animazione di entrata
        this.$el.addClass("show-article");        
    },
    //funzione che nasconde l'elemento DOM dall'interfaccia
    hide: function(){
    	var _this = this;
    	//aggiungendo la classe 'hide-article' al contenitore di questa view 
    	//(elemento 'section.article-wrapper') inneschiamo l'animazione di uscita
        _this.$el.addClass("hide-article");        
        //al termine della'animazione, rimuoviamo l'oggetto DOM dal documento tramite il metodo backbone 'remove()', in modo da alleggerire il lavoro 
        //della memoria centrale del dispositivo, contribuendo a rendere la nostra applicazione più fluida e performante 
        _this.$el.on( animEndEventName ,function(){
        	_this.remove();
        });        
    }

});

Il codice CSS

Per quanto riguarda gli stili CSS3, abbiamo utilizzato delle posizioni assolute per elementi come l’header, il contenitore della lista ed il tag <section> legato alla view del dettaglio. A quest’ultimo abbiamo inoltre applicato la tecnica dell’accelerazione hardware (o hardware acceleration) tramite l’istruzione ‘transform: translate3d(0,0,0)‘, corredata con i vari prefix per la compatibilità browser, che renderà la nostra HTML5 Mobile App più fluida e performante.

Così facendo, ci assicuriamo delle animazioni fluide e performanti, nel momento in cui all’elemento ‘section.article-wrapper‘ vengono aggiunte le classi che le ‘innescano': ‘.show-article‘ e ‘.hide-article‘.

Ecco il codice necessario per realizzare l’effetto di entrata:

section.article-wrapper {

  /*stili per il posizionamento*/
  position: fixed;
  left: 0;
  top: 0;      
  right: 0;    
  bottom:0;  
  z-index: 30;

  visibility: hidden;

  /* migliora le prestazioni prevenendo il render della parte 'posteriore' dell'elemento */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   /* 
   	forziamo l'utilizzo della tecnica dell'accelerazione hardware per avere aniamzioni più fluide e reattive;
   	mpostando come elemento scatenante per l'effetto la proprietà 'translate3d'
   	il processo di rendering per l'elemento sarà delegato alla GPU (memoria grafica) 
   	prima, dopo e durante l'animazione
   */
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);               
}    

section.article-wrapper.show-article{

	/*
	nel momento in cui all'elemento 'section.article-wrapper' viene aggiunta la classe 'show-article'
	innescchiamo l'animazione di entrata specifcandola in corrispondenza dell'attributo 'animation'
	*/

    -webkit-animation: showFromBottom .25s ease both;
    -moz-animation: showFromBottom .25s ease both;
    animation: showFromBottom .25s ease both;

    visibility: visible;
}

section.article-wrapper.hide-article{
    /*
      nel momento in cui all'elemento 'section.article-wrapper' viene aggiunta la classe 'hide-article'
      inneschiamo l'animazione di uscita specificandola in corrispondenza dell'attributo 'animation'
    */
    -webkit-animation: hideToBottom .25s ease both;
    -moz-animation: hideToBottom .25s ease both;
    animation: hideToBottom .25s ease both;
}

/* definizione delle animazioni di entrata e di uscita per la view dell'articolo: muoviamo sempliemente l'elemento in verticale sull'asse delle ordinate */

/*animazione di entrata*/
@-webkit-keyframes showFromBottom {
    from { -webkit-transform: translateY(100%); }
}
@-moz-keyframes showFromBottom {
    from { -moz-transform: translateY(100%); }
}
@keyframes showFromBottom {
    from { transform: translateY(100%); }
}

/*animazione di uscita*/
@-webkit-keyframes hideToBottom {
    to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes hideToBottom {
    to { -moz-transform: translateY(100%); }
}
@keyframes hideToBottom {
    to { transform: translateY(100%); }
}

 

Ultimo step: avviamo la nostra HTML5 Mobile App!

Ora che  abbiamo tutti i pezzi del puzzle possiamo procedere ed avviare la nostra applicazione: per instanziare i nostri componenti ed avviare l’applicazione, torniamo sul file ‘demo.js‘ e ci serviremo del seguente codice javascript per inserire nella collection qualche articolo predefinito, con tanto di titolo, immagine, corpo dell’articolo e data, in modo da visualizzarli subito nella lista iniziale:

$(function(){

	//creiamo una nuova istanza per la collection degli articoli con 4 models iniziali
    var articles = new ArticleList([
        {
            title: "App su upCreative.net",
            image: "1.jpg",
            article: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        },
        {
            title: "Secondo articolo su upCreative.net",
            image: "2.jpg",
            article: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur"
        },
        {
            title: "Articolo senza immagine 3",
            article: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        },
        {
            title: "Quarto articolo sulla  lista",
            image: "3.jpg",
            article: "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat"
        }
    ]);
    //creiamo una nuova istanza per la view dell'applicazione 
    //principale associandogli la collection
    var app = new AppView({
        collection : articles
    });

});

BOOM! L’esperimento è pronto, di seguito puoi consultare la demo o poterti divertire direttamente con i sorgenti.

Conclusioni, demo e download

---

Come creare una #HTML5 #MobileApp con #Backbonejs ed il pattern #MVC
Click To Tweet

---

Tramite questa demo è possible intuire, almeno in parte, le potenzialità che backbone ed il pattern MVC mettono a disposizione. Come avrai potuto notare ogni view agisce in modo “non intrusivo” nei confronti degli altri elementi: ognuna di esse “resta in ascolto” ad eventuali modifiche apportate al model o alla collection associati, attraverso l’istruzione ‘this.listenTo‘.

Quando ciò accade, è possibile effettuare le relative modifiche al DOM della view senza doverle richiamare da parti esterne dell’applicazione ma agendo del tutto autonomamente. Di conseguenza l’applicazione stessa risulta maggiormente scalabile ed estendibile secondo le proprie esigenze.

E tu cosa ne pensi? Hai mai utilizzato Backbone per i tuoi progetti? Fammelo sapere lasciando un commento!

Aiutami a condividere la risorsa per ottenere la demo ed il download:

Premessa

Il risultato è ottimizzato per dispositivi mobile e le tecniche utilizzate (come l’accelerazione hardware e la composizione dei livelli grafici)  sono suppurate solo dai browser di ultima generazione. Pertanto, se vuoi integrare il menu in un sito web, è opportuno attuare un’adeguata tecnica di Progressive Enhancement.

Per approfondire il discorso del Progressive Enhancement e per vedere come realizzare uno slide menu ottimizzato su tutti i browser, ti consiglio di leggere questo post:

• CSS3 slide panel: tutorial su come realizzare un menu stile mobile

Il markup HTML

Come primo passo impostiamo il markup HTML del documento, il quale prevede principalmente due elementi essenziali: il contenitore del menu (con al suo interno una lista di 4 voci) e quello dei contenuti dell’applicazione, rispettivamente rappresentati da un elemento <nav>  con classe ‘menu’, e da un <div> con classe ‘content-wrapper’.

<nav class="menu">
    <ul>	    
    	<li>
	    	<a href="#">
	    		<i class="fa fa-search fa-2x"></i>
	    		<span>Ricerca</span>
	    	</a>
    	</li>
    	<li>
	    	<a href="#">
	    		<i class="fa fa-star fa-2x"></i>
	    		<span>Preferiti</span>
	    	</a>
	    </li>
    	<li>
	    	<a href="#">
	    		<i class="fa fa-users fa-2x"></i>
	    		<span>Amici</span>
	    	</a>
	    </li>
    	<li>
	    	<a href="#">
	    		<i class="fa fa-cog fa-2x"></i>
	    		<span>Impostazioni</span>
	    	</a>
    	</li>	    
    </ul>

</nav>

<!-- contenuto dell'applicazione -->

<div class="content-wrapper">

	<section class="page"> <!-- pagina (o view dell'applicazione) -->

		<header> <!-- header della pagina -->
			<button class="toggle-menu"><i class="fa fa-bars fa-lg"></i></button>
			<h1 class="title">HTML Mobile App</h1>

		</header>
		<article class="text-center">

			Conenuto pagina	

		</article>
	</section>

</div>

Per realizzare il nostro HTML Mobile Slide Menu facciamo in modo di posizionare entrambi gli elementi DOM (‘.menu‘ e ‘.content-wrapper‘) tramite la proprietà position:absolute, per sovrapporre il contenitore dell’applicazione al menu.

Poi, avviando l’effetto slide, il contenitore sarà traslato orizzontalmente dello stesso numero di pixel che compongono la larghezza del menu (260px).

Andiamo quindi a vedere il codice CSS3 necessario per raggiungere tale obiettivo.

Gli stili CSS3

Innanzitutto posizioniamo i due elementi, attribuendo al contenitore uno z-index superiore a quello del menu:

nav.menu {
    position: absolute;
    left: 0;
    width: 260px;
    height: 100%;
    top: 0;
    z-index: 1;	    
    background: #B8BDC5;
}
.content-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: #4A5A6E;	    
}
/*
	ecco gli stili per il posizionamento di un'ipotetica pagina (o view)	
	che si trova all'internod el contenitore su cui effettueremo l'effeto slide	
*/
.content-wrapper > section.page{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
}

Attiviamo l’effetto slide-right, utile per rivelare il menu, impostando il foglio di stile in modo che basti aggiungere una classe all’elemento DOM:

.content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    background-color: #4A5A6E;

    /*
	impostiamo l'effetto di transizione sul contenitore della pagina/delle pagine del documento	    
	in modo da forzare la creazione dei layer grafici (accelerazione hardware)
	e rendere l'animazione più performante;
	il tutto riportando tutti i prefix per la compatibilità browser
    */

    -webkit-transition: -webkit-transform .5s ease-in-out;
    	  -moz-transition: -moz-transform .5s ease-in-out;
    	    -ms-transition: -ms-transform .5s ease-in-out;
    	      -o-transition: -o-transform .5s ease-in-out;
    	            transition: transform .5s ease-in-out;

}			

.content-wrapper.open-left {

	/*
		nel caso in cui venga aggiunta la classe 'open-left'
		avviamo l'effetto transition modificando la prop. transform
		e traslando in senso positivo tutto il contenuto di 260px,
		al fine di rivelare il menu nascosto sotto
	*/

    -webkit-transform: translate3d(260px, 0, 0);
       -moz-transform: translate3d(260px, 0, 0);
        -ms-transform: translate3d(260px, 0, 0);
         -o-transform: translate3d(260px, 0, 0);
            transform: translate3d(260px, 0, 0);

}

Agendo sulla proprietà di stile transition, richiamiamo, tramite il transform, un tipo di effetto che forza l’accelerazione hardware e quindi la composizione dei livelli grafici (il cui rendering è delegato alla GPU), alleggerendo così i carichi di lavoro e favorendo la fluidità dell’animazione.

Facciamo quindi la stessa cosa per gli elementi della lista del menu, che devono essere traslati anch’essi orizzontalmente e mostrati con una leggera dissolvenza:

nav.menu ul li{
	display: block;
	margin-bottom: 10px;  

	opacity: 0.8;  	 	

    -webkit-transform: translate3d(-260px, 0, 0);
       -moz-transform: translate3d(-260px, 0, 0);
        -ms-transform: translate3d(-260px, 0, 0);
         -o-transform: translate3d(-260px, 0, 0);
            transform: translate3d(-260px, 0, 0);

}

/* 
facciamo in modo che le <li> della navigazione siano animate solo nel caso 
in cui  l'elemento '.menu' abbia la classe 'animate li';
questo ci permette di animare ogni <li> solo quando il menu viene mostrato e 
non quando viene chiuso
*/

nav.menu.animate-li ul li{
    -webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
    	-ms-transition: all .5s ease-in-out;
    	 -o-transition: all .5s ease-in-out;
    	    transition: all .5s ease-in-out;
}

Dal codice puoi vedere che l’effetto transition viene attivato solo nel caso in cui all’elemento <nav> del menu venga aggiunta la classe ‘animate-li‘; questo è per animare gli elementi della lista solo nel caso in cui il menu venga aperto, e non durante l’azione di chiusura.

Per rendere l’effetto più accattivante aggiungiamo a tutti gli elementi della lista (tranne il primo) un leggero ritardo rispetto a quello precedente tramite la proprietà transition-delay:

/* impostiamo i ritardi di animazione per gli elementi della lista */

nav.menu ul li:nth-child(2){
	-webkit-transition-delay: .05s;
		transition-delay: .05s;
}

nav.menu ul li:nth-child(3){
	-webkit-transition-delay: .08s;
		transition-delay: .08s;
}

nav.menu ul li:nth-child(4){
	-webkit-transition-delay: .11s;
		transition-delay: .11s;
}

Impostiamo quindi la classe da giungere al menu per attivare l’animazione sulle 4 voci:

/* attiviamo l'animazione della transition agendo sulle proprietà 'scatenanti' */

nav.menu.open-left ul li{

    opacity: 1;

    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

Infine, per inclinare graficamente ogni voce di menu, ci serviamo anche qui della proprietà tansform, tramite la funzionalità skew attivata agendo sull’asse delle Y:

nav.menu ul a > span{
	display: block;
	width:100%;
	height: 60px;
	background: #000;
	font-size: 20px;
	z-index: 1;
	text-transform: uppercase;
	font-weight: 400;

	padding:15px 10px 15px 75px;

	-moz-box-sizing: border-box;
		 box-sizing: border-box;

    /* 
    utilizziamo la proprietà 'skew' per effettuare un'inclinazione 
    verticale per lo span (agendo sull'asse delle Y), usando come origine 
    l'angolo in basso a sinistra per fare in modo che l'icona rimanga nella
    sua posizione rispetto allo span
    */

    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;

    -webkit-transform: skew(0,-10deg);
       -moz-transform: skew(0,-10deg);
        -ms-transform: skew(0,-10deg);
         -o-transform: skew(0,-10deg);
            transform: skew(0,-10deg);

}

Poiché l’obiettivo era quello di inclinare tutta la voce ma non l’icona, ci siamo serviti di uno <span> posto all’interno del link a cui abbiamo attribuito uno sfondo nero e all’interno del quale abbiamo inserito il testo della rispettiva voce.

Questa tecnica ci ha permesso inoltre di applicare due trasformazioni diverse ad ogni voce di menu, in quanto non sarebbe stato possibile traslare ed inclinare contemporaneamente l’elemento <li> (la possibilità di impostare una sola trasformazione alla volta per ogni elemento è purtroppo una limitazione delle animazioni CSS3).

---

Come realizzare un #mobileapp slide menu animato con #CSS3 e #modernizr #webdesign
Click To Tweet

---

Il codice Javascript

Andiamo a gestire ora l’evento di click sul pulsante di apertura per aprire o chiudere il nostro Mobile Slide Menu:

/* Grazie a modernizr riprendo il nome dell'evento di fine transizione, che cambia a seconda del browser */

var endTransitionName = {
	'WebkitTransition' : 'webkitTransitionEnd',
	'OTransition' : 'oTransitionEnd',
	'msTransition' : 'MSTransitionEnd',
	'transition' : 'transitionend'
};
var transitionEventName = endTransitionName[ Modernizr.prefixed( 'transition' ) ];

$(function(){

	var menuNav = $("nav.menu");	
	$(".toggle-menu").on("click", function(){	

    	if(!menuNav.hasClass("open-left")){

    		/*
	    		se il menu di navigazione non ha la classe 'open-left' e quindi è chiuso, 
	    		come prima cosa aggiungiamo la classe 'animate-li', che aggiunge le impostazioni per l'effetto di transizione,  
	    		e poi la stessa 'open-left'; facciamo quindi lo stesso con il contenitore della pagina (classe 'content-wrapper')
    		*/

    		menuNav.addClass("animate-li");
	    	$("nav.menu, .content-wrapper").addClass("open-left");
    	}else{

    		/*
    			se il menu di navigazione è 'aperto', quindi presenta la classe 'open-left',
	    		come prima cosa rimuoviamo la classe 'animate-li' in modo da non scatenare l'animazione
	    		sulle <li> per la chiusura
	    		Poi rimuoviamo la classe 'open-left' SOLO al contentenitore, in modo da scatenare l'aniamzione di chiusura.
	    		AL termine di quest'ultima rimuoveremo la classe anche dal menu per ripristinare la posizione di partenza di ogni <li>
    		*/

	    	menuNav.removeClass("animate-li");
	    	$(".content-wrapper").removeClass("open-left").one(transitionEventName, function(){
		    	menuNav.removeClass("open-left");
	    	});
    	}		    	
	});

});

Nel momento in cui il pulsante viene cliccato controlliamo se il menu è aperto o chiuso verificando la presenza o meno della classe ‘open-left‘ sull’elemento <nav>.

Se è chiuso, prima attiviamo gli effetti per le voci di menu aggiungendo la classe ‘animate-li‘ al contenitore del menu, poi avviamo le animazioni sia su di esso che sul contenitore delle pagine, aggiungendo ai relativi elementi la classe ‘open-left‘.

Se invece il menu è visible, rimuoviamo la classe ‘animate-li‘ dall’elemento <nav> per non scatenare l’animazione contraria sulle 4 voci, poi rimuoviamo la classe ‘open-left‘ dal contenitore in modo avviare l’effetto slide di chiusura, ed infine, una volta terminato quest’ultimo, riportiamo le voci di menu allo stato iniziale rimuovendo anche dall’elemento <nav> la classe ‘open-left’.

Per vedere come gestire gli eventi di fine transizione e animazione con Modernizr, ti consiglio di leggere questo articolo:

• Modernizr e CSS3: gestire gli eventi di fine animazione e transizione con javascript

 

---

Come realizzare un #mobileapp slide menu animato con #CSS3 e #modernizr #webdesign
Click To Tweet

---

Conclusioni

Dalla demo puoi vedere come il risultato dell’esperimento sia un’animazione fluida e performante, priva di quei sfarfalli e crash che spesso caratterizzano le applicazioni HTML realizzate con framework come jQuery Mobile o jQtouch.

Due piccole note su questo tutorial:

1. nel codice sopra riportato sono stati aggiunti i prefissi su proprietà come transition e transform per la compatibilità browser; tuttavia sviluppando solo per mobile sarebbe possibile omettere tutti i prefissi tranne quello per browser webkit-based (-webkit-)
2. per avere un risultato ed una user-experience migliore sarebbe opportuno aggiungere il supporto per il touch, in modo da mostrare il menu durante l’azione di swipe dell’utente.

E tu? Hai mai realizzato delle applicazioni Mobile in HTML4, CSS3 e Javascript? Lascia un commento qui di seguito e fammi sapere le tue opinioni a riguardo!