Backbone.js mini guida
889 visite
In questo articolo vogliamo introdurre una libreria javascript che si basa sul paradigma di programmazione Model View Presenter (MVP) oppure conosciuto anche come un MV* in quanto implementa un model e una view e quest’ultima conterrà anche le funzionalità di controller.
Backbone.js è una libreria molto leggera e ha come dipendenza la sola librearia chiamata Underscore.js ricca di funzioni utili per sviluppare le nostre app lato front-end.
Backbone.js è usato da molti siti famosi come Foursquare, Linkedin Mobile, WordPress.com, AirBnb, Torrent.com e molti altri.
Il progetto backbone è ospitato da GitHub (http://github.com/jashkenas/backbone/) e la versione stabile è la 1.0.0.
Quando si sviluppa un’applicazione o un per esempio un sito di una certa complessità ci si renderà conto che è difficile mantenere coesione, disaccoppiamento delle classi e più in generale garantire scalabilità, solidità e mantenibilità del software per questo motivo esistono dei framework come Backbone.js che ci aiutano a sviluppare nel modo corretto.
In altre parole, Jeremy Ashkenas, il creatore di backbone, ha voluto creare una libreria minimale in modo da avere strumenti e metodologie utili ad organizzare il nostro codice javascript per ottenere il risultato migliore in termini di qualità di codice.
Nello sviluppo delle nostra applicazioni javascript avremo bisogno anche di altre librerie come jquery per la gestione degli elementi DOM delle nostre pagine e di json2.js per avere un protocollo di scambio nel caricamento asincrono dei dati e underscore come abbiamo detto all’inizio della guida. Naturalmente potremo includere tutte le librerie che ci servono.
Quindi ecco come sarà la nostra prima pagina html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world backbone</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script> <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> <script src="....altre librerie a nostro piacimento..."></script> </body> </html> |
Backbone è composto dai seguenti componenti di base:
Backbone.Model: modelliBackbone.Collection: liste di modelliBackbone.View: viewBackbone.Router: routing e gestione degli stati centralizzata
Ora descriviamo con degli esempi l’utilizzo di questi componenti.
Backbone.View
In questo esempio vogliamo creare una semplice vista minimale. Gli elementi da tenere in considerazione sono:
- ListView class: La nostra view Main App.
- initialize(): Metodo chiamato automaticamente che conterrà i nostri bindings, eventi UI come click ecc..
- render(): Funzione di rendering che dovrà essere chiamata manualmente.
- listView instance: Istanza della View
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
(function($){ var ListView = Backbone.View.extend({ el: $('body'), // elemento DOM di riferimneto `this.el` initialize: function(){ _.bindAll(this, 'render'); // correzioni in caso di perdita del contesto degli elementi this.render(); // chiamata al rendering }, render: function(){ $(this.el).append("<ul> <li>CIAO MONDO</li> </ul>"); } }); var listView = new ListView(); })(jQuery); |
il risultato sarà unapagina con scritto
- CIAO MONDO
Backbone.Collection e Backbone.Model
Nell’esempio che segue distinguiamo i seguenti elementi:
- Item class: Parte atomica del modello che è in pratica un oggetto javascript chiave-valore.
- List class: Collection di elementi. In pratica un array di Models.
- initialize() instanzia una Collection fa il bind degli enventi come appenItem.
- addItem() aggiunge item e l’update della View è delegata ad un listener chiamato appendItem() che vediamo qui sotto.
- appendItem() è il trigger che viene eseguito ogni volta che si aggiunge un elemento alla Collection.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
(function($){ var Item = Backbone.Model.extend({ defaults: { part1: 'ciao', part2: 'mondo' } }); var List = Backbone.Collection.extend({ model: Item }); var ListView = Backbone.View.extend({ el: $('body'), events: { 'click button#add': 'addItem' }, initialize: function(){ _.bindAll(this, 'render', 'addItem', 'appendItem'); this.collection = new List(); this.collection.bind('add', this.appendItem); // bind di un evento add alla collection this.counter = 0; this.render(); }, render: function(){ var self = this; $(this.el).append("<button id='add'>Aggiungi item alla lista</button>"); $(this.el).append("<ul></ul>"); _(this.collection.models).each(function(item){ // in caso di collection non vuota self.appendItem(item); }, this); }, addItem: function(){ this.counter++; var item = new Item(); item.set({ part2: item.get('part2') + this.counter // modifica dell'item di default }); this.collection.add(item); // aggiunge item alla collection; e la view viene aggiornata automaticamente }, appendItem: function(item){ $('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>"); } }); var listView = new ListView(); })(jQuery); |
Backbone.Router
Un esempio dell’utilizzo di Router dal sito di Backbone:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { ... } }); |
Sul sito ufficiale è presente una ricca documentazione, inoltre esistono delle librerie che estendono Backbone come Marionette.js una libreria di applicazioni composite per Backbone.js che mira a semplificare la costruzione di applicazioni JavaScript su larga scala.
Essendo queste librerie ospitate da Git Hub è possibile usare bower per installarle in modo semplice e veloce.
