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
Configurare policy CORS in Azure Container Apps
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Load test di ASP.NET Core con k6
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Usare un KeyedService di default in ASP.NET Core 8
Usare una container image come runner di GitHub Actions
Generare file PDF da Blazor WebAssembly con iText
Creare moduli CSS in React
Sfruttare lo streaming di una chiamata Http da Blazor
Miglioramenti agli screen reader e al contrasto in Angular
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Top Ten Articoli
- Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Utilizzare scene 3D in Windows Presentation Foundation
di Marco Leoncini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - 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 - 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
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Paginare i risultati con QuickGrid in Blazor
- Ottimizzazione dei block template in Angular 17
In evidenza
- Il meglio della settimana
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Ottimizzazione dei block template in Angular 17
- Utilizzare il trigger SQL con le Azure Function
- Paginare i risultati con QuickGrid in Blazor
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions