fe02 ria con breeze e knockout
Post on 24-May-2015
89 Views
Preview:
TRANSCRIPT
Template designed by
Rich Internet Applicationcon Breeze e Knockout
Giorgio Di Nardogiorgio.dinardo@domusdotnet.org@akelitzblogs.ugidotnet.org/akelitz
Template designed by
Template designed by
brought to you by
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
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
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
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
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
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’è?
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?
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?
Scopriamo Knockout
in 5 minuti
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
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’è?
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?
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?
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
Template designed by
• Creare un nuovo progetto ASP.NET Web Application vuoto
• Aggiungere i pacchetti NuGet di Breeze e Knockout
Preparareil 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’applicazion
e
• Utilizzare Breeze per l’accesso ai dati
• EntityManager come proxy del servizio Web API
Consumarei dati
Scrivere una RIA con Breeze e Knockout
E ora…
sporchiamoci le mani!
Template designed by
brought to you by
top related