Javascript MVC

21 settembre 2009

Questa è la traduzione dell’articolo Javascript MVC di Jonathan Snook, pubblicato originariamente su A List Apart il 18 Agosto 2009. La traduzione viene qui presentata con il consenso dell’editore (A List Apart Magazine) e dell’autore.

Se un tempo era un attore secondario, oggi Javascript ha guadagnato una posizione centrale sul palcoscenico. Il suo ruolo, lo spazio che occupa sui nostri server e nelle nostre attività di sviluppo continuano a crescere. E allora, come possiamo rendere il nostro Javascript più riusabile e facile da mantenere? Forse MVC può offrirci un modo per raggiungere questo risultato.

Se MVC è un termine familiare a quanti sono impegnati nello sviluppo di applicazioni sul lato back-end usando framework come Struts, Ruby on Rails e CakePHP, l’origine di MVC nello sviluppo di interfacce utente si adatta anche alle applicazioni client-side. Esaminiamo allora cos’è MVC, come possiamo usarlo per ristrutturare un progetto di esempio e consideriamo alcuni framework MVC.

Cos’è MVC?

L’acronimo è stato usato già sei volte in questo articolo e, se non lo avete sentito prima, vi starete forse chiedendo cosa significa. MVC sta per Model-View-Controller (Modello-Vista-Controllore). È un pattern architetturale che spezza un’applicazione in tre parti: i dati (Model), la presentazione dei dati all’utente (View), le azioni ricevute da qualunque interazione dell’utente (Controller).

Nel 1978, allo Xerox PARC, Trygive Reensaku ha così ricordato le origini del concetto di MVC (PDF):

“Ci sono quattro ruoli in questo paradigma dell’interazione con l’utente. L’utente Umano ha un modello mentale dell’informazione che egli sta gestendo in uno specifico momento. L’oggetto che svolge il ruolo del Model è la rappresentazione interna e invisibile che il computer ha di questa informazione. Il computer presenta differenti aspetti dell’informazione attraverso oggetti che svolgono il ruolo di View, diverse Views (viste) degli stessi oggetti possono essere contemporaneamente visibili sullo schermo di un computer. Gli oggetti che svolgono il ruolo di Controller traducono i comandi dell’utente in messaggi appropriati per gli oggetti View o Model a seconda delle necessità.”

In altre parole, un utente fa qualcosa. Questo “qualcosa” viene passato ad un Controller che controlla cosa dovrebbe accadere successivamente. Spesso, il Controller richiede dati dal Model e quindi li passa alla View, che li presenta a sua volta all’utente. Ma cosa significa questa separazione per un sito o un’applicazione web?

Le basi

Un documento statico è la base di una pagina web. Ogni pagina che ci viene servita rappresenta lo stato dell’informazione sul server in quel momento. Ma non riceviamo solo dati grezzi, otteniamo invece una pagina HTML che il browser rende in tutta la sua bellezza impostata grazie ai CSS.

Anni fa, se volevamo modificare quei dati, il server doveva presentare una pagina con input e aree di testo per rendere possibili i cambiamenti. Rispedivamo allora quei cambiamenti indietro verso il server e aspettavamo fino a quando non ci veniva risposto che era tutto a posto. Richiedere una pagina completamente nuova ogni volta che volevamo apportare dei cambiamenti divenne presto qualcosa di fastidioso per l’utente, ancora di più quando egli compiva qualche errore e doveva reinserire i dati.

Il cavaliere con la sua scintillante armatura

Da quei giorni lontani, Javascript, con Ajax, è intervenuto a modificare in meglio lo scenario. Esso ci consente di aggiornare elementi della pagina e di rimandare al server le richieste dell’utente. Ancora più importante è il fatto che consente alle nostre pagine di riflettere le richieste dell’utente senza dover aspettare il server.

Ora, a questo livello dello sviluppo e dell’adozione di Javascript e Ajax, abbiamo bisogno di considerare l’idea di separare i componenti del nostro codice in base allo stile definito dal modello MVC. Questo tipo di separazione potrebbe non essere necessaria in ogni situazione e in certi casi potrebbe rendere le cose complicate senza che ce ne sia bisogno. Di fatto, però, man mano che le nostre applicazioni diventano più complesse e richiedono interazioni Javascript in molte parti del sito, separare Javascript in Model, View e Controller può produrre un codice più modulare e riutilizzabile.

Se vuoi aggiornamenti su Javascript MVC inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Javascript MVC

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing