UNIVERSAL APP IN TUTTE LE SALSE: PHONE, TABLET, PC, XBOX E IOT
Fe02 ria con breeze e knockout
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
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?
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