Come creare una HTML5 Mobile App con Backbone.js

marzo 15, 2014
Share on Facebook0Tweet about this on Twitter0Pin on Pinterest1Share on Google+0
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 :

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:

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.

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.

HTML5-Mobile-App-Backbonejs

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).

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

Il markup HTML

markup-html

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

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:

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

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

html5-mobile-app-list-view

 View di dettaglio

html5-mobile-app-details

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:

 

Ultimo step: avviamo la nostra HTML5 Mobile App!

start-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:

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

Conclusioni, demo e download

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:


Crea la tua mobile app in HTML, CSS3 e Javascript

Utilizzando questa tecnica insieme a molte altre, ho realizzato più di 10 mobile app in HTML, CSS3 e Javascript (tra cui Tint e Dieta SI o NO?).

Se anche tu vuoi realizzare la tua applicazione in HTML, CSS e javascript da distribuire nei vari store, forse potrebbe interessarti il mio e-book HTML Mobile Accelerato.

HTML-mobile-accelerato-ebook-cover

Giacomo Freddi

Web Designer Freelance e Developer, si occupa del design e dello sviluppo di applicazioni web dal 2008, come molti freelance è abituato a gestire più ruoli e spaziare su più campi, ma la sua passione principale è quella della creazione di interfacce front-end e back-end utilizzando codice html5 e css3. Adora usare pattern MVC per i suoi Javascript.

  • Pingback: Smplice HTML5 Mobile App con Bootstrap Ratchet e Backbone.js | upCreative()

  • sixdas

    Ciao, dove posso recuperare la demo?

    • Giacomo Freddi

      Ciao! Basta condividere la risorsa con Facebook, google plus o Twitter e potrai vedere la demo o scaricare il file..

      Se hai problemi fammi sapere !!

      Giacomo

      • sixdas

        Fatto, ma non vedo il link per il download :)

        • Giacomo Freddi

          Te lo mando in privato ;)

          • sixdas

            ok grazie!

          • stecas

            Anche a me non compare, puoi mandarlo anche a me gentilmente? Grazie

          • Giacomo Freddi

            Ciao @stecas:disqus scrivimi direttamente a info@upcreative.net e ti invierò il file!

  • Pingback: Come creare un app: realizzare una view di login con il localStorage | upCreative()

  • Francesco

    Ciao Giacomo ho condivo il post su FB ma non ho ricevuto il link per scaricare la demo, potresti aiutarmi?
    Grazie mille
    Ciao Francesco

    • Giacomo Freddi

      Ciao Francesco ti ho inviato il link via mail.. ;)

  • Fabrizio

    Ciao ho condivo il post su Google plus ma non ho ricevuto il link