Una delle principali preoccupazioni di chi costruisce sistemi di una certa complessità è l'adozione di tecniche, approcci e tecnologie che ne semplifichino la manutenzione ed offrano un'alta flessibilità.
A questa logica non può sfuggire la realizzazione delle pagine Web: creare pagine facilmente modificabili, adattabili a diverse modalità di visualizzazione, con la possibilità di cambiare l'aspetto grafico senza intaccare i contenuti è sicuramente una cosa... che farebbe comodo!
Purtroppo spesso i problemi di realizzazione e di manutenzione di un progetto Web derivano dal fatto che in esso confluiscono e si sovrappongono competenze (e spesso persone) diverse: il grafico, il redattore dei contenuti, il programmatore. Questa sovrapposizione può portare a situazioni in cui il redattore deve stare attento a quello che modifica perchè il suo intervento potrebbe rendere inefficace qualche script inserito dal programmatore o eliminare qualche artificio estetico introdotto dal grafico.
Riflettendo su queste considerazioni ho pensato che sarebbe possibile reinterpretare le tecnologie client-side del Web e l'interattività delle pagine secondo un classico design pattern del mondo dello sviluppo software: il pattern Model View Controller (MVC).
Il pattern MVC
Il pattern MVC è un modello architetturale per un sistema che
- rappresenta dei dati (Model),
- li visualizza secondo una o più modalità di visualizzazione (View)
- e gestisce le relative interazioni con il mondo esterno (Controller).
Di solito tale modello è utilizzato nell'ambito dello sviluppo del software per la realizzazione di interfacce utente e consente di rendere modulare la gestione dell'interfaccia con diversi benefici in termini di manutenibilità e flessibilità. Ad esempio, separando i tre componenti possiamo sostituirne uno in maniera opportuna senza necessità di dover riscrivere gli altri due componenti; possiamo anche creare diverse viste per lo stesso modello; oppure possiamo coinvolgere competenze diverse per la realizzazione dei diversi componenti del pattern.
Una pagina Web non è altro che un particolare tipo di interfaccia utente. Come possiamo applicare i concetti dell pattern MVC alla realizzazione di pagine Web? Basta utilizzare in maniera opportuna tecnologie standard come XHTML, CSS e JavaScript!
Reinterpretando il pattern MVC alla luce di queste tecnologie possiamo utilizzare XHTML come linguaggio per definire il Model (la rappresentazione dei dati, cioè del contenuto), CSS per definire il View (la presentazione dei dati) e JavaScript per gestire l'interazione con l'utente (Controller). Niente di nuovo, quindi. Il trucco sta nell'utilizzare queste tre tecnologie in modo che cooperino... in modo autonomo.
Separare il contenuto dalla presentazione
Il primo passo da seguire nell'applicazione (o meglio, nella reinterpretazione) del pattern MVC alle pagine Web è la definizione del contenuto, cioè del Model.
Il Model rappresenta i dati, il contenuto e la struttura logica di una pagina Web. Esso viene descritto tramite XHTML, in particolare con la versione strict di questo linguaggio, ossia con la versione che esclude qualsiasi utilizzo di tag ed attributi di formattazione. XHTML deve servire esclusivamente a definire la struttura del documento che contiene i dati. Quindi <div>, <span>, <ul>, <table>, etc.
Il compito di definire come il documento verrà visualizzato è affidato a CSS, che implementa il View del pattern MVC. La soluzione migliore per applicare il principio di separazione tra i componenti consiste nel creare CSS esterni, in modo che la loro manutenzione sia semplificata. Modalità di visualizzazione diverse corrisponderanno a fogli di stile CSS diversi.
Un controllo non invadente
La separazione tra contenuto e presentazione di cui abbiamo appena parlato è una tecnica abbastanza nota. Meno noto è invece come separare il Controller, cioè gli script JavaScript che gestiscono l'interattività, dal documento. Per gestire l'interattività dell'utente con una pagina Web siamo abituati ad utilizzare gli attributi onclik, onload e simili. Come facciamo a collegare una routine JavaScript con gli eventi senza utilizzare questi attributi?
Un modo c'è e non è poi così difficile. Per ottenere questa separazione occorre interagire con il Document Object Model della pagina Web assegnando le routine di gestione degli eventi allo specifico evento tramite codice JavaScript.
Supponiamo, ad esempio, di avere il seguente codice XHTML:
Listato 1. Un bottone in XHTML
<html>
<head>
</head>
<body>
<form>
<input type="button" id="btnClick" value="Clicca"/>
</form>
</body>
</html>
Per assegnare la visualizzazione di un semplice alert() al clic sul pulsante possiamo creare un file, ad esempio "test.js" contenente il seguente codice JavaScript:
Listato 2. Assegnare una funzione al bottone
var item = document.getElementById("btnClick")
item.onclick = function() { alert("test!") }
La prima riga individua l'oggetto del DOM corrispondente al pulsante, mentre la seconda riga assegna all'attributo onclick una funzione che esegue semplicemente una alert().
A questo punto è sufficiente inserire nel documento XHTML il riferimento al file "test.js":
Listato 3. Inserire un JavaScript esterno
<script type="text/javascript" src="test.js"></script>
È molto importante inserire questo riferimento in fondo al documento, prima del tag di chiusura </body>, in modo che il browser abbia già creato il Document Object Model del documento quando vi accederemo tramite JavaScript.
Applicando questo semplice principio di separazione tra documento XHTML e codice JavaScript abbiamo completato la strutturazione della pagina Web secondo il pattern MVC.
Elaborazione server-side
Naturalmente le considerazioni fatte in questo articolo valgono soltanto per le tecnologie lato client. Per quanto riguarda l'elaborazione lato server la cosa si complica un po'.
Infatti, le tecnologie lato server più note, da ASP a PHP, da ColdFusion a JSP, prevedono un modello di elaborazione basato su template. Un tale modello presuppone la commistione di struttura e codice, impedendo di fatto la separazione tra Model e Controller.
Un piccolo tentativo può essere considerato quello basato sulla tecnica del code-behind di ASP.NET, che consente di ottenere una certa separazione tra la struttura della pagina ed il codice server-side, anche se il codice client-side generato dal framework introduce nuovamente una miscela di estetica e script difficile da disaccoppiare.
Conclusioni
Reinterpretando, quindi, le tecnologie di base per la costruzione di pagine Web alla luce di un modello ormai consolidato nel mondo del software, abbiamo la possibilità di ottenere pagine aderenti agli standard W3C e di semplice gestione.
L'applicazione del pattern MVC, inoltre, propone un approccio per la cooperazione proficua delle persone con competenze diverse coinvolte nello sviluppo di un sito Web in tutti i suoi aspetti: i contenuti, l'estetica e la programmazione.
