In un precedente articolo avevo sottolineato le funzionalità che mette a disposizione il framework MVC, attraverso un tutorial che evidenzia come è possibile far interagire CSS3, HTML5 e javascript seguendo una logica di organizzazione ben strutturata.
Se ti interessa il tutorial leggi l’articolo:
In un altro articolo ti ho mostrato invece come creare Mobile App in HTML con Backbone.js, e di come mi sono servito di questo framework per la realizzazione di Tint, un’applicazione meteo che ho distribuito sull’App Store, riportando il case study delle varie fasi di sviluppo del progetto.
Tint è solo uno delle mie numerose Mobile App realizzate HTM5, come per esempio Dieta Si o NO?. Se anche tu vuoi creare mobile app in HTML 5, forse ti potrebbe interessare il mio e-book “HTML Mobile Accelerato“
Se ti interessa il case study su Tint, la mia applicazione mobile per il meteo, ti consiglio di leggere il seguente articolo:
Diverse volte ho discusso l’importanza di un pattern MVC per quanto riguarda la realizzazione di applicazioni web e applicazioni mobile, fornendo anche degli esempi concreti su come creare Mobile App in HTML utilizzando Backbone.js.
Sulla base delle numerosissime esperienze ritengo Backbone.js uno dei framework MVC più utili per la realizzazione di interfacce innovative e per la progettazione di un’esperienza-utente di alto livello (ovviamente dipende in alta percentuale dal lavoro svolto da parte dello sviluppatore).
Backbone consente infatti di suddividere tutti i componenti di un progetto (come template, viste, dati) a seconda degli scopi per i quali sono stati creati, secondo una struttura logica ben adeguata che segue degli standard provati, frutto del lavoro di una community di sviluppatori molto diffusa e in costante evoluzione.
Ma come tutti i framework, anche Backbone.js presenta sia vantaggi che svantaggi, e in questo articolo vedremo quali sono quelli principali.
Creare Mobile App in HTML e Web App: i vantaggi di Backbone.js
La semplicità
La semplicità e la fluidità che si riscontrano durante lo sviluppo è il primo dei vantaggi.
Solitamente molti sviluppatori alle prime armi con l’MVC risultano un po’ disorientati; ciò è del tutto normale quando si passa da una logica di programmazione ad un’altra.
Backbone semplifica questo passaggio fornendo una logica semplificata, e mettendo a disposizione solo 4 componenti (Model, Controller, View, Router), che però riescono ad offrire comunque un’architettura ben strutturata e facilmente mantenibile, la quale non ha nulla da invidiare agli altri framework MVC.
Superato lo scoglio iniziale per la comprensione della logica di funzionamento, diventa veramente facile sviluppare e modificare tutti i componenti di un’interfaccia.
Grande comunità di supporto
Intorno a Backbone.js si è sviluppato un vero e proprio ecosistema di supporto, praticamente qualsiasi problema, dubbio o perplessità sono già stati affrontati da altri sviluppatori. Pertanto risulta veramente facile trovare online le giuste risposte ai propri problemi (su StrackOverflow per esempio è possibile trovare praticamente qualsiasi soluzione).
Inoltre, Backbone.js viene costantemente aggiornato.
REST API per il salvataggio dei dati
Il salvataggio dei dati di Models e Collections predefinito di Backbone (uso il termine “predefinito” perché può essere facilmente personalizzato) è stato creato secondo la logica delle API REST, uno standard per la comunicazione tra server e client in termini di salvataggio dati.
Integrabilità
Backbone può essere usato benissimo insieme alla maggior parte dei mobile javascript frameworks (e non solo) che facilitano la realizzazione di single page application.
Mi è capitato di usare Backbone.js insieme all’ottimo framework CSS Ratchet 2, insieme a jQuery Mobile, integrandolo con l’App Framework di Intel, e con molti altri tipi di mobile frameworks (ne parlo in questo articolo ).
Il fatto è che in tutti i tipi di applicazione, indipendentemente da quale framework stiamo utilizzando, abbiamo comunque bisogno di definire una struttura dati (Model e Collection), di minimizzare numero di nodi HTML all’interno del documento (al fine di migliorare le performance della nostra applicazione) e di mantenere la struttura del progetto ben organizzata.
Backbone offre tutto questo.
Astrazione
Con Backbone abbiamo la possibilità di applicare al nostro progetto l’adeguato livello di astrazione a seconda delle sue dimensioni, evitando di includere dei componenti che risultino inutili rispetto a quelle che sono le nostre reali esigenze.
Personalizzazione
Backbone offre un alto livello di personalizzazione, in quanto uno stesso componente può essere dichiarato, esteso e riutilizzato in decine di modi diversi, a seconda delle abitudini dello sviluppatore, mantenendo comunque un livello di usabilità standard.
Creare Mobile App in HTML e Web App: gli svantaggi di Backbone.js
Ovviamente non è tutto oro ciò che luccica.
Anche Backbone ha i suoi svantaggi; se effettui una ricerca in rete troverai sicuramente qualche articolo che li elenca in una lista.
Sulla base dell’esperienza personale nell’utilizzo di questo framework per i miei progetti, posso elencare 2 svantaggi principali:
Il re-rendering al cambiamento dei dati.
AL fine di mantenere l’interfaccia sempre in linea con i dati, ovvero con i Model e le Collection associate, è pratica comune quella di ripetere il render completo di quella stessa view ogni volta che essi subiscono delle modifiche; ciò può incidere in modo negativo sulle prestazioni, aumentando considerevolmente, a seconda della complessità del DOM HTML utilizzato, il carico di lavoro per la CPU o la GPU del dispositivo mobile.
this.listenTo( this.model, “change”, this.render );
Il codice che vedi, se applicato ad una view che contiene un numero di nodi HTML abbastanza elevato, forzerebbe la CPU a ricalcolare gli stili e ripetere le fasi del processo di rendering per tutti quei nodi.
Nel metodo di salvataggio manca la possibilità di salvare in bulk
Ovvero di salvare più di un singolo Model (o record) allo stesso tempo, come per esempio un’intera Collection (una lista di record), dove per “salvare” intendo qualunque metodo di memorizzazione, come in-memory, localStorage, webSql e remoto (via chiamate Ajax).
E’ secondo me uno degli svantaggi più limitanti di Backbone.js, in quanto succede frequentemente, durante lo sviluppo di qualunque single-page-application, di dover modificare un certo parametro per più Models allo stesso tempo.
Con le funzionalità messe a disposizione da Backbone dovremmo scorrere tutti i record all’interno di un ciclo javascript e richiamare per ognuno di essi il relativo metodo Sync (che appunto ha il compito di salvare i dati in una delle forme prima elencate).
Se la nostra esigenza è quella di salvare i dati in locale, quindi nella memoria del dispositivo (come per es. tramite localStorage o webSql), allora questo non rappresenta un grandissimo problema, ma se avessimo la necessità di salvare i dati di più record in remoto, ciò significherebbe effettuare una chiamata Ajax per ognuno dei record da modificare.
Questo, dal punto di vista delle prestazioni, ma soprattuto da quello dell’ottimizzazione del traffico dati, rappresenta un aspetto veramente negativo.
Creare Mobile App in HTML: conclusioni sull’utilizzo di Backbone.js
Esempi di view dell’applicazione Tint realizzati con Backbone.js
Quelli elencati rappresentano solamente alcuni dei pro e contro di Backbone.js. Come puoi vedere tuttavia i vantaggi sono molto più numerosi rispetto agli svantaggi.
Inoltre gli svantaggi che ho evidenziato in questo post sono problematiche risolvibili:
- per il problema di re-rendering è possibile utilizzare plugin appositi che permettono di evitare di ripetere il rendering del DOM ogni volta che i dati subiscono delle modifche. Tali plugin offrono la possibilità per esempio di associare ad ogni proprietà di un determinato model il relativo elemento DOM che deve essere aggiornato.
- per quanto riguarda il problema del salvataggio in bulk invece, possiamo estendere i metodi di salvataggio con delle estensioni che effettuano delle chiamate remote personalizzate.
In definitiva quindi, posso affermare che Backbone.js è un ottimo framework MVC da utilizzare sia per creare Mobile App in HTML, che applicazioni web remote, o da implementare in normali siti web per migliorare la user-experience del visitatore.
Crea la tua applicazione mobile in HTML5, CSS3 e Javascript
Quella dell’utilizzo di Backbone.js è solo una delle tecniche di cui mi sono servito per sviluppare oltre 10 applicazioni mobile tra lavori per clienti e progetti personali (come Tint e Dieta SI o NO?). Se sei un web designer e vuoi realizzare la tua applicazione mobile, forse ti potrebbe interessare l’e-book che sto scrivendo: HTML Mobile Accelerato, dove inserirò tutte le tecniche che utilizzo solitamente per realizzare le mie mobile app.
7
22
4
9