In questa mini-guida divisa in due parti, ti ho mostrato come gestire i dati di un’applicazione mobile o di una web app sfruttando il Web SQL, un tipo di database che permette di salvare record in locale sul dispositivo utilizzato dall’utente, tramite istruzioni SQL, linguaggio ben conosciuto dalla maggior parte dei web designers.

I metodi di salvataggio lato-client sono molto utili nel caso di applicazioni mobile sviluppate in HTML5, CSS3 e Javascript, ed è per questo che oggi voglio condividere con te un tutorial incentrato su un’altro sistema di salvataggio dati lato-client, il localStorage.

L’idea di scrivere questo post nasce dalla domanda di uno dei lettori di upCreative.net (a proposito, ringrazio sixdas per lo spunto) su come poter creare l’interfaccia di un’applicazione mobile che mostri all’utente una schermata di login oppure il contenuto dell’app, a seconda se è stato effettuato o meno il login con username e password.

Alle fine dell’articolo potrai trovare il link per il download dei file sorgenti.

---

Come creare la view di login in un #HTML5 #mobileapp con #backbonejs
Click To Tweet

---

Tutorial su come creare un app: l’obiettivo finale

In altre parole, all’avvio dell’applicazione controlleremo se nel localStorage è stata salvata una variabile che identifica l’username dell’utente: se è presente lo rimanderemo ai contenuti dell’applicazione, altrimenti visualizzeremo la schermata attraverso la quale egli potrà inserire i propri dati, che useremo poi per impostare la variabile di controllo nel localStorage.

Come view interna dell’app, quella accessibile solamente una volta effettuato il login, useremo la stessa del tutorial “Semplice Mobile App con Bootstrap Ratchet e Backbone.js” che ti ho mostrato in precedenza, che sarà quindi utilizzato come “base” per questo esperimento (in sostanza, quello che faremo è aggiungere la parte di login).

Il localStorage, di cui avevo parlato in questo articolo che ho scritto per YourInspirationWeb.com, è un sistema di salvataggio dati non-relazionale, che analogamente all’indexedDB, si basa sul concetto di coppia chiave-valore, per cui in corrispondenza di ogni chiave possiamo salvare qualsiasi tipo di variabile javascript: una stringa, un numero, un oggetto JSON e così via.

Noi lo utilizzeremo semplicemente per salvare l’username dell’utente in corrispondenza della chiave “user“, in modo da poter ricontrollare quella variabile ogni volta che l’applicazione viene avviata, ovvero ogni volta che il documento della pagina index.html viene ricaricato.

La view del login

L’esperimento precedente, basato su Backbone.js, era strutturato in questo modo:

Quello che dobbiamo fare è aggiungere la view di login, esattamente allo stesso livello DOM della view principale mostrata nell’immagine con il colore azzurro, ed effettuare il .render() di una o dell’altra, a seconda del contenuto della variabile del locaStorage.

Come prima cosa definiamo l’oggetto Backbone.View all’interno del file demo.js, il file javascript demo.js, in cui sono già presenti tutte le altre view:

//view per il login che viene mostrata solo quando l'utente non è loggato
var LoginView = 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 login-wrapper",

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

    initialize: function() {

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

        this.AnimEndEventName = this.getAnimEndEventName();
    },

    //funzione che genera il markup di questa view
    render: function () {
        this.$el.html(this.template()); 
        return this;
    },

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

    getAnimEndEventName: function(){

        var animEndEventNames = {
            'WebkitAnimation' : 'webkitAnimationEnd',
            'OAnimation' : 'oAnimationEnd',
            'msAnimation' : 'MSAnimationEnd',
            'animation' : 'animationend'
        };

        return animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
    },

    // Deleghiamo gli eventi per la ricerca sull'input di testo 
    events: {
        //evento //selettore    //funzione da eseguire
        "submit  form":    "login"
    },

    //funzione che gestosce il login del form
    login: function (e) {

        e.preventDefault();
        var _this = this,
            form = $(e.currentTarget); 
            username = $.trim(form.find("[name=username]").val()),  
            password = $.trim(form.find("[name=password]").val()),
            submitBtn = form.find("button");

        //controllo sulla lunghezza di username e password
        if(username.length==0 || password.length==0){
            alert("Username e password sono obbligatori");
            return;
        }

        //qui andrebbe il controllo username e password (magaro tramite SQLite, Web SQL o su Ajax mediante database)
        //ma per questo esperimento simuliamo la cosa con un setTimeout di 2 secondi

        submitBtn.text("Login in corso...");
        setTimeout(function(){
            submitBtn.text("Login");

            //una volta verificate le credenziali di login salvo l'utente in modo persistente sul dispositivo tramite localStorage
            localStorage.setItem("user", username);
             //richiamo la funzione che inizializza i dati degli articoli e mostra la view della lista
            showList();
            //nasondo la view di login in modo da mostrare quella degli articoli
            _this.hide();

        }, 2000);      

    },

    show: function(callback){

        var _this = this;

        //aggiungendo la classe 'opened' al contenitore di questa view 
        //(elemento 'section.login-wrapper') innesco l'animazione di entrata
        this.$el.addClass("opened");

        //se è stata passata una funzione di callback, la richiamo una volta terminato l'evento di fine animazione
        if(callback){
            _this.$el.one( this.AnimEndEventName, function(){
                callback();
            });  
        }

    },

    hide: function(callback){

        var _this = this;
        //aggiungendo la classe 'hidden' al contenitore di questa view 
        //(elemento 'section.login-wrapper') inneschiamo l'animazione di uscita
        _this.$el.addClass("hidden");        
        //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( this.AnimEndEventName, function(){
            _this.remove();
            //se è stata passata una funzione di callback, la richiamo una volta terminato l'evento di fine animazione
            if(callback)
                callback();

        });   
    }

});

Nel momento in cui si verifica l’evento submit del form di login, viene richiamato il metodo “login“, all’interno del quale, dopo aver verificato che username e password siano stati inseriti, simuliamo una richiesta al server con un setTimeout  di 2 secondi, durante il quale cambiamo il testo del pulsante di login.

Al termine dei due secondi salviamo in corrispondenza della chiave “user” del localStorage l’username fornito dall’utente, mediante il metodo “.setItem()” e richiamiamo la funzione “showList”, che inizializzerà e mostrerà all’utente la view principale, quella che contiene la lista degli articoli (StartView) .

Come la view principale, anche quella di login utilizza come contenitore il tag <section> con con la classe “.page-wrapper“; in più è stata aggiunta la classe “login-wrapper” in modo da poter attribuire a questa view degli stili CSS aggiuntivi.

Grazie ad essi potremo infatti mostrare la view con un’animazione fluida e performante di tipo slideIn dal basso verso l’alto, che sfrutta la tecnica dell’accelerazione hardware.

Se vuoi approfondire il discorso delle animazioni fluide e perfomanti, e quello della tecnica dell’accelerazione hardware, forse potrebbe interessarti il seguente articolo:

• Web e Mobile App fluide con hardware acceleration

---

Come creare la view di login in un #HTML5 #mobileapp con #backbonejs
Click To Tweet

---

Inoltre sono da sottolineare i due metodi “show” e “hide“, i quali aggiungono all’elemento contenitore della view (l’elemento DOM “section.login-wrapper”) le classi “opened” ed “hidden“, che scateno le animazioni CSS di entrata e di uscita.

Grazie a Modernizr, incluso nel documento all’interno del file index.html (nel tag <head>), riusciamo ad “agganciare” all’evento di fine animazione (il cui nome cambia a seconda del browser utilizzato dall’utente) una funzione nel momento in cui l’animazione definita nei CSS giunge al termine (vedi questo articolo per avere maggiori informazioni).

Gli stili CSS

Vediamo gli stili CSS3 utilizzati per definire la dinamica dell’animazione di entrata e di uscita della schermata di login:

/* codice CSS3 performante per l'animazione della view di login */

section.login-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.login-wrapper.opened{

	/*
	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.login-wrapper.hidden{
    /*
      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%); }
}

La dinamica e le caratteristiche delle animazioni sono state riprese da uno dei miei precedenti tuorial sull’argomento. Per avere maggiori informazioni visita il relativo link:

• Come creare un HTML5 Mobile App con Backbone.js

Il template

Come prima cosa aggiungiamo il template della view all’interno del tag <body> file index.html, dove sono già presenti quelli della view principale, delle view della lista e della view dell’articolo singolo:

<!-- template per la view del login  (LoginView su demo.js) -->
	<script type="text/template" id="loginview-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="content">
			<h3>Effettua il login</h3>
			<form>
			  <input type="text" name="username" placeholder="Username">
			  <input type="password" name="password" placeholder="Password">
			  <button class="btn btn-primary btn-block">Login</button>
			</form>
		</div>

	</script>

Anche questa view, come le altre, è stata realizzata in modo tale che sfrutti gli stili di Ratchet 2, un set di CSS pronti da utilizzare come base per la realizzazione di una mobile app.

Al suo interno abbiamo inserito un semplice form di login con 2 campi per username e password.

Come creare un app: il controllo del login

Nell’esperimento precedente, dove il login non era presente, ci preoccupavamo subito di inizializzare la view princiaple; in questo tutorial dobbiamo invece controllare il contenuto della variabile localStorage per la chiave “user” prima di decidere se mostrare all’utente la view di login piuttosto che quella della lista degli articoli.

---

Come creare la view di login in un #HTML5 #mobileapp con #backbonejs
Click To Tweet

---

Pertanto inseriamo l’inizializzazione della view di iniziale (StartView) all’interno di una funzione denominata “showList“, in modo da poterla richiamare inizialmente oppure dopo che l’utente ha effettuato correttamente l’operazione di login:

//per poter inizializzaere e mostrare la view della lista degli articoli in più parti dell'applicazione
//la inseriamo all'interno di una funzione globale

var showList = 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);
};

Una volta fatto ciò, non dovremo far altro che controllare la variabile “user” all’interno del localStorage, nel momento in cui l’applicazione viene lanciata:

$(function(){

    //riprendo il contenuto della variabile "user" del localStorage
    var user = window.localStorage.getItem("user");

    if(user){
        //se in localStorage è presente un oggetto in corrispondenza della chiave "user", 
        //allora significa che l'utente è già loggato, quindi mostriamo direttamente la view della lista degli articoli
        showList();
    }else{
        //se l'utente non è loggato (quindi il contenuto della variabile è vuoto), allora mostriamo la view di login
        var loginView = new LoginView();
        $("body").append(loginView.render().el);
        loginView.show();
    }

});

Come creare un app: il pulsante di logout

Una volta predisposti la view di login ed il controllo della sessione tramite localStaorage, è buona norma aggiungere un pulsante per effettuare il logout, in modo da dare la possibilità all’utente di riaccedere con un username differente.

Inseriamo quindi nel template della view “StartView” un footer contenente il nuovo pulsante:

<!-- 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 class="info">
				<h4>Benvenuto/a "<%=username%>"</h4>
				<p>Prova ad aggiornare la pagina, il login non verrà richiesto, a meno che non venga effettuato il logout. ;) </p>
			</div>
		</div>

		<!-- Footer con il pulsante di logout -->
		<div class="bar bar-standard bar-footer">
		  <button class="btn btn-primary btn-block logout">Logout</button>		 
		</div>

	</script>

Il click (o tap) su di esso sarà poi gestito all’interno della view di Backbone:

var StartView = Backbone.View.extend({

    ...

    // Deleghiamo gli eventi per la ricerca sull'input di testo 
    events: {
        ...
        "click    .logout":      "logout"  //gestione del pulsante di logout
    },

    ...

    logout: function(){

        var _this = this;

        //azzero la variabile del lovalStorage
        window.localStorage.removeItem("user");

        //mostro di unovo la view di login, per poi rimuovere questa view
        var loginView = new LoginView();
        $("body").append(loginView.render().el);
        loginView.show(function(){
            _this.remove();
        });

    }
});

Come puoi vedere dal codice, il compito del metodo  “logout” è quello di azzerare la variabile di controllo di login e mostrare la view “LoginView“, per poi rimuovere quella corrente al termine dell’animazione di entrata (passando al metodo “show“, definito nella view di login, una funzione di callback).

Il risultato finale

---

Come creare la view di login in un #HTML5 #mobileapp con #backbonejs
Click To Tweet

---

Download dei sorgenti

Aiutami a condividere la risorsa per ottenere il download:

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:

Da sempre il web designer/developer deve sostenere la famosa dura lotta della compatibilità browser, con un occhio di riguardo soprattutto per Internet Explorer, ed in particolar modo per l’utilizzo delle numerose funzionalità CSS3, che contribuiscono ad incrementare la qualità e la user experience di ogni interfaccia.

Negli ultimi tempi l’interpretazione di animazioni, transizioni e altre proprietà CSS3 su tutti i browser sembra una meta sempre meno lontana, per cui molti front-end developer, compreso il sottoscritto, cercano di impiegarli il più possibile all’interno dei loro progetti.

Tuttavia nell’utilizzare funzionalità del genere bisogna fare attenzione alle performance CSS3 del dispositivo/browser su cui dovranno “girare”, in particolare se si tratta di quelli mobili, molto meno potenti rispetto ai desktop.

Un esperienza a riguardo

Recentemente ho sviluppato e pubblicato nell’App Store Tint, un’applicazione realizzata interamente con markup HTML5, animazioni CSS3 e l’ausilio di Backbone (che approfondirò in un articolo futuro), riscuotendo anche un notevole successo in fatto di download.

Ma perché ho introdotto Tint?

In questo articolo ti voglio parlare di una lezione importante nell’ottimizzare performance CSS3 di animazioni, transizioni ed effetti applicati ad elementi DOM, che ho personalmente imparato durante la mia esperienza nello sviluppo di Tint, la quale ha contribuito ad incrementarne notevolmente le prestazioni.

Nonostante sia da molto tempo che mi occupo di interfacce web, questa è stata la prima volta che ho avuto l’esigenza di ottimizzare al massimo le prestazioni in dispositivi che, per caratteristiche hardware, riescono difficilmente a supportare certi tipi di animazioni e transizioni.

Ho dovuto pertanto cambiare il modo di realizzare alcuni effetti che su smartphone si arrestavano o mostravano uno sfarfallio (quanto lo odio!), mentre per desktop non davano nessun problema.

Punto focale: il rendering

Quando parliamo di prestazioni su un browser, dobbiamo pensare in particolare al rendering e su come esso rappresenti la ragione principale per le scarse prestazioni derivanti dai nostri stili CSS3.

Mi spiego meglio:

i vari step che compongono il processo in base al quale il browser passa dalla “lettura” del DOM al “disegno” sullo schermo, si possono riassumere in 3 fasi principali, nell’ordine:

1. Calcolo dei stili: in questa prima parte vengono calcolate e definite tutte quelle proprietà che definiscono la morfologia dell’elemento, come width, height, margin, padding, font-size, top, left ecc.
2. Disegno dell’elemento: è il momento in cui l’elemento viene “arricchito” con proprietà come ombra, background, outline, border ecc..
3. Creazione dei layers: qui vengono creati i layer dei “disegni” appena creati, che si differenziano in due categorie: quelli per il render, i quali definiscono la struttura ad albero di elementi e sotto-elementi, e quelli grafici, che vengono creati ogni volta che la GPU viene chiamata in causa. Possiamo dire quindi che quest’ultimo processo interessa proprietà CSS3 come translate, transform, scale, rotate ecc..

La cosa più importante su cui soffermarsi è il fatto che queste tre operazioni vengono eseguite dal browser in coda. Per cui se ad un elemento DOM già disegnato sullo schermo, andiamo a modificare proprietà classificate nel primo punto, poi dovranno essere rieseguiti anche gli altri due step.

Se invece modifichiamo attributi appartenenti al secondo step, il browser si preoccuperà di eseguire anche il terzo step.

Infine, modificando proprietà classificate nell’ultimo step, il lavoro del browser sarà alleggerito notevolmente perché non dovrà rieseguire gli step precedenti.

Questo discorso vale in linea generale per tutti i tipi di browser, a parte il nostro solito amico/nemico Internet Explorer, del quale non abbiamo molte informazioni sul processo di rendering (confidiamo nelle future release).

Tutto questo per dire cosa?

Beh, se ho esposto bene il funzionamento di rendering, sarà facile darsi una risposta:

al fine ottimizzare al massimo le prestazioni di un’animazione bisogna fare in modo che il browser prenda la strada più corta per realizzarla.

Faccio un esempio banale.

Se dobbiamo spostare una div dalla parte superiore del documento a quella inferiore in modo animato, invece di applicare l’animazione all’attributo top o bottom, che costringerebbe il browser a ripetere tutte e 3 le fasi del processo per ogni singolo frame dell’animazione, la applicheremo alla proprietà transform: translate ( o transform: translate3d) le quali interesseranno solo l’ultimo dei 3 step.

In questo modo aumenteremo in modo considerevole la fluidità degli effetti dei nostri progetti.

Dall’esempio possiamo vedere due modi diversi di realizzare la stessa animazione, con performance CSS3 completamente differenti.

Di seguito elenco le proprietà per ognuno dei tre (macro) step.

Step 1: calcolo degli stili

Step 2: disegno dell’elemento

Step 3: creazione dei layers

Conclusioni

Una volta preso in considerazione questo importante discorso, la fluidità delle animazioni e transizioni applicate ai vari elementi della mia app Tint è aumentata in modo considerevole, avvicinandosi sempre di più a quella di applicazioni native (se vuoi vedere il risultato l’app è scaricabile nell’app store).

Spero quindi che anche tu applicherai questo importantissimo concetto nel tuo prossimo lavoro.

Buon divertimento!