Creare una Single Page Application con ASP.NET MVC e DurandalJS
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.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare lo spread operator con i collection initializer in C#
Gestire il colore CSS con HWB
Migliorare la sicurezza dei prompt con Azure AI Studio
Generare la software bill of material (SBOM) in GitHub
Sfruttare al massimo i topic space di Event Grid MQTT
Utilizzare Model as a Service su Microsoft Azure
Cancellare una run di un workflow di GitHub
Utilizzare il trigger SQL con le Azure Function
Referenziare un @layer più alto in CSS
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Eseguire operazioni sui blob con Azure Storage Actions
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Utilizzare scene 3D in Windows Presentation Foundation
di Marco Leoncini - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Il meglio della settimana
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub