1. Template designed by
Rich Internet Application
con Breeze e Knockout
Giorgio Di Nardo
giorgio.dinardo@domusdotnet.org
@akelitz
blogs.ugidotnet.org/akelitz
Template designed by

2. Template designed by
brought to you by

3. Template designed by
 Si fa presto a dire Model-View-ViewModel
 Knockout: cosa, perché e come?
 Breeze: cosa, perché e come?
 Scrivere una RIA con Breeze e Knockout
Agenda agile

4. Template designed by
 Si fa presto a dire Model-View-ViewModel
 Knockout: cosa, perché e come?
 Breeze: cosa, perché e come?
 Scrivere una RIA con Breeze e Knockout
Agenda agile

5. Template designed by
 Pattern di presentation della
famiglia MV*
 Separation-of-Concerns
 Rompere il legame forte tra i
dati (Model) e la loro
rappresentazione (View) per
mezzo di un terzo soggetto
(ViewModel)
MVVM = Model-View-ViewModel
 Si definiscono e si idratano i
dati (Model) da visualizzare
 Si veicolano i dati attraverso il
ViewModel verso la View
utilizzando un meccanismo di
data-bind che permetta la
gestione bidirezionale degli
aggiornamenti dei dati stessi
 Si definiscono delle operazioni
nel ViewModel per gestire gli
eventi provenienti dalla View

6. Template designed by
 Model: i dati gestiti dall’applicazione rappresentati sotto
forma di oggetto o array Javascript
 View: la pagina HTML contenente i vari elementi di markup
 ViewModel: un oggetto Javascript che espone i dati (Model)
in un formato «comodo» per l’interfaccia (View) e contiene le
operazioni per rispondere agli eventi da questa generati
MVVM in HTML

7. Template designed by
 Si fa presto a dire Model-View-ViewModel
 Knockout: cosa, perché e come?
 Breeze: cosa, perché e come?
 Scrivere una RIA con Breeze e Knockout
Agenda agile

8. Template designed by
 Libreria in Javascript puro per semplificare la creazione in HTML di
applicazioni basate su MVVM
 Caratteristiche principali:
 Binding dichiarativo dei dati nel markup HTML
 Gestione delle dipendenze con aggiornamento automatico nelle due direzioni
 Facilità di estensione delle funzionalità di base
 Compatibile con la maggior parte dei browser (IE 8+, Firefox 2+,
Chrome, …)
 Non sostituisce ma si integra con jQuery
Knockout: cos’è?

9. Template designed by
 Aiuta ad aumentare la SoC del progetto anche nella parte
storicamente più propensa allo «spaghetti code»
 Consente di gestire in maniera più strutturata e manutenibile
gli elementi e gli eventi del DOM
 Semplifica enormemente i problemi di unit testing della parte
client della nostra applicazione
….
Knockout: perché usarlo?

10. Template designed by
 Si creano gli oggetti ViewModel e si definiscono al loro
interno le proprietà observable contenenti i dati da mostrare
e le funzioni associate ai comandi scatenabili dalla View
 Si aggiungono gli attributi data-bind al markup della pagina
HTML
 Si attiva il binding con una chiamata al metodo
ko.applyBinding
Knockout: come usarlo?

11. Scopriamo Knockout
in 5 minuti

12. Template designed by
 Si fa presto a dire Model-View-ViewModel
 Knockout: cosa, perché e come?
 Breeze: cosa, perché e come?
 Scrivere una RIA con Breeze e Knockout
Agenda agile

13. Template designed by
 Libreria in Javascript puro per semplificare la gestione dei dati lato
client in applicazioni RIA
 Caratteristiche principali:
 Potente motore di query dei dati con possibilità di filtri, ordinamenti e paginazione
 Tracciatura delle modifiche con gestione delle dipendenze, notifica di eventi e validazione
 Caching lato client dei dati per garantire una UI più responsiva
 Compatibile con la maggior parte dei browser (IE 8+, Firefox 3+,
Chrome 5+, Safari 4+)
 Disegnato su Web API ma compatibile con ogni servizio OData
Breeze: cos’è?

14. Template designed by
 Aiuta ad costruire applicazioni responsive alleggerendo dal
carico della gestione delle entità lato client
 Supporta out-of-box i principali framework di data binding
client-side (Knockout, Angular, Backbone)
 Semplifica enormemente i problemi di unit testing della parte
client della nostra applicazione
….
Breeze: perché usarlo?

15. Template designed by
 Si crea un oggetto EntityManager per accedere ai dati e
gestire la cache locale
 Si fornisce la struttura del modello di dominio presente lato
server per mezzo di metadati generati automaticamente o
configurati manualmente
 Si recuperano le informazioni dal server mediante un oggetto
EntityQuery e una sintassi immediata per impostare filtri,
ordinamento e paginazione
Breeze: come usarlo?

16. Template designed by
 Si fa presto a dire Model-View-ViewModel
 Knockout: cosa, perché e come?
 Breeze: cosa, perché e come?
 Scrivere una RIA con Breeze e Knockout
Agenda agile

17. Template designed by
• Creare un nuovo progetto
ASP.NET Web Application
vuoto
• Aggiungere i pacchetti
NuGet di Breeze e
Knockout
Preparare
il progetto
• Definire il modello e
gestire la persistenza
• Creare un Web API che
esponga le entità di
dominio
Scrivere
il servizio • Creare la struttura con
HTML5 e CSS3
• Utilizzare MVVM per
separare i dati dalla UI
• Utilizzare Knockout per il
Data Binding
Disegnare
l’applicazione
• Utilizzare Breeze per
l’accesso ai dati
• EntityManager come proxy
del servizio Web API
Consumare
i dati
Scrivere una RIA con Breeze e Knockout

18. E ora…
sporchiamoci le mani!

19. Template designed by
brought to you by