Blazor e il pattern Model-View-ViewModel

di Giampaolo Tucci, in ASP.NET Core,

Qualche mese fa abbiamo introdotto la gestione dello state-container in Blazor per condividere lo stato dell'applicazione tra diversi componenti: ora esporremo un differente approccio basato sul pattern Model-View-ViewModel.

Questo pattern, anche se nato per essere utilizzato nell'ambito desktop, può essere utilizzato efficacemente per scrivere applicazioni in Blazor, pur se per la sua adozione non viene fornito alcun tipo di supporto nativo. Si tratta di una mancanza che probabilmente non sarà nemmeno colmata nelle future release: infatti gli stessi creatori di Blazor hanno evidenziato come questo sia stato progettato in modo da non avvantaggiare alcun pattern di sviluppo particolare, in modo da favorirne la massima flessibilità nel suo utilizzo.Riguardo a MVVM gli stessi hanno anche affermato che "Blazor nel futuro non favorirà in alcun modo l'adozione di MVVM ma nemmeno ne bloccherà o svantaggerà in alcun modo l'utilizzo".

In questo articolo analizzeremo inizialmente le basi fondanti del pattern, quindi svilupperemo una semplice web application che ne utilizza le peculiarità. Vedremo come l'utilizzo del pattern MVVM in Blazor risulta essere facile e intuitivo, pur senza avere l'ausilio di alcun strumento nativo fornito dal framework, e permette di ottenere diversi vantaggi legati all'organizzazione del codice e delle logiche di funzionamento.

A completamento introdurremo un progetto di unit test che, grazie all'adozione di questo pattern, risulta favorito nella sua implementazione.

Descrizione del pattern

Prima di descrivere come implementare il pattern in un progetto Blazor scriveremo qui le basi teoriche che sottendono il suo funzionamento.

Figura 1

Il pattern Model-View-ViewModel (MVVM) è stato introdotto da Microsoft per favorire lo sviluppo in ambito Windows Presentation Foundation (WPF). Ad oggi viene estensivamente usato anche con molti altri framework, per esempio nello sviluppo mobile tramite Xamarin. Il suo intento è quello di separare il codice che gestisce l'interfaccia da quello della logica di business, in modo da semplificarne la scrittura, l'organizzazione e la testabilità.

Nell'ambito del pattern vengono identificati i seguenti componenti costitutivi.

  • Model: normalmente comprende sia le classi POCO che contengono la struttura dei dati trattati, sia i servizi applicativi per interagire con database o servizi esterni.
  • View: è rappresentata dall'interfaccia utente, che permette agli utilizzatori di interagire con i dati qui presentati. Nell'ambito Blazor si tratta dei componenti razor. Fanno parte della view anche eventuali file di code-behind, quando necessari per implementare logica strettamente correlata alla view stessa, come per esempio impostare il focus su un determinato componente.
  • ViewModel: rappresenta il collante tra la View e il Model. In pratica sono le classi che sono delegate a trasformare le informazioni contenuti nei modelli in modo tale da essere visualizzate nella View, nonchè di raccogliere le variazioni che avvengono sulle View e riportarle sul Model. L'istanza della classe ViewModel viene associata a una View tipicamente tramite databinding.
8 pagine in totale: 1 2 3 ... 5 6 7 8
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

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

Approfondimenti

Top Ten Articoli

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

Misc