MVC/MVVM Pattern

Uno dei più noti pattern architetturali è MVC (Model-View-Controller) Pattern che si pone l'obiettivo di disaccoppiare l'interfaccia utente dal modello dei dati in modo da ottenere un'architettura più flessibile. Come suggerisce il nome, questo pattern si basa su tre componenti:

Model	Rappresenta i dati da gestire tramite l'interfaccia utente
View	Corrisponde all'insieme degli elementi dell'interfaccia utente che mostrano i dati del Model, cose come label, caselle di testo, immagini, etc.
Controller	È il componente che fa da collante tra il Model e la View e definisce le funzionalità dell'applicazione; in pratica il Controller implementa la relazione tra il Model e la View.

Per fissare meglio le idee, immaginiamo di dover creare un'interfaccia Web per la gestione di dati anagrafici. I ruoli del pattern MVC andranno così suddivisi:

• il Model sarà costituito dall'oggetto che rappresenta una persona;
• la View dall'HTML che mostra i dati della persona e ne permette l'interazione con l'utente, come ad esempio il salvataggio dopo una modifica;
• il Controller da un oggetto che si occuperà di fornire i dati da mostrare alla View e di gestire i comandi impartiti dall'utente.

Alla luce di queste considerazioni, possiamo scrivere il seguente codice HTML per l'interfaccia Web:

<label for="txtNome"><input id="txtNome" type="text" value=""/><br/>
<label for="txtCognome"><input id="txtCognome" type="text" value=""/><br/>
<button id="btnSalva"/>Salva</button><br/>

che sarà gestita dal seguente codice JavaScript:

var model = { nome: "Mario", cognome: "Rossi" }; 
var view = {
		txtNome: document.getElementById("txtNome");
		txtCognome: document.getElementById("txtCognome");
		btnSalva: document.getElementById("btnSalva");
}; 
var controller = {
	init: function() {
		view.txtNome.value = model.nome;
		view.txtCognome.value = model.cognome;
		view.btnSalva.onclick = controller.salva;
	},
	salva: function() {
		model.nome = view.txtNome.value;
		model.cognome = view.txtCognome.value;
		//invia il model al server
		invia(model);
	}
};

Per la definizione dell'oggetto view abbiamo fatto ricorso all'oggetto document, che fa parte del DOM (Document Object Model) il modello a oggetti delle pagine HTML. Per il momento ci basta sapere che tramite il metodo getElementById() di questo oggetto abbiamo accesso agli elementi definiti nella pagina HTML che rappresenta la nostra interfaccia Web.

L'oggetto controller ha due metodi:

• init(), che inizializza la view associando a ciascun elemento grafico il corrispondente valore dell'oggetto model;
• salva(), che assegna all'oggetto model i valori prelevati dall'oggetto view ed invia il model al server tramite un'ipotetica funzione invia().

Notiamo che la funzione init() si occupa anche di assegnare al click sul pulsante btnSalva l'esecuzione del metodo salva() del controller.

Questa architettura rende indipendente il Model dalla View, facendo sì che eventuali modifiche implementative sulla View non interferiscano sul Model e viceversa.

MVVM

Una variante del pattern MVC è MVVM, Model View ViewModel. Questo pattern propone un ruolo più attivo della View rispetto a MVC: la View è in grado di gestire eventi, eseguire operazioni ed effettuare il data-binding. In questo contesto, quindi, alcune delle funzionalità del Controller vengono inglobate nella View, la quale si appoggia su un'estensione del Model: il ViewModel.

Il ViewModel è quindi un Model esteso con funzionalità per la manipolazione dei dati e per l'interazione con la View.

Aldilà delle sottigliezze concettuali, il pattern MVC e dei suoi derivati ha un impatto positivo nella progettazione di interfacce utente ed il suo successo in ambito JavaScript è testimoniato dalle diverse librerie disponibili che facilitano il suo utilizzo.