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