Semplice HTML5 Mobile App con Bootstrap Ratchet e Backbone.js

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

HTML5-Mobile-App-con-Bootstrap-Ratchet2-Backbone.js

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:

composizione-backbone-views

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:

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

Definizione di model e collection

Vediamo come definire il model e la collection deli articoli:

Le view

Ecco come si presenta la view principale:

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:

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

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:

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

Avviamo l’applicazione

Avvio-HTML5-Mobile-App-Ratchdet-e-Backbonejs

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

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:


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: Semplice HTML5 mobile app con Backbone.js e Rat...()

  • Alessandro

    ciao giacomo, anzitutto mi complimento con il tuo blog, molto tecnico.
    Ho iniziato ad usare ratchet per un progetto, ma sono confuso.
    Non riesco ad attivare la classe Modal,
    Nel sito ci sono due tipi di documentazione

    forse la documentazione base non va bene?

    • Giacomo Freddi

      Ciao Alessandro, grazie per i complimenti.

      L’ho testato personalmente e sembra funzionare correttamente, forse sbagli qualcosa nell’installazione?

      Per essere sicuro di impostare correttamente il documento controlla la sezione “Basic Template” di questa pagina: http://goratchet.com/getting-started/

      Dovrebbe bastare per far funzionare la funzionalità Modal,

      Fammi sapere .. ;)

      • Alessandro

        grazie per la disponibilità, non mi funziona ancora.

        Ho scaricato la versione ‘liscia’, quindi non la source code, ho copiato ed incollato il basic template, aggiornato i collegamenti e ho sempre copia incollato il sorgente del modals dalla pagina componenti:
        http://goratchet.com/components/#modals
        ed inserito nella pagina basic, ma niente.

        Sulla source code nella cartella js trovo dei file javascript di cui uno di questi si chiama appunto modals, potrebbe essere questa la soluzione?

        • Giacomo Freddi

          Ho “spulciato” il codice ed ho trovato il problema, nel mio caso non lo avevo visto perché stavo guardando un mio progetto in cui lo avevo già aggiustato:

          non hai bisogno di includere nient’altro di diverso dalla pagina di esempio fornita nella sezione “Basic Template”; i fatto è che i modals sono “riconosciuti” solo per l’evento “touchend”, quindi testabili solo nei dispositivi mobile.

          Per farlo funzionare anche su browser devi effettuare questa piccola modifica:

          – apri il fiel ratchet.js
          – vai alla riga 41 ed aggiungi all’evento “touchend” anche l’evento “click”, come segue:

          riga 41: window.addEventListener(‘touchend click’, function (event) {

          Il gioco è fatto!
          Fammi sapere ;)

          • Alessandro

            Funziona! grazie

  • Pingback: Creare Mobile App in HTML e Web App: benefici e svantaggi di Backbone()

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