Applicazione del pattern MVVM lato client con Knockout.js

1. Knockout js
“Simplify dynamic Javascript UIs by applying
the Model View ViewModel Pattern”

2. Premessa
Negli ultimi anni le applicazioni web
sono diventate sempre più complesse

3. Con l’introduzione di AJAX le abbiamo
fatte andare sempre più veloci

4. Abbiamo cominciato a far lavorare
Knockout.js di più il browser spostando la
logica dal server al client

5. E ci siamo trovati con vecchi
problemi che pensavamo di
aver risolto …

6. Knockout.js
Knockout è un’API JavaScript
che facilita la costruzione di
interfacce utente introducendo
il pattern MVVM lato client
Model View ViewModel

7. MVC vs MVVM
Ci è stato detto più volte che il
modo migliore per sviluppare
una applicazione web è quello
di seguire il pattern MVC

8. MVC vs MVVM
MVVM si differenzia da MVC
perché introduce il concetto di
ViewModel, un oggetto che
gestisce le interazioni tra il
Model e gli elementi della View

9. MVC vs MVVM
MVVM non è alternativo a MVC, lo
completa, in quanto permette di
demandare al client le operazioni
che interessano soltanto la
modifica degli elementi della View

10. Knockout.js
In questo senso Knockout ci
permette di implementare
facilmente MVVM riducendo al
minimo il codice da scrivere

11. Knockout.js
Caratteristiche principali

12. Declarative binding
Associazione tra le proprietà del
ViewModel e gli elementi di una View
attraverso una sintassi dichiarativa
all’interno dell’attributo data-bind

13. 1 Definiamo il ViewModel
Realizziamo ad esempio un viewModel che permetta
di visualizzare le caratteristiche di una playlist
E’ un semplice oggetto
JavaScript con proprietà
e metodi

14. 2 Associamo le proprietà del
ViewModel agli elementi
della View
Attributo dell’elemento
della View Proprietà del
ViewModel

15. 3 Ordiniamo a knockout di
applicare le associazioni
Deve essere fatto dopo il
caricamento del DOM

16. Automatic UI refresh
Grazie alla definizione di oggetti
“observable” knockout mantiene
sincronizzata l’interfaccia utente
con i valori del ViewModel

17. 4 ko.observable( )
Se modifico il valore tramite il campo input
il titolo rifletterà la modifica

18. Dependency tracking
Ogni volta che un elemento della
View o un’altra proprietà del
ViewModel fanno riferimento ad
un observable knockout registra
una dipendenza che risolve
automaticamente secondo lo
schema publish-subscribe

19. 5 ko.computed( )
Campo calcolato che dipende
dal valore di altre proprietà, ci
pensa knockout a gestirne
l’aggiornamento al modificare
di una delle sue dipendenze

20. Templating
Se il normale html non basta ed il
codice diventa ripetitivo possiamo
ricorrere ai template

21. 6 template: { name: …
Nome del template

22. Knockout + MVC
In qualche modo le informazioni
devono passare da e per il server.
In ASP.NET MVC3 lo facciamo con
JSON, AJAX e il Model Binder

23. Credits
Le immagini contenute in questa presentazione hanno
licenza Creative Commons
Slide 1: http://www.flickr.com/photos/jnyemb/5200175187/in/photostream/
Slide 2: http://www.flickr.com/photos/theilr/345056969/in/photostream/
Slide 3: http://www.flickr.com/photos/damianmorysfotos/4388501292/in/photostream/
Slide 5: http://www.flickr.com/photos/su-lin/131551438/in/photostream/

24. Thank You MANUEL SCAPOLAN
website: www.manuelscapolan.it
twitter: manuelscapolan
e-mail: info@manuelscapolan.it