Data binding e MVVM

  • Articolo

MVVM (Model-View-ViewModel) è un modello di progettazione dell'architettura dell'interfaccia utente che consente di separare il codice relativo all'interfaccia utente da quello non relativo a quest'ultima. Con MVVM, puoi definire in modo dichiarativo l'interfaccia utente in XAML e usare il markup di data binding per eseguirne il collegamento ad altri livelli contenenti dati e comandi. L'infrastruttura di data binding implementa un regime di controllo libero che mantiene sincronizzati l'interfaccia utente e i dati collegati e instrada l'input utente ai comandi appropriati.

Poiché fornisce un regime di controllo libero, l'uso del data binding riduce le dipendenze rigide tra i diversi tipi di codice. Ciò semplifica la modifica delle singole unità di codice (metodi, classi, controlli e così via) senza causare effetti collaterali indesiderati in altre unità. Questa separazione è un esempio della separazione delle problematiche, un concetto importante in molti modelli di progettazione.

Vantaggi del modello MVVM

La separazione del codice presenta molti vantaggi, tra cui:

  • Abilitazione di uno stile di codifica esplorativo iterativo. La modifica isolata è meno rischiosa e più semplice da sperimentare.
  • Semplificazione del testing unità. Le unità di codice isolate l'una dall'altra possono essere testate singolarmente e all'esterno degli ambienti di produzione.
  • Supporto della collaborazione tra team. Il codice separato conforme a interfacce ben progettate può essere sviluppato da individui o team distinti e integrato in un secondo momento.
  • Miglioramento della gestibilità. La correzione dei bug nel codice separato ha meno probabilità di causare regressioni in altro codice.

Diversamente dal modello MVVM, un'app con una struttura "code-behind" più convenzionale in genere usa il data binding per i dati di sola visualizzazione e risponde all'input utente gestendo direttamente gli eventi esposti dai controlli. I gestori eventi vengono implementati in file code-behind (ad esempio, MainPage.xaml.cs) e sono spesso strettamente collegati ai controlli, che di solito contengono codice che modifica direttamente l'interfaccia utente. Per questo motivo, è difficile o addirittura impossibile sostituire un controllo senza dover aggiornare il codice di gestione degli eventi. Con questa architettura, i file code-behind spesso accumulano codice non direttamente correlato all'interfaccia utente, ad esempio il codice di accesso al database, che alla fine viene duplicato e modificato per l'uso con altre pagine.

Livelli dell'app

Quando viene usato il modello MVVM, un'app è suddivisa nei livelli seguenti:

  • Il livello modello (model) definisce i tipi che rappresentano i tuoi dati business. Sono inclusi tutti gli elementi necessari per modellare il dominio dell'app principale e spesso è compresa la logica dell'app di base. Questo livello è completamente indipendente dai livelli visualizzazione (view) e modello visualizzazione (view-model) e spesso risiede parzialmente nel cloud. Dato un livello modello completamente implementato, se vuoi, puoi creare più app client diverse, ad esempio app UWP e Web che funzionano con gli stessi dati sottostanti.
  • Il livello visualizzazione (view) definisce l'interfaccia utente usando il markup XAML. Il markup include espressioni di data binding (ad esempio, x:Bind) che definiscono il collegamento tra specifici componenti dell'interfaccia utente e diversi membri del modello e del modello visualizzazione. I file code-behind vengono talvolta usati come parte del livello visualizzazione per contenere codice aggiuntivo necessario per personalizzare o modificare l'interfaccia utente oppure per estrarre dati dagli argomenti del gestore eventi prima di chiamare un metodo del modello visualizzazione che esegue il lavoro.
  • Il livello modello visualizzazione (view-model) fornisce destinazioni di data binding per la visualizzazione. In molti casi, il modello visualizzazione espone direttamente il modello o fornisce membri che eseguono il wrapping di specifici membri del modello. Il modello visualizzazione può inoltre definire membri per tenere traccia dei dati rilevanti per l'interfaccia utente, ma non per il modello, ad esempio l'ordine di visualizzazione di un elenco di elementi. Il modello visualizzazione funge anche da punto di integrazione con altri servizi, ad esempio il codice di accesso al database. Per i progetti semplici, potresti non avere bisogno di un livello modello distinto, ma solo di un modello visualizzazione che incapsula tutti i dati necessari.

MVVM di base e avanzato

Come per qualsiasi modello di progettazione, esiste più di un modo per implementare MVVM e molte tecniche diverse sono considerate parte di MVVM. Per questo motivo, sono disponibili diversi framework MVVM di terze parti che supportano le varie piattaforme basate su XAML, tra cui la piattaforma UWP. Tuttavia, questi framework in genere includono più servizi per l'implementazione dell'architettura separata, rendendo alquanto ambigua l'esatta definizione di MVVM.

Sebbene i framework MVVM sofisticati possano essere molto utili, soprattutto per i progetti di portata aziendale, di solito esiste un costo associato all'adozione di un modello o di una tecnica particolare e i vantaggi non sono sempre evidenti, a seconda della scalabilità e delle dimensioni del progetto. Fortunatamente, puoi adottare solo le tecniche che offrono un vantaggio chiaro e tangibile e ignorarne altre fino a quando non ti sono necessarie.

In particolare, puoi ottenere un notevole vantaggio semplicemente comprendendo e applicando tutta la potenza del data binding e separando la logica dell'app nei livelli descritti in precedenza. A tale scopo, è sufficiente usare le funzionalità fornite da Windows SDK, senza alcun framework esterno. Più specificamente, l'estensione di markup {x:Bind} semplifica il data binding e ne migliora le prestazioni rispetto alle precedenti piattaforme XAML, eliminando la necessità di una buona parte del codice boilerplate richiesto in precedenza.

Per altre indicazioni sull'uso del modello MVVM di base predefinito, vedi Esempio di database per gli ordini dei clienti in GitHub. Anche molti degli altri esempi di app UWP usano un'architettura MVVM di base, mentre l'esempio di app per la visualizzazione del traffico include sia una versione code-behind che una versione MVVM, con note che illustrano la conversione MVVM.

Vedi anche

Argomenti

Informazioni approfondite sul data binding
Estensione di markup {x:Bind}

Esempi

Esempio di database per gli ordini dei clienti
Esempio di inventario VanArsdel
Esempio di app per la visualizzazione del traffico