Backbone.js mini guida

807 visite

Backbone.js

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:

Backbone è composto dai seguenti componenti di base:

  • Backbone.Model: modelli
  • Backbone.Collection: liste di modelli
  • Backbone.View: view
  • Backbone.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

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.

Backbone.Router

Un esempio dell’utilizzo di Router dal sito di Backbone:

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.

Iscriviti alla newsletter e rimani sempre aggiornato

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *