Javascript MVC, realizzare la prima applicazione

24 gennaio 2012

In questo articolo introdurremo un framework di sviluppo scritto interamente in Javascript e dedicato alla creazione di applicazioni client side: Javascript MVC.

Il progetto assolve il non facile compito di aggregare e far cooperare in modo fluido ed organico alcune delle migliori librerie Javascript disponibili producendo uno strumento completo e molto potente. Affidandoci ai dettami del learning by doing affronteremo un piccolo progetto insieme in modo da saggiare le caratteristiche del framework.

Javascript MVC è composto da 4 librerie principali:

  • jQueryMX: un set di estensioni di jQuery che aiutano a sviluppare applicazioni aderenti al pattern MVC;
  • FuncUnit: consente di scrivere ed eseguire test per applicazioni Javascript;
  • StealJS: gestisce le dipendenze fra le varie librerie e offre alcune utility per la gestione del nostro codice;
  • DocumentJS: un ottimo engine per produrre documentazione da codice dell’applicazione.

Le librerie sono scaricabili all’occorrenza anche singolarmente ma, visto l’obiettivo dell’articolo, procediamo al download di Javascript MVC per intero, dal sito ufficiale. Una volta scaricato l’archivio, decomprimiamolo all’interno della cartella di root servita dal webserver installato sulla nostra macchina, rinominiamo quanto ottenuto come ‘javascript-mvc‘, e sinceriamoci che sia presente la versione 6.0 o superiore del Java Runtime Environment.

La prima applicazione con JavaScript MVC: Music Shelf

Grazie a StealJS è possibile beneficiare di alcuni comandi per la generazione del codice; proprio come succede per framework server side come Ruby on Rails possiamo creare la nostra applicazione semplicemente portandoci nella cartella appena creata ed eseguendo:

./js jquery/generate/app musicshelf 	# per linux e macOS
js.bat jquery\generate\app musicshelf 	# per windows

Una nuova cartella dal nome ‘musicshelf‘ dovrebbe confermare il buon esito dell’operazione, senza indugio puntiamo il browser all’indirizzo:

http://127.0.0.1/javascript-mvc/musicshelf/musicshelf.html

per essere accolti dalla pagina di benvenuto del framework.

Diamo un’occhiata alle cartelle ed ai file che il generatore ha creato per noi:

CampoDescrizione
musicshelf.js
musicshelf.html
musicshelf.css
rappresentano il punto di ingresso dell’applicazione nei suoi tre aspetti, html, css e javascript. Vista la natura del framework il compito di coordinamento spetterà proprio a musicshelf.js
docslo spazio dedicato alla documentazione di progetto
fixturescontiene dei dati finti utilissimi per testare e lavorare nelle fasi iniziali del progetto: in questo modo possiamo posticipare la creazione di un web service con il quale far dialogare la nostra applicazione simulandone le interazioni attraverso i file contenuti in questa cartella
scriptsraccoglie alcuni script di manutenzione che possono essere lanciati per richiedere, ed esempio, la generazione della documentazione di progetto o la pulizia e la validazione automatica del codice sviluppato
testin questa cartella sono racchiusi i file di test sia di tipo funzionale che unitario

Javascript MVC, caricare l’applicazione

Se analizziamo musicshelf.html notiamo che l’unica inclusione javascript è la seguente:

<script type='text/javascript' src='../steal/steal.js?musicshelf'></script>

Questa request carica sia la libreria StealJS sia il file musicshelf.js, responsabile di ogni altra richiesta dell’applicazione:

steal(
	'./musicshelf.css', 		// il css dell'applicazione
	'./models/models.js', 		// carica i modelli (se presenti)
	'./fixtures/fixtures.js', 	// carica i files con i dati fittizi
	function(){ 				// eventuali configurazioni da eseguire
		// a caricamento completato
	}
)

La predisposizione dell’applicazione interessa anche la parte dei test, ovviamente non ne abbiamo ancora scritto nessuno ma l’impianto già funziona perfettamente: per verificarlo di persona basta puntare il browser all’indirizzo:

http://127.0.0.1/javascript-mvc/musicshelf/qunit.html

per avere un report sull’esecuzione dei test unitari e a

http://127.0.0.1/javascript-mvc/musicshelf/funcunit.html

per quelli funzionali.

Se vuoi aggiornamenti su Javascript MVC, realizzare la prima applicazione inserisci la tua e-mail nel box qui sotto:
mvc
 
X
Se vuoi aggiornamenti su Javascript MVC, realizzare la prima applicazione

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy