MVC Backbone per creare applicazioni web HTML5

0000

La scorsa settimana ho introdotto a grandi linee gli argomenti principali di cui parlerà la serie di post/tutorial su come creare applicazioni HTML5, CSS3 e Javascript; in questo post ci soffermeremo in particolare sul design pattern da impiegare per l’architettura dei nostri progetti e di quale framework servirci per la sua realizzazione.

Leggi anche:

• Web applications: scrivere codice ben strutturato con i javascript design patterns
• Creare applicazioni web: il pattern Model-View-Controller ed i principali MVC javascript frameworks

Utilizziamo il pattern MVC

Perché ho scelto il tipo di pattern Model-View-Controller?

Innumerevoli sono i benefici che questo tipo di architettura comporta, ma il primo fra questi è l’indipendenza di ogni componente rispetto agli altri: il Model agisce solamente all’interno del suo ambiente, servendosi di metodi pubblici per l’esclusiva gestione dei dati al suo interno; chi usa quei metodi come le Views o i Controllers non devono minimamente preoccuparsi di quello che accade all’interno dell’oggetto passato.

Ne consegue che la View deve svolgere il minimo lavoro per creare o modificare il DOM in base al record passato e agisce in modo “ignorante” rispetto ad ogni altra View, diventando così un componente altamente riutilizzabile; il Controller, che conosce invece ogni singola View o quelle a cui esso ha accesso, si preoccupa di gestire le connessioni fra le stesse.

Quindi perché scegliamo l’MVC? Ecco i motivi principali per cui ho scelto questo pattern:

• presenta una logica semplice
• la creazione dei dati avviene secondo una convenzione generica
• la riusabilità delle varie parti dell’interfaccia e la loro indipendenza da qualsiasi altro controllo
• la sacrificabilità del controller, come elemento indipendente dai record e dall’interfaccia
• l’eliminazione di buona parte del lavoro al server, come la manipolazione dei dati oppure la creazione dei template

Negli prossimi articoli ti mostrerò come ogni elemento della nostra applicazione HTML5 (come modals, pagine, alerts, liste, menu ecc.) è gestito dalla propria View e come più di una View si aggiorna alla modifica del record di un model in modo del tutto indipendente, il tutto minimizzando al massimo il minor numero di righe di codice.

MVC Backbone – scelta del framework

Il primo framework nella serie di tutorial che analizzerò sarà Backbone; come già accennato in un precedente articolo, backbone.js è una libreria molto completa, in quanto presenta tutti gli elementi di cui abbiamo bisogno:

1. I model
2. Le view
3. Le collection (liste di models)
4. Il router (utilissimo per le HTML5 single page app)
5. Un valido sistema di templating (con la possibilità, ovviamente, di utilizzarne altri)

Leggi anche:

• I sistemi di javascript templating e le migliori librerie

Dalla lista è possibile notare che Backbone non offre un componente chiaramente identificato come controller, quindi è possibile dire che il pattern utilizzato da backbone è un MV*, anche se di solito si utilizza una View principale o il Router che funge da Controller.

Nel prossimo articolo ti mostrerò come impostare il documento per una applicazione web in HTML5, CSS3 e Javascript con backbone.js, tramite un interessante tutorial in cui una view si aggiorna ogni volta che il model subisce dei cambiamenti.

EDIT: ho scritto un post su come impostare un documento con Backbone.js e su come una view reagisce ai cambiamenti del model ad esso associato per il blog  lobaedesign.com: Tutorial Backbone.js: come realizzare un orologio analogico CSS3 e JavaScript con animazione

Web App create con Backbone.js

Di seguito alcune web app di successo realizzate in HTML5 e Javascript utilizzando backbone.js, o che lo usano per alcuni dei loro componenti:

New Rdio

Quartz

Flow

Foursquare

Disqus

Delicious

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.

• Mail
|
• Web
|
• Twitter
|
• LinkedIn
|
• Google+
|
• More Posts (82)