Creare una Single Page Application con ASP.NET MVC e DurandalJS

di , in ,

In un precedente articolo abbiamo visto cosa sono le SPA, quali benefici queste portino in termini di user experience e quali vantaggi e svantaggi comportino in termini di sviluppo. In questo articolo cominceremo a parlare in maniera più approfondita di questo pattern cominciando a vedere anche un esempio di applicazione SPA.

Il pattern Single Page Application (SPA d'ora in poi) è un modello di sviluppo web che sta prendendo sempre più piede. Una SPA è un'applicazione che prevede un modello di sviluppo completamente diverso dalle classiche applicazioni web. In una SPA l'applicazione è suddivisa in due layer principali con responsabilità ben precise: il client e il server. Il client ha la responsabilità di mostrare i dati all'utente e di permettere a questo di interagire con i dati stessi. Il server ha il compito di fornire le API di accesso ai dati che sono accedute dal client sia per leggere che per scrivere.

Il layer client, e questa è la grande novità, è sviluppato completamente in JavaScript, HTML e CSS e quindi gira interamente sul browser. Il layer server può essere invece sviluppato utilizzando qualunque piattaforma server (Web API, ASP.NET MVC, ma anche servizi basati su Java o PHP o altro ancora). Client e server comunicano sfruttando normali richieste AJAX (in genere tramite il protocollo REST).

Sviluppare una SPA da zero significa doversi occupare di diversi aspetti come la navigazione tra le pagine, il binding dei dati all'interfaccia, il download dei file JavaScript e HTML necessari, la compatibilità tra browser e altro ancora. Creare queste funzionalità partendo da zero, non è semplice in quanto richiede una notevole conoscenza del JavaScript e una notevole quantità di tempo. Fortunatamente, la continua crescita e standardizzazione del JavaScript tra i vari browser ha permesso la creazione di framework che si occupano di gestire la maggior parte delle complessità infrastrutturali di una SPA lasciando a noi il solo compito di scrivere il codice di business. Al momento, i due migliori framework per creare SPA sono AngularJS e DurandalJS . In quest'articolo ci occuperemo di DurandalJS.

D'ora in poi utilizzeremo DurandalJS per mostrare come creare una SPA e lasceremo AngularJS a un futuro articolo.

Ora che abbiamo capito cosa andremo a mostrare in quest'articolo e quale framework utilizzeremo, vediamo come funziona DurandalJS.

Introduzione a DurandalJS

DurandalJS è un framework sviluppato dal team di Caliburn.Micro, uno dei framework MVVM più usati nelle applicazioni basate su XAML come Windows Phone, Windows 8, e cosi via. Forte di questa esperienza, il team ha creato un framework che permette di utilizzare il pattern MVVM anche in applicazioni JavaScript (in questo articolo non parleremo del pattern MVVM in quanto è stato trattato diverse volte in passato sul sito WinFXItalia.com a proposito di WPF).

La potenza di DurandalJS consiste nel fatto che il team non ha reinventato la ruota da zero, bensì ha riutilizzato framework già largamente diffusi sul web, come KnockoutJS, RequireJS e jQuery e li ha messi insieme. Grazie a questo approccio, l'esperienza di sviluppo di una SPA con DurandalJS è molto semplice e intuitivo grazie al fatto che non dobbiamo imparare molte cose nuove visto che possiamo riutilizzare gran parte delle nostre conoscenze.

DurandalJS sfrutta jQuery per le promise e per la manipolazione del DOM, sfrutta KnockoutJS per l'implementazione del pattern MVVM e sfrutta RequireJS per una perfetta modularizzazione del codice. Tuttavia, queste caratteristiche non bastano a creare una SPA. Servono infatti un meccanismo di navigazione e un servizio di messaggistica, oltre che un sistema di routing che mappi gli url alle relative view, un meccanismo per le popup, uno splash screen e altro ancora. Tutti questi aspetti sono coperti da DurandalJS che quindi interviene li dove i framework che ne sono alla base non arrivano. Cominciamo ora col vedere come creare una SPA basata su DurandalJS con Visual Studio.

3 pagine in totale: 1 2 3
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

Creare una Single Page Application con ASP.NET MVC e DurandalJS 1010 3
| Condividi su: Twitter, Facebook, LinkedIn, Google+

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti