Rich client application: MVC4 + MVVM = Knockout.js
-
Upload
giorgio-di-nardo -
Category
Technology
-
view
347 -
download
2
description
Transcript of Rich client application: MVC4 + MVVM = Knockout.js
Template designed by
Rich client application:MVC4 + MVVM = Knockout.js
Giorgio Di [email protected]://blogs.ugidotnet.org/akelitz/@akelitz
brought to you by
GIORGIO DI NARDO Lavoro presso Proge-software come Senior Consultant
Sono tra i fondatori di DomusDotNet
Sono Microsoft Certified Trainer
chi sono
MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo: estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo: estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
Pattern architetturale Model = dati
View = interfaccia
Controller = interazione
Separation-of-Concerns
Dependency Injection
Convention-over-Configuration
MVC4 = Model View Controller “in salsa” Model2
Client
Utente(browser)
Server
Controller
View
Model
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
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
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 6+, Firefox 2+, Chrome, …)
Non sostituisce ma si integra con jQuery
Knockout.js: cosa è?
MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo: estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
In tutti i casi in cui l’interazione del sistema con l’utente non sia banale e richieda la definizione di una logica di UI strutturata…
… in particolare nelle Rich Internet Application (RIA)
Knockout.js: quando usarlo?
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.js: perchè usarlo?
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.js: come usarlo?
dem
o Hello World
MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo: estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
Knockout garantisce out-of-the-box le funzioni per leggere e scrivere e per notificare le variazioni ai subscriber, però…
… e possibile estendere il meccanismo degli observable in maniera semplice scrivendo poco righe di codice…
… oppure sfruttare i plugin e gli extender disponibili ad esempio su NuGet
Estendere Knockout.js
dem
o Hello World
MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo: estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
Parte dello sviluppo software che si occupa della verifica delle corrispondenza tra il funzionamento del codice e i requisiti
Target (unit, integration, system) e Scope (functional, performance, scalability, acceptant, …)
Consente di migliorare la qualità del proprio codice, ridurre il peso della manutenzione ma anche (TDD) migliorarne il design
Testing, Unit testing e TDD
Testare piccoli frammenti di codice («unit»), tipicamente metodi
Testare i soli endpoint pubblici
Testare in maniera isolata rispetto al resto dell’applicazione
Ottenere il risultato positivo/negativo dei test in maniera automatizzata
Pilastri dello Unit testing
Utilizzare lo Unit testing per guidare lo sviluppo della propria applicazione
Scrivere il codice strettamente necessario a passare i test
Red/Green cycle
Utilizzabile sia per i nuovi sviluppi che per il bug fixing
Attenzione al refactoring!
Test Driven Development
Arrange: predisporre l’ambiente per il test
Act: effettuare la chiamata al codice oggetto del test
Assert: verificare che ciò che ci si aspettava si è verificato (e ciò che non ci si aspettava non si è verificato)
Verificare un comportamento alla volta (single assertion rule)
Arrange, Act, Assert
Framework di test della famiglia jQuery
Sintassi di Asserting semplice ed immediata
Interfaccia chiara
Possibilità di dividere i test in moduli
Possibilità di preparare e ripulire l’ambiente di test in maniera centralizzata
qUnit
dem
o Hello World
MVC4 + MVVM = Knockout.js: cioè?
Knockout.js: quando, perché e come
datemi un punto d'appoggio e solleverò il mondo: estendere KO
unit testing lato-client? si può!
tutto qui!?
agenda agile
Fornito di un motore di templating del markup HTML
Corredato da Plugin (mapping, …) ed Extender (validation, ...)
Disegnato per integrarsi al meglio con altri framework Javascript: Durandal.js, Require.js, ...
Pilastro per costruzione delle Single Page Application
No! Knockout.js è anche…
brought to you by
Grazie a tutti per la partecipazione
Riceverete il link per il download a slide e demo via email nei prossimi giorni
Per contattarmi
Grazie