2. Pattern MVVM
É uno dei design pattern relativi all’area
«presentation/ui»
Introdotto da Microsoft come
specializzazione del Presentation Model di
Martin Fowler
Deriva dal pattern MVC, dal quale eredita il
principale obiettivo di…
…ottenere una netta separazione delle
responsabilità tra i diversi moduli
coinvolti nella gestione della UI di
un’applicazione
3. Componenti
MODEL : è costituito dall’insieme dei moduli
che contribuiscono ad implementare la
logica/processi/comportamento
dell’applicazione
VIEW(S) : descrivono, nella piattaforma di
layout/rendering/ux di riferimento, gli elementi
di «pura» interfaccia utente (senza descriverne
il comportamento, ma solo l’aspetto)
VIEWMODEL(S) : oggetti, idealmente privi di
dipendenze, che veicolano i dati da e verso le
View e implementano, in maniera astratta, il
comportamento di una interfaccia utente
4. Esempio Notifiche Facebook
Il MODEL espone la funzionalità per
enumerare le notifiche destinate all’utente
loggato, filtrate ed ordinate, sotto forma di
collezione di oggetti «plain»
La VIEW è composta da elementi di layout
specifici della piattaforma (ListView,
TextView, ImageView, LinearLayout, ecc.)
Il VIEWMODEL «parent» contiene il titolo
(«Notifications»), i comandi relativi ai
pulsanti della toolbar e una collezione di
VIEWMODEL «children»
Il VIEWMODEL «child» contiene il
riferimento all’avatar e il nome dell’autore,
il testo della notifica, la categoria e un
riferimento temporale
5. Esempio Notifiche Facebook
La mappatura tra proprietà della VIEW e
del VIEWMODEL può essere «naturale»
(es. titolo, autore e testo notifica)…
…o meno (es. immagine avatar, icona
categoria)
Una proprietà del VIEWMODEL può
essere «calcolata» (read-only, rivalutata
automaticamente quando cambiano altre
proprietà da cui dipende, es. «età» della
notifica)
Un VIEWMODEL espone anche
«comandi», ossia azioni scatenate da
interazioni utente o eventi «interni»
Un VIEWMODEL solleva eventi se serve
notificare le VIEW collegate, non le
«manipola» direttamente, altrimenti ne
dipenderebbe!
6. Note
Il pattern MVVM è tanto più efficace quanto più
«naturale» è il modo di legare VIEW a
VIEWMODEL (es. Binding in XAML,
KnockoutJS, AngularJS, AndroidBinding, ecc.)
Il pattern MVVM è il mezzo migliore per
applicare lo Unit Testing anche al layer UI
Nel pattern MVVM la comunicazione tra diversi
VIEWMODEL (ad es. children di una stessa
gerarchia) avviene tipicamente seguendo un
modello di messaging pub/sub, per minimizzare
il mutuo accoppiamento, tramite un «event
aggregator»
7. DEMO
AndroidBinding (framework di Andy Tsui,
reperibile su GitHub)
Observables
Binding
DependantObservables
CollectionObservables
CollectionObservers
Commands
Eventi (viewmodelview e viewmodelviewmodel)
Unit Testing (con Junit)